<noscript> on variant selector prevents Dynamic Checkout buttons enabling

[darryn]

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