質問 > フロント機能 > この商品をチェックした人はこんな商品をチェックしてますの列数を2列から3列にする方法 |
フロント機能
フラット表示 | 前のトピック | 次のトピック |
投稿者 | スレッド |
---|---|
tonton |
投稿日時: 2009/3/27 22:14
対応状況: −−−
|
仙人 登録日: 2008/8/14 居住地: 投稿: 437 |
Re: この商品をチェックした人はこんな商品をチェックしてますの列数を2列から3列にする方法 記載されたソースから、
3個ずつ一覧にして、3個目の後とリストの最後は、フロートをclearするように変更しました。 これで、CSSを少し変えてもらえばいけるのではないかと思います。 <!-- ▽ check item --> <!--{if $arrRecommend}--> <h2 class="mt15"><img src="<!--{$TPL_DIR}-->img/hl/tm_checkitem.gif" width="480" height="35" alt="この商品をチェックした人はこんな商品をチェックしています" /></h2> <div class="mBox2" id="checkBox"> <!--{section name=cnt loop=$arrRecommend step=1 max=3}--> <!--{if $arrRecommend[cnt].product_id}--> <!-- 共通 --> <div class="checkBoxL">//CSSを統一するならここのクラス名を変更したほうがいいかも。 <!--{if $arrRecommend[cnt].main_list_image != ""}--> <!--{assign var=image_path value="`$arrRecommend[cnt].main_list_image`"}--> <!--{else}--> <!--{assign var=image_path value="`$smarty.const.NO_IMAGE_DIR`"}--> <!--{/if}--> <p><a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrRecommend[cnt].product_id}-->"><img src="<!--{$smarty.const.SITE_URL}-->resize_image.php?image=<!--{$image_path|sfRmDupSlash}-->&width=130&height=130" alt="<!--{$arrRecommend[cnt].name|escape}-->" /></a></p> <!--{assign var=price02_min value=`$arrRecommend[cnt].price02_min`}--> <!--{assign var=price02_max value=`$arrRecommend[cnt].price02_max`}--> <h3 class="checkName"><a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrRecommend[cnt].product_id}-->"><!--{$arrRecommend[cnt].name|escape}--></a></h3> <p class="checkPrice"> <!--{if $price02_min == $price02_max}--> <!--{$price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}--> <!--{else}--> <!--{$price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}--> <!--{/if}-->円</p> <!--{if $arrRecommend[cnt].comment != null || $arrRecommend[cnt].comment != ""}--> <p class="checkExp"><!--{$arrRecommend[cnt].comment|escape|nl2br}--></p> <!--{/if}--> </div> <!-- 共通 --> <!--{/if}--> <!--{if $smarty.section.cnt.iteration % 3 == 0 or $smarty.section.cnt.last}--> <br class="clear" /> </div> <!--{/if}--> <!--{/section}--> <!--{/if}--> <!-- ▲ check item end --> <!--{section name=cnt loop=$arrRecommend step=1 max=3}--> のmax=3は、最大3個ですので、6個、7個と表示させて、3個ずつ改行する、というだけであれば、要りません。 <!--{if $smarty.section.cnt.iteration % 3 == 0 or $smarty.section.cnt.last}--> この間に、3個で改行する際の処理が入ります。%3を%4に変えれば、4個になります。 <!--{/if}--> ロジック上は、CSSでフロートをしていただいて、ずらっと1行に並べ、3の倍数の後だけ、改行処理を入れる、という形になります。 変更前のソースの場合は、値を読み出す時点で、1個飛ばしに呼び込んでいましたが、数が増えると面倒なので、同じレイアウトで3個分繰り返すなら、このソースの方が使いやすいです。 (ただし、1個おきに背景の色やデザインを変える、という場合は、先のやり方で2個飛ばしのソースにする必要がありますので、別のやり方を使うことになります。) テストはしていませんので、変な動作をするようだったら、言ってください。 ではでは。 |
フラット表示 | 前のトピック | 次のトピック |