theme-scripts
theme-scripts copied to clipboard
<noscript> on variant selector prevents Dynamic Checkout buttons enabling
The Problem
In the Theme Product Form, when the variant select menu is created, it's wrapped in a <noscript>
tag. This prevents the Dynamic Checkout button javascript from accessing the variant select menu, and causes it to disable the Dynamic Checkout Buttons.
Replication Steps
- Load a skeleton theme generated by Slate into any Shopify store
- Make sure the store has Express payment gateways enabled
- Visit product page -> the Dynamic Checkout buttons should show, but be disabled
Example
https://screenshot.click/18-26-1u532-nlwk0.mp4
Potential Fix
There are likely better ways to fix this (I'm not stoked about the doubling of CSS in this fix), but a possible solution is to do something like this...
<noscript>
<select name="id">
{% for variant in product.variants %}
<option
{% if variant == current_variant %}selected="selected"{% endif %}
{% unless variant.available %}disabled="disabled"{% endunless %}
value="{{ variant.id }}">
{{ variant.title }}
</option>
{% endfor %}
</select>
</noscript>
...with something like this...
<select name="id">
{% for variant in product.variants %}
<option
{% if variant == current_variant %}selected="selected"{% endif %}
{% unless variant.available %}disabled="disabled"{% endunless %}
value="{{ variant.id }}">
{{ variant.title }}
</option>
{% endfor %}
</select>
select[name="id"] {
display: none;
}
.no-js select[name="id"] {
display: block;
}
Extra Notes
Slack convo... https://shopify.slack.com/archives/C0RV9A693/p1552879056003500
cc/ @t-kelly