Question

如何在每第3个产品之后将产品包装在新的<div class="row"></div>中？我已经看过使用cycle迭代标记，但无法弄清楚如何在我的代码中正确实现。

        {% for product in collection.products %}
            <!-- product -->
            <div class="col-xs-6 col-md-4 product">
                <a href="{{product.url}}" class="product-link"></a>
                <!-- / product-link -->
                <img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="">
                <!-- / product-image -->

                <!-- product-details -->
                <div class="product-details">
                    <h3 class="product-title">{{product.title}}</h3>
                    <h6 class="product-price"> {{ product.price | money }}</h6>
                </div><!-- / product-details -->
            </div><!-- / product -->
          {% endfor %}

Answer 1

您可以使用对forloop.index应用的模数计算，然后根据模数结果应用if语句。

{% assign modulo = forloop.index | modulo : 3 %}
{% if modulo == 0 %}
<div class=«row»>
{% endif %}

https://help.shopify.com/themes/liquid/filters/math-filters#modulo

Answer 2

解决了问题，如果有更好的方法/建议，我很乐意听到它们：）

{% for product in collection.products %}
    {% cycle '<div class="row">','','' %}
            <!-- product -->
            <div class="col-xs-6 col-md-4 product">
                <a href="{{product.url}}" class="product-link"></a>
                <!-- / product-link -->
                <img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="">
                <!-- / product-image -->

                <!-- product-details -->
                <div class="product-details">
                    <h3 class="product-title">{{product.title}}</h3>
                    <h6 class="product-price"> {{ product.price | money }}</h6>
                </div><!-- / product-details -->
            </div><!-- / product -->
     {% cycle '','','</div>' %} 
{% endfor %}

如何在每3个液体产品后创建一个新的div行？

2 个答案: