EC-CUBEの小技：商品ページで商品画像をサムネイルで切り替え

2012年4月25日 17:48

javascript,Smarty,ver.2.11,小技集,改善余地アリ

ECCUBEでは、商品画像の拡大機能があり、しかしならが、その拡大も一枚しか適用されません。

サブ画像は登録すれば詳細情報の下部に表示されますが、これもまた　詳細-サブタイトル　を入力しなければ表示されないので、気をつけなければいけないというものです。

こういったサブ画像は、メイン部分で切り替えて見る事が出来る様にしたいものですが、僕はこのほど、やっとものに出来ました。
javascriptとSmartyを初級ほどにまで理解しなければ、できなかったという、簡単なものでしたが、自分としては成長を感じます。

というわけで、おさらいも含めてご紹介します。
結構便利かと思います。

この記事は最終更新日から1年以上が経過しています。

元々ある文の使い回しでなんとかなる

/data/Smarty/templates/default/products/detail.tpl
45行目下記を240行目あたりへ移動
※移動先は、画像表示部より下であれば、どこでもいいかと思います。

 <form name="form1" id="form1" method="post" action="?">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />

43行目<▼CONTENTS>より下を以下に書き換え

<!--▼CONTENTS-->
<SCRIPT type="text/javascript">
<!--
function showimg0(){
  document.area1.src = "<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->";
  document.getElementById("area2").href = "<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->";
}
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
	<!--{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}-->
		function showimg<!--{$smarty.section.cnt.iteration}-->(){
		  document.area1.src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->";
		  document.getElementById("area2").href = "<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->";
		}
	<!--{/if}-->
<!--{/section}-->
-->
</SCRIPT>

<div id="undercolumn">
<div id="detailarea" class="clearfix">
<div id="detailphotobloc">
	<div class="photo">
	<!--{assign var=key value="main_image"}-->
	<!--★画像★-->
	<!--{if $arrProduct.main_large_image|strlen >= 1}-->
	<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" id="area2" class="expansion" target="_blank">
	<!--{/if}-->
	<img src="<!--{$arrFile[$key].filepath|h}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|h}-->" name="area1" class="picture" />
	<!--{if $arrProduct.main_large_image|strlen >= 1}-->
	<p class="mini">画像を拡大する</a></p>
	<!--{/if}-->
	</div>
            
<!--{if $arrProduct.main_large_image|strlen >= 1}-->
<!-- サブ画像 -->
<div class="thumbnail">
<input type="image" src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->&amp;width=80&amp;height=80" onclick="showimg0()" alt="<!--{$arrProduct.$key1|h}-->" />
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
    <!--{assign var=key1 value="sub_title`$smarty.section.cnt.iteration`"}-->
    <!--{assign var=key2 value="sub_image`$smarty.section.cnt.iteration`"}-->
    <!--{if $arrProduct.$key2 != ''}-->
<input type="image" src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.$key2|h|nl2br}-->&amp;width=80&amp;height=80" onclick="showimg<!--{$smarty.section.cnt.iteration}-->()" alt="<!--{$arrProduct.$key1}-->" />
<!--{/if}-->
<!--{/section}-->
</div>
<!--{/if}-->

以上で完成です。

見えもらえばわかりますが、コードがよくわからないまま、他所から引っ張ってきたら、上手く行ってしまったという感じです。
おそらく、間違いな部分もあると思いますが、いずれ賢くなったら修正したく思っております。