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

Question

这看起来很简单，但经过几个小时的研究和摸索后我仍然无法弄清楚。我的目标是在 Shopify 集合网格中插入一个非产品 HTML block ，例如此处第 1 行第 3 列中的“Enjoy Free Ground Shipping” block :

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

我的产品系列网格设置为每页 3 列 x 4 行，我希望替换包含 3 个或更多产品的所有产品系列页面第 2 行第 1 列处的 block 。

我需要修改的液体循环是:

    <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

欢迎来到堆栈溢出! :-)

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

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 来检查以零为基数的循环索引。 ;-)

请告诉我这是否对您有用。祝你好运!