EC-CUBEでループカウント

eccube

EC-CUBE の自分用メモです。

wordpressなどPHPを触る時に3個の記事ごとにこのコードを記述するなどif文で書く事が良くありますよね?
EC-CUBEでも同じ感じで使う事が出来ます。

<div id=”item_list”>
<div class=”row no-padding”>
{% for Product in pagination %}
<div id=”result_list_box–{{ Product.id }}” class=”col-sm-3 col-xs-6″>
<div id=”result_list__item–{{ Product.id }}” class=”product_item”>
<a href=”{{ url(‘product_detail’, {‘id’: Product.id}) }}“>
<div id=”result_list__image–{{ Product.id }}” class=”item_photo”>
<img src=”{{ app.config.image_save_urlpath }}/{{ Product.main_list_image|no_image_product }}“>
</div>
<dl id=”result_list__detail–{{ Product.id }}“>
<dt id=”result_list__name–{{ Product.id }}” class=”item_name”>{{ Product.name }}</dt>
{% if Product.description_list %}
<dd id=”result_list__description_list–{{ Product.id }}” class=”item_comment”>{{ Product.description_list|raw|nl2br }}</dd>
{% endif %}
{% if Product.hasProductClass %}
{% if Product.getPrice02Min == Product.getPrice02Max %}
<dd id=”result_list__price02_inc_tax–{{ Product.id }}” class=”item_price”>
{{ Product.getPrice02IncTaxMin|price }}
</dd>
{% else %}
<dd id=”result_list__price02_inc_tax–{{ Product.id }}” class=”item_price”>
{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}
</dd>
 {% endif %}
{% else %}
<dd id=”result_list__price02_inc_tax–{{ Product.id }}” class=”item_price”>{{ Product.getPrice02IncTaxMin|price }}</dd>
{% endif %}
</dl>
</a>
</div>
</div>
{% endfor %}
</div>

</div>

(これはデフォルトのlist.twig から抜粋してます。)

これだけの記述だとそれぞれの高さが違ったり3カラムで記事を並べる際に4個目がくると上に詰めますよね?

そういう時に3個並んで4個目にはclear:both を挟んだりしたい場合に結構やくにたちます。

{% if loop.index %2==0 %}
表示させたいコード
{% endif %}

このコードをループの一番下に記述してください。

{% endfor %}のすぐ上に追加です。

%2と記述されてる所に何番目になので2の数字を変える事で4番目、5番目と変える事が出来ます。

 

関連記事

  1. EC-CUBE 値段表記メモ

  2. EC-CUBE フレーム#2

  3. EC-CUBE3系での変数確認

  4. EC-CUBE 商品を個別にデザインを変える方法

  5. EC-cube 設定メモ

  6. EC-CUBE2からEC-CUBE3で変わった事