EC-CUBEでは、商品ひとつひとつに対してサブ画像を登録する事が出来ます。
デフォルトの動作では、サブ画像(200x200)を表示してくれて、その画像に対して拡大して表示させるリンクと「拡大する」ボタンがくっついてくるのですが、せっかく大きな画像なのだからそのまま見て欲しい。。。なんて場合もあるかもしれません。
そんな時に利用出来る方法です。
- サブ拡大画像を表示
- 拡大画像がない時にはノーマルのサブ画像を表示
サブ画像情報部分を書き換える
具体的には「<!--▼サブコメントここから-->～<!--▲サブコメントここまで-->」の内容を書き換える事になります。
<!--▼サブコメントここから-->
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=key value="sub_title`$smarty.section.cnt.iteration`"}-->
<!--{if $arrProduct[$key] != ""}-->
<div class="subarea">
<h3><!--★サブタイトル★--><!--{$arrProduct[$key]|escape}--></h3>
<!--{assign var=ckey value="sub_comment`$smarty.section.cnt.iteration`"}-->
<!--拡大写真がある場合ここから-->
<!--{assign var=key value="sub_image`$smarty.section.cnt.iteration`"}-->
<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.iteration`"}-->
<!--{if $arrFile[$key].filepath != ""}-->
<div class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br}--></div>
<div class="subphotoimg">
<!--サブ画像-->
<!--{if $arrFile[$lkey] != ""}-->
<img src="<!--{$arrFile[$lkey].filepath}-->" alt="<!--{$arrProduct.name|escape}-->" />
<!--{else}--><img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->" />
<!--{/if}-->
<!-- subphotoimg end --></div>
<!--拡大写真がある場合ここまで-->
<!--{else}-->
<p><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br}--></p>
<!--{/if}-->
</div>
<!--{/if}-->
<!--{/section}-->
<!--▲サブコメントここまで-->
ソース情報
変更前と変更後のソースを見比べる際は上記テキスト・ファイルより。
EC-CUBEのサブ画像は、サブタイトルを入力しないとサブ画像が表示されない仕様なのですが、タイトルを入力しなくても表示出来る仕様もおまけで載せてます。
テンプレート上からサブタイトル表示部を消しても良いのですが、自由度は保持したい場合に使えます。
あとがき
サブ画像には拡大画像と通常画像の2種類が登録可能になってますが、拡大画像写真を先に登録すると、通常画像は自動で挿入されます。
これ知らないと、通常画像を用意してアップして、次に拡大画像を用意して再度アップする、という2度手間が発生します(｢･ω･)｢
