当超过一定数量的选项时，Shopify 产品显示文本和带有逗号的库存变体字符串

Question

当产品上有多个选项且选项前有“准备发货”文本的 20 多个选项时，我希望将库存变体显示为以逗号分隔的链接。

{%- for option in product.options_with_values -%}
{%- if option.values.size > 20 -%}

{% for variant in product.variants %}
<div style="color:gray; font-size:12px;">
{% if variant.inventory_quantity > 0 %}
Ready to ship: 
{% endif %}
</div>
{% endfor %}

{% for variant in product.variants %}
{% if variant.inventory_quantity > 0 %}
<a href="{{ variant.url }}" alt="View available variant {{ variant.title }}"> {{ variant.title }}</a>
{% endif %}
{% endfor %}

{%- endif -%}
{%- endfor -%}

谢谢！！

目前，当产品有多个有库存的变体时，我遇到了问题。例如，如果产品有两个变体，“准备发货”将显示两次，并且变体之间不会显示逗号。我已经尝试过 forloop 编辑，但我认为由于它过滤所有选项的性质，然后过滤超过 20 个选项，它不起作用。

Answer 1

尝试以下操作；我保留此代码用于需要创建一些验证的情况

我知道您想要实现的是仅打印满足按选项分组的特定条件的变体。

CSS 片段将允许您避免依赖额外的 HTML 代码在每个选项之前放置信息文本。

CSS

  .variant-option-item {
    margin-right: 5px;
    position: relative;
  }
  .variant-option-item:first-of-type::before {
    content: "Ready to ship: ";
    display: flex;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    bottom: 30px;
    font-size: 12px;
    width: fit-content;
    width: 100px;
    color: black;
  }

  .variant-option-item::after {
    content: ",";
  }
  .variant-option-item:last-child::after {
    content: "";
  }

将部分委托给 CSS 的代码版本。

{%- for option in product.options_with_values -%}
  {%- if option.values.size > 1 -%}   
    {% for variant in product.variants %}
      {% if variant.inventory_quantity > 0 %}
      <a class="variant-option-item" href="{{ variant.url }}" alt="View available variant {{ variant.title }}"> {{ variant.title }}</a>
      {% endif %}
    {% endfor %}
    {%- endif -%}
{%- endfor -%}

我有一个片段，用于与您在尊重用户体验的同时尝试解决的案例类似的情况。

{%- for option in product.options_with_values -%}
  {%- if option.values.size > 1 -%}
    <div style="color:gray; font-size:16px; display:flex;">
      <div class="variants-container" id="variant-{{ option.name | handle }}">
        {% for item in option.values %}
         {% if item.variant.inventory_quantity > 1 %}
            <a class="variant-option-item" href="{{ item.variant.url }}">{{ item.name }}</a>
         {% endif %}
        {% endfor %}
      </div>
    </div>  
  {%- endif -%}
{%- endfor -%}

重要：

您有更多选择，例如在 JavaScript 中存储变量以及创建更高级的逻辑。例如::

<script>
  let product_variants = {{ product.variants | json }};
  // Use JavaScript for your logic on variants and options...
</script>