javascript - Shopify 选项选择器不更改价格

Question

我正在尝试修复我的选项选择，因为之前该公司安装了粗体，并且它扰乱了我们的选项选择。我有要显示的选项选择，但正是我想要的，但它现在有效......但无论我做什么，价格都不会改变!谁能帮我弄清楚我在这里缺少什么？

第一个代码片段包含在我的“product-form.liquid”片段中

    <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="form-vertical">

    <select name="id" id="ProductSelect" class="product-single__variants">
                {% for variant in product.variants %}
                  {% if variant.available %}

                    <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

                  {% else %}
                    <option disabled="disabled">
                      {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                    </option>
                  {% endif %}
                {% endfor %}
              </select>
      {% if settings.product_swatches %}
        {% if product.available and bold_variants_size > 1 %}
          {% for option in product.options %}
            {% include 'swatch' with option %}
          {% endfor %}
        {% endif %}
      {% endif %}
      {% if settings.product_different_swatches %}
        {% include 'different_product_swatches' with product.type, titlee: settings.product_different_swatches_title %}
      {% endif %}

     <div class="formWrap">
      <div class="price-variant-wrap">
        <span class="priceText">PRICE:</span>
         <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
              <span id="ProductPrice" class="h2" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                {{ current_variant.price | money }}
              </span>

              {% if product.compare_at_price_max > product.price %}
                <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
                <p id="ComparePrice">
                  {{ 'products.product.compare_at' | t }} {{ current_variant.compare_at_price | money }}
                </p>
              {% endif %}
      </div>

      {% assign isFreeGift=false %}
      {% for tag in product.tags %}
        {% if tag =='SECOMAPP_FREEGIFT'%}
          {% assign isFreeGift=true %}
        {% endif %}
      {% endfor %}
      {% if isFreeGift == false %}
      <div class="product-bottom-wrap">

        <div class="fancy_btn_wrap">
          <div class="product-single__add-to-cart">
          {% if settings.prod_quantity == 'plus-minus' %}
              {% include 'quantity' %}
          {% elsif settings.prod_quantity == 'number' %}
            <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
            <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
          {% endif %}
            <div class="submit-container">
              <button type="submit" name="add" id="AddToCart" data-price="{{ current_variant.price | money_without_currency }}" class="btn {{settings.product_page_button_type}} ">
                <input type="hidden" name="return_to" value="back" />
                <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
              </button>
            </div>
          </div>
        </div>
      </div>
       {% endif %}
    </div>
        <div id="shopmessage-checkbox" class="fbmessage"></div>
    </form>
    <div class="sca-fg-cat-list" style="display: none;" name="secomapp-fg-data-{{ product.id }}"> </div>

下面的代码位于我的product.template中

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="{{ shop.currency }}">

                <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
                {% if settings.product_description_location == 'above_form' %}
                <div class="product-description rte" itemprop="description">

                 {% if product.description contains '<!-- split -->' %} 
                   {{ description[0] }} 
                 {% else %} 
                   {{ product.description }} 
                 {% endif %}
                </div>
              {% endif %}
                {% comment %}
                  ID addToCartForm is a selector for the ajax cart plugin
                {% endcomment %}
                {% include 'product-form' %}
                {% include 'addthis' %}

              </div>

    <script>
    var selectCallback = function(variant, selector) {
      {% if settings.product_swatches %}
      // BEGIN SWATCHES
      if (variant) {
        var form = jQuery('#' + selector.domIdPrefix).closest('form');
        for (var i=0,length=variant.options.length; i<length; i++) {
          var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
          if (radioButton.size()) {
            radioButton.get(0).checked = true;
          }
        }
      }
      // END SWATCHES
      {% endif %}
      timber.productPage({
        money_format: "{{ shop.money_format }}",
        variant: variant,
        selector: selector
      });
    };

    jQuery(function($) {
      new Shopify.OptionSelectors('productSelect', {
        product: {{ product | 'json' }},
        onVariantSelected: selectCallback,
        enableHistoryState: false
      });

      // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
      {% if product.options.size == 1 and product.options.first != 'Title' %}
        $('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
      {% endif %}

      // Hide selectors if we only have 1 variant and its title contains 'Default'.
      {% if bold_variants_size == 1 and bold_selected_or_first_available_variant.title contains 'Default' %}
        $('.selector-wrapper').hide();
      {% endif %}
    });

    {% unless product.title == 'Gift Card' %}
      var checkExist = setInterval(function() {
        if ($('.spr-badge .spr-badge-caption').length) {
          var rating = $('.spr-starrating.spr-summary-starrating').html();
          var noOfRatings = $('.spr-summary-caption').html();
          var ratingHolder = $('.ratingHolder');
          ratingHolder.prepend(noOfRatings);
          ratingHolder.prepend(rating);
          ratingHolder.click(function(){
            $('#product_tabs .tab_3 a').trigger('click');
            $('html, body').animate({
              scrollTop: $("#product_tabs").offset().top - $('.site-header').outerHeight() - 30
            }, 1000);
          });
          clearInterval(checkExist);
        }
      });
    {% endunless %}
    </script>

不太确定这里发生了什么，几乎是实时代码中的代码，但粗体已被删除，并且是不同的。 “productSelect”在实时代码中是小写的，而不是大写的，这实际上使“select”显示。

谢谢!

Answer 1

如果你在使用 Bold 之前回到液体，你将会处于一个好的位置。你的代码应该可以正常工作。从那时起，您今天就可以根据自己的意愿进行定制。 Shopify 对时光倒流提供原始支持。你尝试过吗？或者在 Bold 之前从主题 vendor 那里获取主题的副本？这也将为您提供清洁的工作液体。