每 3 和 2 次迭代添加一个 div 行

问题描述

我阻止了 PHP / Smarty 逻辑。

我希望从一系列产品中做到这一点:

 <div class="products" itemscope="" itemtype="http://schema.org/ItemList">
    <div class="row">
        <article></article>
        <article></article>
        <article></article>
    </div>
    <div class="row">
        <article></article>
        <article></article>
    </div>
    <div class="row">
        <article></article>
        <article></article>
        <article></article>
    </div>
    <div class="row">
        <article></article>
        <article></article>
    </div>
    ....
</div>

我想有可能创建一行 3 行然后一行 2 行等......

这就是我的聪明人的样子:

    <div class="products{if !empty($cssClass)} {$cssClass}{/if}" itemscope itemtype="http://schema.org/ItemList">
    {foreach name="products" from=$products item="product" key="position"}
        {include file="catalog/_partials/miniatures/product.tpl" product=$product position=$position}
    {/foreach}
</div>

你知道我该怎么做吗?

感谢您的帮助。

解决方法

您可能希望在 foreach 循环中控制行打开/关闭和列计数。您不希望在专用于显示单个项目的模板中使用这种逻辑。

为此,我们需要一个变量来确定要显示的列数 - 我们将每行从 2 切换到 3。我们还需要一个计数器,我们可以在每行的末尾重置它,以跟踪当前行中渲染了多少列。最后,无论列数如何,我们都需要确保在到达 products 数组末尾时关闭当前行。

<div class="products{if !empty($cssClass)} {$cssClass}{/if}" itemscope itemtype="http://schema.org/ItemList">
    {* Assign a column limit *}
    {assign var=colLimit value=3}
    {* Create a counter for our columns *}
    {counter start=0 name=colCounter assign=colCount print=false}
    {foreach name="products" from=$products item="product" key="position"}
        {* Open a row when the column count is zero *}
        {if $colCount==0}
            <div class="row">
        {/if}
            {* Increment the counter *}
            {counter name=colCounter}
            {*
                Include the product template.
                We can either pass the column count or $product@index/$product@iteration to the position arg,or this may not be needed after implementing column logic in the loop
            *}
            {include file="catalog/_partials/miniatures/product.tpl" product=$product position=$colCount}
        {* If this is the last column to display in the row or the last product in the array,close the row *}
        {if $colCount==$colLimit || $product@last}
            </div>
            {* Toggle the column limit *}
            {if $colLimit==3}
                {assign var=colLimit value=2}
            {else}
                {assign var=colLimit value=3}
            {/if}
            {* Reset the counter *}
            {counter start=0 name=colCounter assign=colCount print=false}
        {/if}
    {/foreach}
</div>