[ec-cube] 商品詳細のサブ情報を1〜5番目それぞれでデザインを変える。

参考迄に商品詳細の
『詳細-サブコメント(4)』
『詳細-サブコメント(5)』
の項目を使ってレイアウトを変えてみる。

対象ファイル

/data/Smarty/templates/default/products/detail.php

サンプルソース

何番目のサブ情報かを知る手立てとして $smarty.section.cnt.index+1 を使っています。
以下、殴り書きのメモでごめんなさい。

	  <!--▼サブコメント-->
    <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->

        <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->

            <div class="sub_area clearfix">
                <!--▼サブ画像-->
                <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
                <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
                <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
                <!--{assign var=tkey value="sub_title`$smarty.section.cnt.index+1`"}-->
                
                <!--{if $arrProduct&#91;$key&#93;|strlen >= 1}-->
                    <div class="subtext">
                        <!--サブタイトル-->
                        <h5><!--{$arrProduct&#91;$tkey&#93;|h}--></h5>
                        <!-- サブテキスト -->
                        <!--{$arrProduct&#91;$ckey&#93;|nl2br_html}-->
                    </div>
                    <div class="subphotoimg">
                        <img src="/resize_image.php?image=<!--{$arrProduct&#91;$lkey&#93;|h}-->&amp;width=140&amp;height=1200" /><br />
                    </div>
                <!--{else}-->
			<!--{if $arrProduct&#91;$ckey&#93; != ""}-->
				<!--{if $smarty.section.cnt.index+1 == "4"}-->
					<h5 class="title_detail">4番目のタイトル</h5>
					<p>
					<!-- 4番目のサブテキスト -->
					<!--{$arrProduct&#91;$ckey&#93;|nl2br_html}-->
					</p>
				<!--{/if}-->
				<!--{if $smarty.section.cnt.index+1 == "5"}-->
					<h5 class="title_detail">5番目のタイトル</h5>
					<p>
					<!-- 5番目のサブテキスト -->
					<!--{$arrProduct&#91;$ckey&#93;|nl2br_html}-->
					</p>
				<!--{/if}-->
			<!--{/if}-->
                <!--{/if}-->
                <!--▲サブ画像-->
            </div>

    <!--{/section}-->
    <!--▲サブコメント-->

Similar posts