商品一覧ページで横並びにする(2.13)
list.tpl内のdiv.list_areaが商品ひとつの塊となっている。
そのため、contents.css内にあるdiv.list_areaに対して、float: leftとwidthを設定すれば、商品一覧ページで商品を横並びで表示させることができる。
ただ、これだけだと各list_areaの高さがまちまちのため、並び方がガタガタになる場合もある。
希望としては
<div class="list_are_wrap clearfix"> <div class="list_area"></div> <div class="list_area"></div> <div class="list_area"></div> </div> <div class="list_are_wrap clearfix"> <div class="list_area"></div> <div class="list_area"></div> <div class="list_area"></div> </div>
みたいにしたい。(3つ並べる場合)
最終的にはこうなった。
list.tpl
: <!--{assign var=id value=$arrProduct.product_id}--> <!--{assign var=arrErr value=$arrProduct.arrErr}--> <!--▼商品--> <!--{if $smarty.foreach.arrProducts.iteration === 1 || $smarty.foreach.arrProducts.iteration % 3 === 1}--> <div class="list_area_wrap clearfix"> <!--{/if}--> <form name="product_form<!--{$id|h}-->" action="?"> : </form> <!--▲商品--> <!--{if $smarty.foreach.arrProducts.last || $smarty.foreach.arrProducts.iteration % 3 === 0}--> </div><!-- END .list_area_wrap--> <!--{/if}--> :
content.css
div.list_area { float: left; width: 33%; }
以下解説メモ。
▼商品以下のif文は、list_areaを3個ずつ内包するlist_area_wrapを作成するもの。
foreachでぶん回す商品データのループ1回目あるいは3で割ったときに余りが1の時に挿入する。
つまり、1つめ、4つめ、7つめ…のlist_area記述前に入るもの。
▲商品以下のif文は、上記list_area_wrapを閉じるタグ。
ループ回数を3で割った時に余りが0の時、あるいは最終ループの時に閉じるタグを挿入する。