Question

这看起来很简单，但经过几个小时的研究和敲打，我仍然无法弄明白。我的目标是在Shopify集合网格中插入非产品HTML块，例如第1行第3行中的“Enjoy Free Ground Shipping”块：

http://www.katespade.com/designer-handbags/handbags,default,sc.html

我的收藏网格设置为3列，每页4行，我希望将所有收藏页面的第2行第1列替换为3个或更多产品。

我需要修改的Liquid循环是：

    <ul class="product-grid clearfix">
    {% for product in collection.products %}
      <li{% cycle '', '', ' class="last-in-row"' %}>
        {% include 'product-grid-item' %}
      </li>
    {% endfor %}
    </ul>

有没有人有任何见解？

Answer 1

欢迎使用Stack Overflow！： - ）

首先，让我对此进行伪码以确保我们在同一页面上，并且我的逻辑正确。

for each product in collection
{
    is this the 4th iteration of the loop?
    (in other words, is it the first item in the second row)
    {
        Add an <li> for the custom non-product block.
    }

    Add an <li> for the standard product block
}

如果这个逻辑适合你想要的东西，那么这就是Liquid的真实内容。

<ul class="product-grid clearfix">

{% for product in collection.products %}

    {% if forloop.index == 4 %}
        <li{% cycle '', '', ' class="last-in-row"' %}>
            {% include 'your-custom-block-element' %}
        </li>
    {% endif %}

    <li{% cycle '', '', ' class="last-in-row"' %}>
        {% include 'product-grid-item' %}
    </li>

{% endfor %}

</ul>

您可能已经注意到Shopify默认处理基于1的索引。这就是我们寻找forloop.index == 4的原因。在几乎所有其他语言中，我们将处理从零开始的索引并检查是否forloop.index == 3。

如果这个约定让你烦恼，你总是可以使用forloop.index0检查循环索引，而不是基数为零。 ; - ）

请告诉我这是否适合您。祝你好运！

有条件地在Shopify集合网格中嵌入非产品元素

1 个答案: