Fix no-js variant select on Featured Product #736
Conversation
ghost
added
the
templates/index.json
Outdated
| @@ -2,97 +2,248 @@ | |||
| "sections": { | |||
There was a problem hiding this comment.
Make sure to revert these files
config/settings_data.json
Outdated
| @@ -1,5 +1,33 @@ | |||
| { | |||
| @@ -286,7 +286,7 @@ | |||
| </div> | |||
|
|
|||
| {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} | |||
| <input type="hidden" disabled name="id" value="{{ product.selected_or_first_available_variant.id }}"> | |||
| <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled> | |||
There was a problem hiding this comment.
To confirm I understand, you added disabled to ensure that this input isnt used when we are on the no-js version. Correct? Because this input is actually only used for the js version and the input value was being updated when we didnt want it to
There was a problem hiding this comment.
Yes, this is reproducing the same fix from #210.
We're disabling this input so only the <select>, which has the same name, is seen by the no-js version.
This input is re-enabled via JS on product-form.js constructor:
LucasLacerdaUX
force-pushed
the
featured-product-variant-fix
branch
from
ad9704f
to
1332817
Compare
|
This kindof breaks add to cart on browsers that dont support custom elements. |
Why are these changes introduced?
When JavaScript is disabled, only initial variant could be added to cart, regardless of which variant was selected. This PR fixes this issue by replicating the same solution implemented by #210 on
main-product.liquidFixes #179.
What approach did you take?
<select>element to use the correct Form ID.Demo links
**Testing 🎩 **
Add to Cartbutton.Checklist