Question

我在一家基于Shopify平台的鞋店网站上工作。我们希望隐藏缺货的鞋码变体。在做了一些挖掘后，我找到了一个Shopify教程，告诉我输入一个新的＆＃34;片段＆＃34;然后编辑theme.liquid文件。所以我做了。这是一个单一的变型案例，只有鞋码不同。

但是，当客户首次进入产品页面并单击鞋子尺寸的下拉菜单时，所有鞋子尺寸都会显示出来。除非客户点击不可用的尺寸，然后再次点击下拉菜单，否则菜单仍会显示所有尺寸。

我想调整代码，以便从一开始就消除不可用的鞋码。以下是代码段：

{％comment％} 删除售罄的变种。仅适用于具有一个选项的产品。它不适用于有两个或三个选项的产品，如尺寸和尺寸颜色。请参阅：https://docs.myshopify.io/themes/customization/products/hide-variants- 即，在-售罄 {％endcomment％}

{% if product.options.size == 1 %}
  <script>
  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() { 
      {% for variant in product.variants %}
        {% unless variant.available %}
          jQuery('.single-option-selector option').filter(function() { 
          return jQuery(this).text() === {{ variant.title | json }}; 
          }).remove();
        {% endunless %}
      {% endfor %}
      jQuery('.single-option-selector').trigger('change');
      observer.disconnect();
    });  
    observer.observe($addToCartForm[0], config);
  }
  </script>
{% endif %}

Answer 1

我最近删除了多个选项的售罄变体。希望它也适用于您。

创建名为“linked-options”的代码片段。
将以下代码粘贴到您的链接选项文件中。

<script>
window.addEventListener('DOMContentLoaded', function(event) {
  var Shopify = Shopify || {};
    
  // Required functionality from depricated options_selection.js
  Shopify.arrayIncludes = function(e, t) {
    for (var n = 0; n < e.length; n++)
        if (e[n] == t) return !0;
    return !1
  }, Shopify.uniq = function(e) {
      for (var t = [], n = 0; n < e.length; n++) Shopify.arrayIncludes(t, e[n]) || t.push(e[n]);
      return t
  }

  Shopify.optionsMap = {};

  Shopify.updateOptionsInSelector = function(selectorIndex) {
      
    switch (selectorIndex) {
      case 0:
        var key = 'root';
        var selector = jQuery('.single-option-selector:eq(0)');
        break;
      case 1:
        var key = jQuery('.single-option-selector:eq(0)').val();
        var selector = jQuery('.single-option-selector:eq(1)');
        break;
      case 2:
        var key = jQuery('.single-option-selector:eq(0)').val();  
        key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
        var selector = jQuery('.single-option-selector:eq(2)');
    }
    
    var initialValue = selector.val();
    selector.empty();    
    var availableOptions = Shopify.optionsMap[key];
    for (var i=0; i<availableOptions.length; i++) {
      var option = availableOptions[i];
      var newOption = jQuery('<option></option>').val(option).html(option);
      selector.append(newOption);
    }
    jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
      if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
        $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
      }
      else {
        $(this).addClass('soldout').hide().find(':radio').removeAttr('checked').attr('disabled','disabled');
      }
    });
    if (jQuery.inArray(initialValue, availableOptions) !== -1) {
      selector.val(initialValue);
    }
    selector.trigger('change');
    
  };

  Shopify.linkOptionSelectors = function(product) {
    // Building our mapping object.
    for (var i=0; i<product.variants.length; i++) {
      var variant = product.variants[i];
      if (variant.available) {
        // Gathering values for the 1st drop-down.
        Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || [];
        Shopify.optionsMap['root'].push(variant.option1);
        Shopify.optionsMap['root'] = Shopify.uniq(Shopify.optionsMap['root']);
        // Gathering values for the 2nd drop-down.
        if (product.options.length > 1) {
          var key = variant.option1;
          Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
          Shopify.optionsMap[key].push(variant.option2);
          Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
        }
        // Gathering values for the 3rd drop-down.
        if (product.options.length === 3) {
          var key = variant.option1 + ' / ' + variant.option2;
          Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
          Shopify.optionsMap[key].push(variant.option3);
          Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
        }
      }
    }
    // Update options right away.
    Shopify.updateOptionsInSelector(0);
    if (product.options.length > 1) Shopify.updateOptionsInSelector(1);
    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    // When there is an update in the first dropdown.
    jQuery(".single-option-selector:eq(0)").change(function() {
      Shopify.updateOptionsInSelector(1);
      if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
      return true;
    });
    // When there is an update in the second dropdown.
    jQuery(".single-option-selector:eq(1)").change(function() {
      if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
      return true;
    });  
  };
   
  {% if product.available and product.options.size > 1 %}
    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() {      
        Shopify.linkOptionSelectors({{ product | json }});
        observer.disconnect();
      });  
      observer.observe($addToCartForm[0], config);
    }
  {% endif %}
    
  var selector = jQuery('.single-option-selector:eq(0)');
  selector.trigger('change'); 

  {% if product.options.size == 1 %}
    {% for variant in product.variants %}
      {% unless variant.available %}
        jQuery('.single-option-selector option').filter(function() { return jQuery(this).text().trim() === {{ variant.title | json }}; }).remove();
      {% endunless %}
    {% endfor %}
    jQuery('.single-option-selector').trigger('change');
  {% endif %}
});
</script>

