Shopify液体如何隐藏缺货产品，直到单击收集页面上的元素？

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优化此代码