Javascript 售罄时Shopify隐藏变体

我正在开发一个基于Shopify平台的鞋店网站。我们想隐藏缺货的鞋码变体。在做了一些挖掘之后，我发现了一个Shopify教程，它告诉我输入一个新的“片段”，然后编辑theme.liquid文件。所以我做了。这是一个单一的变型情况，只有鞋的尺寸不同

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

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

{%comment%} 删除已售完的变体。 仅适用于具有一个选项的产品。 它不适用于有两个或三个选项的产品，如尺寸和尺寸 颜色 见： 已经卖完了 {%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 %}

{%if product.options.size==1%}
var$addToCartForm=$（'form[action=“/cart/add”]”）；
if（window.MutationObserver&&$addToCartForm.length）{
如果（观察者类型=='object'&&typeof observer.disconnect==
‘功能’）{
observer.disconnect（）；
}
var config={childList:true，子树：true}；
var observer=新的MutationObserver（函数（）{
{product.variants%中的变量为%0}
{%除非variant.available%}
jQuery（'.single option selector option'）.filter（function（）{
返回jQuery（this.text（）=={{variant.title | json}}；
}).remove（）；
{%end除非%}
{%endfor%}
jQuery（'.singleoptionselector'）.trigger（'change'）；
observer.disconnect（）；
});  
observer.observe（$addToCartForm[0]，config）；
}
{%endif%}

我不确定您的代码到底是什么样子的，因为提供的代码只显示了MutationObserver函数，该函数在更改时处理select

可能您在产品模板中有一个产品选择，您可以在其中生成变体。因此，您应该在

product.liquid

文件或其中包含的部分中包含类似的内容：

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

{product.variants%中的变量为%0}
{{variant.title}}
{%endfor%}

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

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

{product.variants%中的变量为%0}
{%if variant.available%}
{{variant.title}}
{%endif%}
{%endfor%}

---

因此，这样一来，您的select就不会事先包含任何不可用的变体。

我不确定您的代码到底是什么样子，因为提供的代码只显示了在更改时处理select的MutationObserver函数

可能您在产品模板中有一个产品选择，您可以在其中生成变体。因此，您应该在

product.liquid

文件或其中包含的部分中包含类似的内容：

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

{product.variants%中的变量为%0}
{{variant.title}}
{%endfor%}

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

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

{product.variants%中的变量为%0}
{%if variant.available%}
{{variant.title}}
{%endif%}
{%endfor%}

因此，通过这种方式，您的选择不会预先包含任何不可用的变体

首先，打开theme.liquid文件，在“{%include'删除已售完的“%”中添加以下代码，然后单击“保存”按钮

然后，在Snippets目录中，单击添加一个名为“remove Seld out”的新代码段

现在打开新创建的文件并从中添加代码，然后单击保存

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

谢谢

首先，打开theme.liquid文件，在“{%include'删除已售完的“%”中添加以下代码，然后单击“保存”按钮

然后，在Snippets目录中，单击添加一个名为“remove Seld out”的新代码段

现在打开新创建的文件并从中添加代码，然后单击保存

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

---

谢谢

对于一款有两个甚至三个选项的产品，我已将从库存中删除和不可用变体

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

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

{%if product.options.size>=1%}
变量产品变量可用=[
{%-用于product.variants-%}
{%-if variant.available-%}
`{{variant.title}}}`，
{%-endif-%}
{%-endfor-%}
];
var product_options_count={{product.options.size}；
{%endif%}

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

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

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

{%if product.options.size>=1%}
变量产品变量可用=[
{%-用于product.variants-%}
{%-if variant.available-%}
`{{variant.title}}}`，
{%-endif-%}
{%-endfor-%}
];
var product_options_count={{product.options.size}；
{%endif%}

我最近删除了多个选项的售罄变体。希望它也能对你有用

创建名为“链接选项”的代码段

将下面的代码粘贴到链接的选项文件上

addEventListener（'DOMContentLoaded'，函数（事件）{
var Shopify=Sho