将以下代码添加到theme.liquid文件的结束正文标签之前

{% render 'linked-options' %}

您还可以访问我写的 this 文章以供参考。

Answer 2

我不确定你的代码看起来是什么样的，因为提供的代码只显示MutationObserver函数，该函数在更改时处理select。

您可能在产品模板中选择了产品，您可以在其中生成变体。因此，您应该在product.liquid文件或其中包含的部分中包含以下内容：

<select name="id" id="product-select">
    {% for variant in product.variants %}
        <option value="{{ variant.id }}">{{ variant.title }}</option>
    {% endfor %}
</select>

您必须修改该代码，以便检查变量是否可用。它必须成为这样的东西：

<select name="id" id="product-select">
    {% for variant in product.variants %}
        {% if variant.available %}
            <option value="{{ variant.id }}">{{ variant.title }}</option>
        {% endif %}
    {% endfor %}
</select>

所以这样你的选择就不会事先包含任何不可用的变种。

Answer 3

首先，打开你的theme.liquid文件，在这个“{％include'remove-sold-out'％}”中添加以下代码，然后点击“保存”按钮。
然后，在Snippets目录中，点击添加名称为“remove-sold-out”的新代码段。
现在打开新创建的文件并添加此link中的代码，然后点击“保存”。

通过这种方式，您可以删除售罄的变体。

由于

Answer 4

对于具有两个甚至三个选项的产品，我已删除缺货和不可用变体。

只需按照下面提到的步骤更新您的 Shopify 主题代码：

转到 product-template.liquid 文件并将以下代码粘贴到文件末尾。

 {% if product.options.size >= 1 %}
  <script>
    var product_variants_available = [
      {%- for variant in product.variants -%}
        {%- if variant.available -%}
          `{{ variant.title }}`,
        {%- endif -%}
      {%- endfor -%}
    ];
    var product_options_count = {{ product.options.size }};
  </script>
{% endif %}

找出 theme.js 文件并粘贴以下代码。

function sortMap(map) {
  try {
    map.forEach(function(valueList, key, map) {
      map.get(key).sort();
    });
  } catch(err){
  }
}

function updateList(option, updatedList) {
  try {
    var selectedValue = $(option).children("option:selected").val();
    var index = -1;

    // remove previous list
    $(option).find('option').remove();

    //update list with new values
    for (var i=0; i<updatedList.length; i++) {
      $(option).append($('<option>', { 
        value: updatedList[i],
        text : updatedList[i] 
      }));

      if (updatedList[i] == selectedValue) {
        index = i;
      }
    }
    //update previous selected value    
    if (index != -1) {
      $(option).val(updatedList[index]).change(); 
    } else if (updatedList[0]){
      $(option).val(updatedList[0]).change();
    }
  } catch(err){
  }
}

