javascript - Shopify Slate 变体未更新

Question

我有一个基于 Shopify Slate 构建的主题。我的所有产品都有各种尺寸和颜色可供选择。它们作为两个选择元素输出在页面上 - 一个用于尺寸，一个用于颜色。当我从这两个选项中选择选项并将产品添加到购物车时，它始终会添加默认变体。

这是我的product.liquid部分中的变体代码:

{% 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>

从variant.js和product.js中的代码来看，前两个选择的值应该用于更新最后​​一个选择，但由于某种原因，这种情况没有发生。这两个文件中的代码没有改变，而且我在控制台中没有收到任何 JS 错误，所以我有点不知所措!

Answer 1

确保您的整个部分(除了架构)都包含在

中

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

然后将产品对象 json 传递给 slate 脚本

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