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

この記事は最終更新日から1年以上が経過しています。
ECCUBEでは、商品画像の拡大機能があり、しかしならが、その拡大も一枚しか適用されません。

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

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

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

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

/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}-->

以上で完成です。

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

8 Comments

  1. あちこち探してここにたどり着きました。
    バージョンは2.12.2ですが、ほぼ希望どおりになりましたので、感謝感激です。
    ただ、メイン画像が縦長でサブ画像が横長の場合、サブ画像のサムネールをクリックしたときにメイン部分に表示される画像が縦方向に大きく引き延ばされてしまいます。
    javascriptなどの知識がほとんどないので、自分ではカスタマイズできそうもありません。
    元の画像の縦横比を保ったままメイン部分に表示させる方法をご教示いただけると大変助かります。

    • 閲覧ありがとうございます。

      予測ではありますが、以下の位置分によって縦横比が固定されてるため、メイン画像と同じ日膣になってしまうのではないでしょうか。

      <img src="<!--{$arrFile[$key].filepath|h}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|h}-->" class="picture" />

      なので、この 

      height="<!--{$arrFile[$key].height}-->"

      の部分だけを削除して、もう一度検証してみてください。

  2. すみません。2.12でもできました!
    すばらしい情報ありがとうございました。

    • いつも見て下すってありがとうございます。

      記事にしてあるものは、カテゴリとして2.11系とありますが、ほとんどが2.12でも使えます。

      便利なカスタマイズもあるので、是非挑戦して下さい。

  3. 2.12.0で試してみたんですが、上手くいきませんでした。
    ぜひ使いたいので、2.12.0でも教えてください!
    宜しくお願いします。

Leave a Reply

Your email address will not be published.


*


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください