Labo

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

2012年04月29日 / 投稿者名:fukap


商品登録情報の中には、サブ情報1~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だけ表示する場合です。

  <!--▼サブコメント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の場合は、

    <!--▼サブコメント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-->

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

[EC-CUBE 2.11.5] 商品詳細のサブ情報を自由に配置する への2件のコメント

  1. junsky より:

    お世話になります。質問させて頂きたいことがございます。

    この機能はブロックでコメントだけを表示するということなのでしょうか。

    私は例えば、現在使用しています新着商品ブロックでその画像、値段の下にコメントが表示できるようにしたいのですが、その場合上記2つ目のプログラムをそのまま新着商品ブロックに貼り付けましたが、表示されません。(ただ単に上記プログラム記述を貼り付けるだけでよろしいですよね?)

    どの様な使用の仕方をすればよろしいのでしょうか。取り留めのない質問で恐縮ですが宜しくお願いします。

  2. fukap より:

    “この機能はブロックでコメントだけを表示する”ものではありません。

    商品登録画面のサブ情報1やサブ情報2に、テキストや画像が登録できますが、
    実際にこれらの情報を商品詳細ページで表示させようとすると、不便なケースがあります。
    サブ情報1とサブ情報2を商品詳細ページの別々の場所に配置したい場合などですね。

    そういうときに、それらを別々の場所に配置することも可能ですよ、というのが本記事の趣旨です。
    よろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

* Copy This Password *

* Type Or Paste Password Here *

*

コメント欄にコードを挿入したい場合は、[php][/php] を使ってください。