function updateListByMap(options, map) {
  try {
    var selectedValue1 = $(options[0]).children("option:selected").val();
    map.forEach(function(valueList, key, map) {
      if (key == selectedValue1) {
        updateList(options[1], valueList);
      }
    });
    //remove option-2 values on empty map
    if (map.size == 0) {
      $(options[1]).find('option').remove();
    }
  } catch(err){
  }
}

function updateListByMap1(options, map1) {
  try {
    var selectedValue1 = $(options[0]).children("option:selected").val();
    var selectedValue2 = $(options[1]).children("option:selected").val();
    var variant = selectedValue1+" / "+selectedValue2;
    map1.forEach(function(valueList, key, map) {
      if (key == variant) {
        updateList(options[2], valueList);
      }
    });
    //remove option-3 values on empty map
    if (map1.size == 0) {
      $(options[2]).find('option').remove();
    }
  } catch(err) {
  }
}

function removeImages(colorSelector) {
  try{
    var colorOptions = $(colorSelector).find('option');
    var imageOptions = $('.product-single__thumbnails-product-template').find('li');
    if (imageOptions.length != colorOptions.length) {
      // hide previous images
      $(imageOptions).hide();
      
      //show availabe variants images
      for (var l=0; l<colorOptions.length; l++) {
        var colorName = $(colorOptions[l]).val();
        $("#"+colorName).show();
      }
      
    }
  } catch(err){
    console.log(err);
  }
}

$( document ).ready(function() {
  if( typeof product_variants_available != "undefined" && typeof product_options_count != "undefined") {
    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() {
        try{
          var options = $('.single-option-selector');
          if (product_options_count == 1 && options[0].length != product_variants_available.length) {
            updateList(options[0], product_variants_available);
            
          } else if (product_options_count == 2 || product_options_count == 3) {
            var map = new Map();
            var map1 = new Map();
            var list = [];
            // initialize map & list with values
            for (var i=0; i<product_variants_available.length; i++) {
              var variant = product_variants_available[i].split("/");
              var key = variant[0].trim();
              var value = variant[1].trim();
              if(map.has(key)) {
                if (map.get(key).includes(value) == false) {
                  map.get(key).push(value);
                }
              } else {
                map.set(key, [value]);
                list.push(key);
              } 
            }
            //sort map values
            if (product_options_count == 3) {
              sortMap(map);
            }
            //initialize map1 if there are three options
            if (product_options_count == 3) {
              // initialize map1 with values
              for (var i=0; i<product_variants_available.length; i++) {
                var variant = product_variants_available[i].split("/");
                var key = variant[0].trim() +" / "+ variant[1].trim();
                var value = variant[2].trim();
                if(map1.has(key)) {
                  map1.get(key).push(value);
                } else {
                  map1.set(key, [value]);
                }   
              }
            }
            //update option-1
            updateList(options[0], list);
            //update option-2
            updateListByMap(options, map);
            //update option-3 based on option count
            if (product_options_count == 3) {
              updateListByMap1(options, map1);
            }
            //add event on option-1 change
            $(options[0]).change(function () {
              updateListByMap(options, map);
              if (product_options_count == 3) {
                updateListByMap1(options, map1);
              }
            });
            //add event on option-2 change
            if (product_options_count == 3) {
              $(options[1]).change(function () {
                updateListByMap1(options, map1);
              });
            }
          }
          // remove the images of not available variants
          var selectors = $('.selector-wrapper');
          var colorSelectorIndex = -1;
          for (var k=0; k<selectors.length; k++) {
            var label = $(selectors[k]).find("label").text();
            if (label.trim().toLowerCase().includes("color")) {
                colorSelectorIndex=k;
            }
          }
          if (colorSelectorIndex!=-1) {
            removeImages(options[colorSelectorIndex]);
          }
        } catch(err){
        }
        observer.disconnect();
      });
      observer.observe($addToCartForm[0], config);
      $('.single-option-selector').trigger('change');
    }
  }
});

注意：

此代码将删除不可用和售罄的变体
此代码适用于具有一个、两个甚至三个选项的产品
如果所有款式均不可用或缺货，此代码将删除图片

售完后Shopify hide variant

4 个答案: