在 shopify product-loop.liquid 中迭代产品

Question

我在 Shopify 中借助 snippet product-loop.liquid 显示产品集合时遇到问题。代码基本如下。

{% capture collection_handle %}{{ product-loop | handleize }}{% endcapture %}
{% capture url %}{% if collection_handle != "" %}/collections/{{ product-loop }}{{ product.url }}{% else %}{{ product.url }}{% endif %}{% endcapture %}
<div class="product span3 {% if template == 'collection' %}adaptive-grid{% endif %}">



</div>

{% unless template contains 'collection' %}
{% cycle 'clear-product-loop': '', '', '', '<div style="clear:both;"></div>' %}
{% endunless %}

结果是一行是 2 项或 3 项或 4 项（取决于屏幕分辨率），下一行始终是 1 项并且此模式一直在重复。怎么了？

编辑：一些相关的 CSS

.row { margin: 0 0 30px 0; }
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { display: block; float: left; margin: 0 15px; }
.inner-left { margin-left: 0px !important; }
.inner-right { margin-right: 0px !important; }  


.span1 { width: 53px; }
.span2 { width: 136px; }
.span3 { width: 219px; }
.span4 { width: 302px; }

.span3.adaptive-grid {width: 219px;}
.span3.adaptive-grid:nth-child(6n+7) {clear: none;}
.span3.adaptive-grid:nth-child(4n+5) {clear: both;}

Answer 1

最后我通过删除像

这样的行解决了我的问题

.span3.adaptive-grid:nth-child(6n+7) {clear: none;}
.span3.adaptive-grid:nth-child(4n+5) {clear: both;}

来自 Shopify 样式文件（最小主题）。现在产品网格可以在不同的分辨率下正常显示而不会断开线条。

在 shopify product-loop.liquid 中迭代产品

Iterating products in shopify product-loop.liquid

shopify

liquid

product