仅在 shopify 上显示可用选项

Question

在Snippets/product-form.liquid中有一段代码：

<div class="swatch_options">
  {% for option in product.options %}
    {% include 'product-swatch' with option %}
  {% endfor %}
</div>

这是在不可用样本上显示带有 X 的产品的选项：

<div data-value="option name" class="swatch-element color optionName-swatch available soldout">
  <div class="tooltip">Option Name</div>
  <label for="optionName">
    <span class="crossed-out"></span>
  </label>
</div>

单击那些不兼容的变体时，会显示一条大 "UNAVAILABLE" 消息：

<p class="modal_price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
  <meta itemprop="priceCurrency" content="USD">
  <meta itemprop="seller" content="site">
  <link itemprop="availability" href="http://schema.org/InStock"> 
  <meta itemprop="itemCondition" content="New">
  <span class="sold_out">Unavailable</span>
  <span itemprop="price" content="10.00" class="">
    <span class="current_price "></span>
  </span>
  <span class="was_price"></span>
  <span class="sale savings"></span>
</p>

我已经尝试在 {% include 'product-swatch' with option %} 之前检查 variant.available、product.variants.first.available 和 variant.inventory_quantity > 0，但没有成功。

如何隐藏不兼容的变体？

编辑：这是 product-swatch.liquid 中当前的内容：

{% comment %}
  Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}

{% assign file_extension = 'png' %}

{% assign swatch = product-swatch %}
{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}

{% for option in product.options %}
  {% if option == swatch %}
    {% assign found_option = true %}
    {% assign option_index = forloop.index0 %}
    {% assign downcased_option = swatch | downcase %}
    {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
      {% assign is_color = true %}
    {% endif %}
  {% endif %}
{% endfor %}

<div class="swatch clearfix" data-option-index="{{ option_index }}">
  <div class="option_title">{{ swatch }}</div>
  {% assign values = '' %}
  {% for variant in product.variants %}
    {% if variant.available %}
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
      {% assign values = values | join: ',' %}
      {% assign values = values | append: ',' | append: value %}
      {% assign values = values | split: ',' %}
      <input id="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} />
      <div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }}-swatch {% if variant.available %}available{% else %}soldout{% endif %}">
        {% if is_color %}
          <div class="tooltip">{{ value }}</div>
        {% endif %}
        {% if is_color %}
          <label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" style="background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' }}); background-color: {{ value | split: ' ' | last | handle }};">
            <span class="crossed-out"></span>
          </label>
        {% else %}
          <label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}">
            {{ value }}
            <span class="crossed-out"></span>
          </label>
        {% endif %}
      </div>
    {% endunless %}
    {% endif %}
  {% endfor %}
</div>

Answer 1

编辑您的产品-swatch.liquid 文件夹下的 "snippets" 文件。

找到 {% for variant in product.variants %} 并在其后放置 {% if variant.available %}。

找到 {% endfor %} 并把 {% endif %} 放在它前面。

如果它不起作用，请与我们分享产品代码-swatch.liquid。

Answer 2

您似乎在寻找 Linked Options 功能。

看看这个文档： https://help.shopify.com/themes/customization/navigation/link-product-options-in-menus

代码托管于 GitHub： https://gist.github.com/carolineschnapp/1083007

它也经过调整以适用于色板（我想您正在使用 default implementation）。

仅在 shopify 上显示可用选项

Only displaying available options on shopify

shopify