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

Posted 2023-02-16

【中文标题】在 Shopify 中选择新变体时价格未更新

【英文标题】：Price not updating when selecting a new variant in Shopify

【发布时间】：2020-11-20 16:04:44

【问题描述】：

我正在尝试编辑 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 论坛根本没有帮助。

【参考方案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="optionmaterial_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="optionsize_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>

【讨论】：

附加问题，现在当我想将所述变体添加到我的购物车时，它给了我这个错误：TypeError: Cannot read property 'classList' of null at Product._setCartCountBubble (theme.js?v=16941873179886687807:8536) at theme.js?v=16941873179886687807:8377

@SiemenGijbels 你确定这是因为上面的代码吗？因为它对我来说在新的 Debut 主题上工作得很好。可能你做了一些其他的自定义？