KH-WEBLOG TOP > WEBメモ > EC-CUBE > 商品のサブ情報を個別に出力する:EC-CUBE2.11

商品のサブ情報を個別に出力する:EC-CUBE2.11

EC-CUBEの商品詳細ページで商品サブ情報を個別に出力する方法をメモ。

コーディング・WordPress化作業を代行します

detail.tplのカスタマイズ

商品詳細ページのカスタマイズは
data/Smarty/templates/default/products/detail.tpl
または、管理画面の商品詳細ページから編集できます。

EC-CUBEのデフォルトでは商品サブ情報は

<!--▼サブコメント-->
<!--{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)~(6)までを同じ場所に連続して表示するようになっていますが、

サブ情報を個別に出力させることで、
例えば
・サブ情報(1)には商品の説明文2
・サブ情報(2)~(6)には商品のサブ画像
を入力し、それぞれ表示させたい場所に表示させ、商品ページをよりよくさせることができます。

やり方は、
サブコメント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の表示内容-->

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

のようにそれぞれ2~6に数値を変えることで出力させることができます。

※サブ情報を出力させる場合、商品管理画面ではサブタイトルは入力しないとサブ情報が表示されないので、注意が必要です。

もしサブタイトルやサブ画像を表示させたくなく、サブコメントだけを表示させたい場合は、

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

              <!--★サブテキスト★-->
              <div class="subtext"><!--{$arrProduct[$ckey]|nl2br_html}--></div>

      </div>
  <!--{/if}-->
<!--▲サブコメント1-->

のようにしてあげると、サブテキストだけ表示させることができます。

コーディング・WordPress化作業を代行します

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード ソースコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事