Question

我的电子商务提供商给了我一个脚本，允许我根据用户从一个简单的选择元素中选择的产品选项动态更改库存水平。

虽然代码看起来很紧张，但它无法正常运行。由于我是jQuery的新手，我假设这是因为我没有在我的html中正确初始化脚本。代码本身是我的电子商务提供商提供的默认代码，但不以任何方式支持它。

这是脚本

<script>
// <![CDATA[  
var selectCallback = function(variant, selector) {
  if (variant) {
    if (variant.available) {
      // Selected a valid variant that is available.
      $('#add-to-cart').removeClass('disabled').removeAttr('disabled').val('Add to Cart').fadeTo(200,1);
    } else {
      // Variant is sold out.
      $('#add-to-cart').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 ) {
      $('#product_price').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 {
      $('#product_price').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "") + '</span>' );
    }        
  } else {
    // variant doesn't exist.
    $('#add-to-cart').val('Unavailable').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
  }
}
// initialize multi selector for product
jQuery(function($) {
  new Shopify.OptionSelectors("product-select", { product: , onVariantSelected: selectCallback });
});
// ]]>
</script>

关于为什么这可能不起作用的任何想法？您可以在我的网站上看到此脚本： http://www.yandasmusic.com/products/fender-american-standard-stratocaster?variant=1178632565

编辑：经过进一步检查，我发现第二段代码也调出了产品选项选择框。我可以告诉您，此代码还可以根据所选的当前选项更改当前显示的产品图像：

<script>
  var selectCallback = function(variant, selector) {
    if (variant && variant.available) {
      jQuery('#add-to-cart').removeAttr('disabled').removeClass('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
      if(variant.price < variant.compare_at_price){
        jQuery('#product_price .price').html('<span class="money">' + Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span><span class="money compare-at-price">' + Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") + '</span>');
      } else {
        jQuery('#product_price .price').html('<span class="money">' + Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>');
      }
    } else {
      jQuery('#add-to-cart').addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
      var message = variant ? "Sold Out" : "Unavailable";
      jQuery('#product_price .price').text(message);
    }

//     if (variant && variant.featured_image) {
//         var originalImage = $(".zoomWrapper img");
//         var newImage = variant.featured_image;
//         var element = originalImage[0];
//         Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
//             $(element).parents('a').attr('href', newImageSizedSrc);
//             $(element).attr('src', newImageSizedSrc);
//         });
//     };

    if (variant && variant.featured_image) {
        var originalImage = $("#elevatezoom_big");
        var newImage = variant.featured_image;
        var element = originalImage[0];
        Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
            $(element).attr('src', newImageSizedSrc);

            $("#elevatezoom_gallery a").each(function(){
                if ( $(this).attr('data-zoom-image') == newImageSizedSrc ) {
                    $(this).trigger('click')
                };
            });
        });
    };

  };

  jQuery(document).ready(function($){
    new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback, enableHistoryState: true });

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

    // Auto-select first available variant on page load.
    {% assign found_one_in_stock = false %}
    {% for variant in product.variants %}
      {% if variant.available and found_one_in_stock == false %}
        {% assign found_one_in_stock = true %}
        {% for option in product.options %}
        $('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
        {% endfor %}
      {% endif %}
    {% endfor %}

  });
</script>

如果我运行这两个脚本，该页面会显示两个产品选项的选择框。是否可以将它们结合起来？

Answer 1

由于以下代码行，您的网页上存在JavaScript错误：

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

根据此参考文档：https://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options，该行代码实际上应如下所示：

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

如何正确加载特定的jQuery脚本

1 个答案: