TAGEC-CUBE
商品のサブ情報を個別に出力する：EC-CUBE2.11
シェア
ツイートEC-CUBEの商品詳細ページで商品サブ情報を個別に出力する方法をメモ。
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-->
<!--{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-->
のようにしてあげると、サブテキストだけ表示させることができます。
