Shopify 變體價格更改使用 setCallBack 不起作用

Question

我正在嘗試在選擇變體時更新產品價格。 到目前為止，我有以下內容； 但只是不能讓它工作。

我已將此腳本添加到 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>

和這里的回調 function

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

Answer 1

查看代碼，當您嘗試初始化 Shopify.OptionSelectors 時，您似乎只是缺少產品Shopify.OptionSelectors

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

嘗試將產品 object 添加到此行，看看是否能解決問題。 更新后的行應如下所示：

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