Shopify Liquid 如何隐藏缺货产品，直到点击集合页面上的元素？

Question

如何制作一个元素来隐藏库存商品下方的“缺货商品”，如果有人点击该按钮，它会打开它们？

我添加了一张照片，例如：

Answer 1

您需要遍历集合中可用和缺货的产品。 这是示例液体代码：

<div id="div1">
// Display all in stock products 
{% for product in collection.products %}
        {% if product.available %}
          {% include 'product-grid-item' %}          
        {% endif %}
{% endfor %}
</div>
<div id="div2">
// Display all out of stock products
{% for product in collection.products %}
        {% unless product.available %}
            {% include 'product-grid-item' %}
        {% endunless %}
{% endfor %}
</div>

您可以使用简单的js在点击按钮时为div2赋予展开折叠效果。

注意：您可以通过使用单次迭代并将两个 div 存储在两个变量中来进一步优化此代码。