变体选择器没有响应 (Shopify)

Question

嘿，我刚刚在产品页面上添加了我自己的变体选择器。但它没有响应。它没有改变价格。旧的工作正常，但我的变体选择器不起作用。我认为它的js代码问题。

var selectCallback = function(variant, selector) {
var $addToCart = $('#button-cart'),
    $addToCartBuy = $('#button-cart-buy'),
    $addToCartSticky = $('#button-cart-sticky'),
    $productPrice = $('#productPrice'),
    $comparePrice = $('#comparePrice'),
    $variantQuantity = $('#variantQuantity'),
    $quantityElements = $('.quantity-selector, label + .js-qty'),
    $addToCartText = $('#button-cart'),
    $featuredImage = $('#productPhotoImg');
if (variant) {
 // Regardless of stock, update the product price
        Shopify.money_format = '{{shop.money_format }}'; 

        //var customPrice = timber.formatMoney( Shopify.formatMoney(variant.price,Shopify.money_format) );
        var a11yPrice = Shopify.formatMoney(variant.price, Shopify.money_format);
        // var customPriceFormat = ' <span aria-hidden="true">' + customPrice + '</span>';
        var customPriceFormat = ' <span class="visually-hidden">' + a11yPrice + '</span>';
        $productPrice.html(customPriceFormat);

        // Also update and show the product's compare price if necessary
        {% if settings.product_show_compare_at_price %}
        if ( variant.compare_at_price > variant.price ) {
          var a11yComparePrice = Shopify.formatMoney(variant.compare_at_price, Shopify.money_format);
          comparePriceFormat = ' <span class="visually-hidden">' + a11yComparePrice + '</span>';
          $comparePrice.html(comparePriceFormat);
          $comparePrice.show();
        } else {
          $comparePrice.hide();
        }
        {% endif %} } 
    };

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


    }); 

我应该在这里更改什么才能让我的变体选择器工作？