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 в двух переменных.