Question

我最近添加了本教程中找到的代码的修改版本：

https://help.shopify.com/en/themes/customization/products/variants/hide-variants-that-are-sold-out

我将其修改为仅显示清仓收藏中具有价格比较（销售价格）的变体。有时，我们有一件商品只出售某些变体，而我们只想在查看清仓收集时显示产品的那些变体。我几乎可以正常工作了。唯一的问题是，当从清关区域（/ collections / clearance / itemonsale）查看项目，然后将其添加到购物车时，第一个变体将添加到购物车，而不是在下拉框中选择的一个。这仅在第一次将商品添加到购物车时发生。如果有人要返回该产品并再次添加，它将可以正常工作。通过类别集合（/ collections / category / itemonsale）或直接（/ products / itemonsale）访问产品时，一切正常，因此似乎该脚本至少应该触发。我需要在此处进行任何更改以使这项工作的任何想法，将不胜感激。示例：https://evans-daily-grindb.myshopify.com/collections/clearance

在product.liquid中（可能不需要第二个collection.handle = .....）：

{% if collection.handle == 'clearance' and product.options.size == 1 %}
  <script>
    var product_variants_removed = [
      {%- for variant in product.variants -%}
        {%- unless collection.handle == 'clearance' and variant.compare_at_price > 1 -%}
          '{{ variant.title }}',
        {%- endunless -%}
      {%- endfor -%}
    ];
  </script>
{% endif %}

在theme.js中：

$(theme.init);
$( document ).ready(function() {
  if( typeof product_variants_removed != undefined ) {  // was there items to be removed?
    var $addToCartForm = $('form[action="/cart/add"]');
    if (window.MutationObserver && $addToCartForm.length) {
      if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
        observer.disconnect();
      }
      var config = { childList: true, subtree: true };
      var observer = new MutationObserver(function() {
        product_variants_removed.forEach(function(item){
          $('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
        });
        observer.disconnect();
      });  
      observer.observe($addToCartForm[0], config);
      $('.single-option-selector').trigger('change');
    }
  }
});

Shopify：修改后购物车中的变体不正确

0 个答案: