Как правильно загрузить конкретный скрипт jQuery

Question

Мне предоставлен сценарий моего поставщика электронной коммерции, который позволит мне динамически изменять уровни запасов на основе выбранной вами модели продукта из простого элемента select.

Хотя код кажется проливным, он не будет работать должным образом. Поскольку я довольно новичок в 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

EDIT: При дальнейшем осмотре я обнаружил второй кусок кода, который также вызывает окно выбора опций продукта. Я могу сказать, что этот код также выполняет функцию изменения отображаемого в данный момент изображения продукта на основе текущей выбранной опции:

<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 });