Question

几个星期以来，我一直在尝试在shopify页面的按钮中实现产品变体，并且布局和样式本身可以完美地运行。但是，当我同时选择大小和颜色时，我的代码似乎没有触发任何更新或进行任何更改。当我选择两个不同的项目并将我的产品添加到购物车时，它仅显示默认值。

我知道我的jQuery选择了正确的值，但是由于某种原因它无法正确存储它。这是我的theme.liquid代码：

<body>
  <script>
    var selectCallback = function(variant, selector){
      if (variant) {
        console.log('er 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;
          }
        }
      }
    }
  </script>
  {{ content_for_layout }}
  {%section 'footer'%}

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  {{ 'theme.js' | asset_url | script_tag }}
  <script>
      jQuery(function() {
        jQuery('.swatch :radio').change(function() {
          var optionIndex = jQuery(this).closest('.swatch').attr('data-option-index');
          var optionValue = jQuery(this).val();
          jQuery(this)
            .closest('form')
            .find('.single-option-selector')
            .eq(optionIndex)
            .val(optionValue)
            .trigger('change');
        });
      });
  </script>
</body>

这里似乎是什么问题？有人可以帮我吗？

Shopify产品变体不会更新到购物车

0 个答案: