[EC-CUBE 2.11.5] 商品詳細のサブ情報を自由に配置する

商品登録情報の中には、サブ情報１～５まで登録できるようになっています。
サブタイトルやサブコメント、サブ画像などが登録できるのですが、これを工夫して使っておられるケースを時々見かけますね。
今回はそんな時に役立つかもしれない「商品詳細のサブ情報を自由に配置するには？」をやってみたいと思います。

サブ情報は、data/Smarty/templates/default/products/detail.tpl の以下の部分で定義されています。

    <!--▼サブコメント-->
    <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
        <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
        <!--{assign var=ikey value="sub_image`$smarty.section.cnt.index+1`"}-->
        <!--{if $arrProduct[$key] != "" or $arrProduct[$ikey]|strlen >= 1}-->
            <div class="sub_area clearfix">
                <h3><!--★サブタイトル★--><!--{$arrProduct[$key]|h}--></h3>
                <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
                <!--▼サブ画像-->
                <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
                <!--{if $arrProduct[$ikey]|strlen >= 1}-->
                    <div class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></div>
                    <div class="subphotoimg">
                        <!--{if $arrProduct[$lkey]|strlen >= 1}-->
                            <a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="expansion" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion_on.gif', 'expansion_<!--{$lkey|h}-->');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion.gif', 'expansion_<!--{$lkey|h}-->');" target="_blank" >
                        <!--{/if}-->
                        <img src="<!--{$arrFile[$ikey].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$ikey].width}-->" height="<!--{$arrFile[$ikey].height}-->" />
                        <!--{if $arrProduct[$lkey]|strlen >= 1}--></a>
                            <span class="mini">
                                <a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="expansion" target="_blank">
                                    画像を拡大する</a>
                            </span>
                        <!--{/if}-->
                    </div>
                <!--{else}-->
                    <p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>
                <!--{/if}-->
                <!--▲サブ画像-->
            </div>
        <!--{/if}-->
    <!--{/section}-->
    <!--▲サブコメント-->

これを以下のような感じで直せば、サブ情報を個別ブロックに分けることができます。
サブ情報１だけ表示する場合です。

　　<!--▼サブコメント1-->
　　<!--{assign var=key value="sub_title1"}-->
　　<!--{assign var=ikey value="sub_image1"}-->
　　<!--{assign var=lkey value="sub_large_image1"}-->
　　<!--{assign var=ckey value="sub_comment1"}-->
    <!--{if $arrProduct[$key] != "" or $arrProduct[$ikey]|strlen >= 1}-->
        <div class="sub_area clearfix">
            <h3><!--★サブタイトル★--><!--{$arrProduct[$key]|h}--></h3>
            <!--▼サブ画像-->
            <!--{if $arrProduct[$ikey]|strlen >= 1}-->
                <div class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></div>
                <div class="subphotoimg">
                    <!--{if $arrProduct[$lkey]|strlen >= 1}-->
                        <a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="expansion" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion_on.gif', 'expansion_<!--{$lkey|h}-->');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion.gif', 'expansion_<!--{$lkey|h}-->');" target="_blank" >
                    <!--{/if}-->
                    <img src="<!--{$arrFile[$ikey].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$ikey].width}-->" height="<!--{$arrFile[$ikey].height}-->" />
                    <!--{if $arrProduct[$lkey]|strlen >= 1}--></a>
                        <span class="mini">
                            <a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="expansion" target="_blank">
                                画像を拡大する</a>
                        </span>
                    <!--{/if}-->
                </div>
            <!--{else}-->
                <p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>
            <!--{/if}-->
            <!--▲サブ画像-->
        </div>
    <!--{/if}-->
    <!--▲サブコメント1-->

最初の方に変数の定義は固めておきましたので、サブ情報２の場合は、

    <!--▼サブコメント2-->
    <!--{assign var=key value="sub_title2"}-->
    <!--{assign var=ikey value="sub_image2"}-->
    <!--{assign var=lkey value="sub_large_image2"}-->
    <!--{assign var=ckey value="sub_comment2"}-->
   
    ・・・・・・

    <!--▲サブコメント2-->

という感じで表示されます。