every 3 and 2 iterations add a div row

Question

I am blocking on PHP / Smarty logic.

I am looking to do from an array of products this:

 <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>

I would like to have the possibility of creating a row of 3 lines then a row of 2 lines etc ...

This is what my smarty looks like:

    <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>

Do you have any idea how I could do this please?

Thanks for your help.

Answer 1

You probably want to control the row opening/closing and column counting in the foreach loop. You don't want that kind of logic in a template dedicated to displaying a single item.

To do this, we need a variable to determine how many columns to display - we'll toggle this from 2 to 3 for each row. We will also need a counter that we can reset at the end of each row to keep track of how many columns have been rendered within the current row. Lastly, we need to make sure we close the current row when we reach the end of the products array regardless of the column count.

<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>