Shopify 使用 setCallBack 更改变体价格不起作用答案

【问题标题】：Shopify variant price change using setCallBack not workingShopify 使用 setCallBack 更改变体价格不起作用
【发布时间】：2021-01-05 09:46:14
【问题描述】：

我正在尝试在选择变体时更新产品价格。到目前为止，我有以下内容；但就是不能让它工作。

我已将此脚本添加到 theme.liquid

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

我在 product-template.liquid 中有价格

<div class="product-price"><span id="price-field">{{ product.price | money }}</span></div>

      <select
        v-model="form.id"
        name="id" id="variant-id"
        class="minimal mt-2 mb-2 {% if hide_default_title %}hidden{% endif %}">

        {% for variant in product.variants %}
        {% if variant.available %}

          <option
            {% if variant == current_variant %}selected="selected"{% endif %}
            {% unless variant.available %}disabled="disabled"{% endunless %}
            data-inventory-quantity="{{ variant.inventory_quantity }}"
            data-price="{{ variant.price | money | strip_html }}"
            value="{{ variant.id }}"
            class="js-variant-radio">{{ variant.title }}
          </option>

          {% endif %}
        {% endfor %}
      </select>

还有这里的回调函数

<script>
  // <![CDATA[
  var selectCallback = function(variant, selector) {
    if (variant) {
      if (variant.available) {
        // Selected a valid variant that is available.
        $('#add').removeClass('disabled').removeAttr('disabled').val('Add to Cart').fadeTo(200,1);
      } else {
        // Variant is sold out.
        $('#add').val('Sold Out').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
      }
      // Whether the variant is in stock or not, we can update the price and compare at price.
      if ( variant.compare_at_price > variant.price ) {
        $('#price-field').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "") +'</span>'+'&nbsp;<s class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "")+ '</s>');
      } else {
        $('#price-field').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "") + '</span>' );
      }
    } else {
      // variant doesn't exist.
      $('#add').val('Unavailable').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
    }
  }
  // initialize multi selector for product
  jQuery(function($) {
    new Shopify.OptionSelectors("variant-id", { product: , onVariantSelected: selectCallback });
  });
  // ]]>
</script>

【问题讨论】：

标签： javascript jquery shopify liquid

【解决方案1】：

查看代码，当您尝试初始化 Shopify.OptionSelectors 时，您似乎只是缺少一个产品对象

new Shopify.OptionSelectors("variant-id", { product: , onVariantSelected: selectCallback });

尝试将产品对象添加到该行以查看是否可以解决问题。更新后的行应如下所示：

new Shopify.OptionSelectors("variant-id", { product: {{ product | json }}, onVariantSelected: selectCallback });

【讨论】：