商品詳細サブ画像を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=”&lt;!–{$smarty.const.IMAGE_SAVE_URLPATH}–&gt;&lt;!–{$arrProduct[$lkey]|h}–&gt;” target=”_blank”>
<!–{/if}–>
<img src=”&lt;!–{$arrFile[$key].filepath}–&gt;” alt=”&lt;!–{$arrProduct.name|h}–&gt;” width=”&lt;!–{$arrFile[$key].width}–&gt;” height=”&lt;!–{$arrFile[$key].height}–&gt;” /></a><!–{if $arrProduct[$lkey]|strlen >= 1}–>
<span class=”mini”>

<a class=”expansion” href=”&lt;!–{$smarty.const.IMAGE_SAVE_URLPATH}–&gt;&lt;!–{$arrProduct[$lkey]|h}–&gt;” 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;
}

—————————————-

単純にコピペすれば大丈夫なはず。