商品詳細サブ画像を3列表示
元々、EC CUBEの商品詳細ページは、サブ画像とかサブコメントは縦に一列に並ぶことになる。
ちょっと野暮ったいので、3列になるようにしてみた。
こんな感じ。
phpファイルのカスタマイズ方法
products/detail.phpの部分。管理画面のデザイン管理から行くと、「商品詳細ページ」のページ詳細編集から。
「詳細」と「お客様の声」の間の部分。
—————————————————————
<!–▼サブコメントここから–>
<!–{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}–>
<!–{assign var=key value=”sub_title`$smarty.section.cnt.index+1`”}–>
<div class=”productsubarea”><!–{if $arrProduct[$key] != “”}–>
<h3><!–★サブタイトル★–><!–{$arrProduct[$key]|h}–></h3>
<!–{/if}–>
<!–{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`”}–><!–{if $arrProduct[$key]|strlen >= 1}–>
<!–{if $arrProduct[$ckey] != “”}–>
<div class=”productsubtext”><!–★サブテキスト★–><!–{$arrProduct[$ckey]|nl2br_html}–></div>
<!–{/if}–>
<div class=”productsubphotoimg”><!–{if $arrProduct[$lkey]|strlen >= 1}–>
<a class=”expansion” href=”<!–{$smarty.const.IMAGE_SAVE_URLPATH}–><!–{$arrProduct[$lkey]|h}–>” target=”_blank”>
<!–{/if}–>
<img src=”<!–{$arrFile[$key].filepath}–>” alt=”<!–{$arrProduct.name|h}–>” width=”<!–{$arrFile[$key].width}–>” height=”<!–{$arrFile[$key].height}–>” /></a><!–{if $arrProduct[$lkey]|strlen >= 1}–>
<span class=”mini”><a class=”expansion” href=”<!–{$smarty.const.IMAGE_SAVE_URLPATH}–><!–{$arrProduct[$lkey]|h}–>” target=”_blank”>
画像を拡大する</a>
</span>
<!–{/if}–></div>
<!–{else}–>
<p class=”subtext”><!–★サブテキスト★–><!–{$arrProduct[$ckey]|nl2br_html}–></p>
<!–{/if}–>
<!–▲サブ画像–></div>
<!–{ if $smarty.section.cnt.iteration is div by 3 }–>
<br clear=”all” />
<!–{/if}–><!–{/section}–>
<!–▲サブコメント–>
—————————————————————
簡単に言うと、詳細画面の画像を横に並べ、カウントが3になったら改行を入れるという処理をする。
CSSに以下の分を追加。お好みで適当に調節して。
—————————————–
div.productsubarea {
width:30%;
float:left;
height:290px;
margin-right:3%;
}div.productsubphotoimg {
}
div.productsubtext {
height:3em;
}
—————————————-
単純にコピペすれば大丈夫なはず。