如何解决每 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。