Shopify Slate variant not updating

Question

I have a theme built on top of Shopify Slate. All my products have various size and colour variants. These are outputted on the page as two select elements - one for size and one for colour. When I choose options from these two selects and add my product to the cart, it always adds the default variant.

This is the variant code in my product.liquid section:

{% unless product.has_only_default_variant %}
    {% for option in product.options_with_values %}
        <div class="selector-wrapper js">
            <label for="SingleOptionSelector-{{ forloop.index0 }}">
                {{ option.name }}
            </label>

            <select id="SingleOptionSelector-{{ forloop.index0 }}" 
            class="single-option-selector" data-single-option-selector data-index="option{{ option.position }}">
                {% for value in option.values %}
                    <option
                        value="{{ value | escape }}"
                        {% if option.selected_value == value %}selected="selected"{% endif %}>
                        {{ value }}
                    </option>
                {% endfor %}
            </select>
        </div>
    {% endfor %}
{% endunless %}

<select name="id" class="" data-product-select>
    {% 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>

By the looks of the code in variant.js and product.js, the values from the first two selects are supposed to be used to update the last one, but for some reason this isn't happening. The code in these two files has not been changed, and I'm not getting any JS errors in the console, so I'm at something of a loss!

share the storefront url. make sure its not password protected. — Mash R.
Unfortunately the client won't let me make it public until the site is complete. I realise that makes things more difficult, but I'm happy to post any code you want to see if that helps? — Infobahn

Kaiji Itou Kaiji Itou · Accepted Answer · 2017-10-11T21:51:50

Make sure that your entire section (except schema) is wrapped in

<div data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" itemscope itemtype="http://schema.org/Product">

and you pass your product object json to slate scripts

<script type="application/json" data-product-json>
      {{ product | json }}
</script>

Shopify Slate variant not updating

1 Answers