在 Shopify 中选择新变体时价格未更新

Question

我正在尝试编辑 Debut 主题以更好地满足我客户的需求。每当我在 product-template.liquid 文件中编辑变体选择器时，它都会引发错误并且不会将价格更新为正确的变体。

错误：

Uncaught TypeError: Cannot read property 'available' of undefined
    at Product._initVariants (theme.js?v=785054923643579389:8098)
    at new Product (theme.js?v=785054923643579389:8010)
    at Sections._createInstance (theme.js?v=785054923643579389:47)
    at Sections.<anonymous> (theme.js?v=785054923643579389:141)
    at NodeList.forEach (<anonymous>)
    at Sections.register (theme.js?v=785054923643579389:139)
    at HTMLDocument.<anonymous> (theme.js?v=785054923643579389:9467)

原始代码是这样的（按预期完美运行）：

<div class="product-form__controls-group">
    {% for option in product.options_with_values %}
        <div class="selector-wrapper js product-form__item">
            <label for="SingleOptionSelector-{{ forloop.index0 }}" >
                {{ option.name }}
            </label>
            <select class="single-option-selector single-option-selector-{{section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
                {% for value in option.values %}
                    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                {% endfor %}
             </select>
        </div>
    {% endfor %}
</div>

我对此进行了编辑（我将两者分开，因为这是我的客户在他提出的设计中需要的）：

<div class="product-form__controls-group">
    <div class="selector-wrapper js product-form__item">
        <label for="SingleOptionSelector-0">
            Material
        </label>
        <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
            {% for option in product.options_by_name['Material'].values %}
                {% for value in option %}
                    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                {% endfor %}
            {% endfor %}
        </select>
    </div>
    <div class="selector-wrapper js product-form__item">
        <label for="SingleOptionSelector-1">
            Size
         </label>
         <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
             {% for option in product.options_by_name['Size'].values %}
                 {% for value in option %}
                     <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                 {% endfor %}
             {% endfor %}
         </select>
     </div>
</div>

如果有人可以帮助我，那就太棒了，因为 Shopify 论坛根本没有帮助。

Answer 1

您的代码不起作用，因为它没有创建 Theme JS 所期望的所需架构。所以它无法识别所选的变体。在原始代码中，使用 this 指定了一个名为 data-index 的数据属性。

data-index="option{{ forloop.index }}"

但是，您没有将其更改为数值，因为您没有使用 for 循环。所以要解决这个问题，我们必须在选项数组中找到选项的位置。为此，我这样做了。

    {% for product_option in product.options_with_values %}
        {% if product_option.name == "Material" %}
            {% assign material_index = forloop.index %}
            
        {% elsif  product_option.name == "Size" %}
            {% assign size_index = forloop.index %}
        {% endif %}
    {% endfor %}

如果您正在使用，也包括其他选项。所以完整的工作代码是

    {% for product_option in product.options_with_values %}
        {% if product_option.name == "Material" %}
            {% assign material_index = forloop.index %}
            
        {% elsif  product_option.name == "Size" %}
            {% assign size_index = forloop.index %}
        {% endif %}
    {% endfor %}

    <div class="product-form__controls-group">
        <div class="selector-wrapper js product-form__item">
            <label for="SingleOptionSelector-0">
                Material
            </label>
            <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{material_index}}" data-index="option{{material_index}}">
                {% for option in product.options_by_name['Material'].values %}
                    {% for value in option %}
                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                    {% endfor %}
                {% endfor %}
            </select>
        </div>
        <div class="selector-wrapper js product-form__item">
            <label for="SingleOptionSelector-1">
                Size
             </label>
             <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{size_index}}" data-index="option{{size_index}}">
                 {% for option in product.options_by_name['Size'].values %}
                     {% for value in option %}
                         <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                     {% endfor %}
                 {% endfor %}
             </select>
         </div>
    </div>