EC-CUBEをカスタマイズ！リスト一覧画面で画像をクリックして拡大させる方法♪

※このブログはコチラより自動生成しております。
最近、仕事の幅が増えすぎて、


自分が何の分野の専門なのか分からなくなって来てます








本日は弊社で運用しているECサイトの「世界の塩.com

」を使用して、





以下のカスタマイズを行ってみました。








■ 基本動作（修正前）





リスト一覧画面の画像をクリックすると、


詳細画面に遷移。

























■ 動作変更（修正後）





リスト一覧画面の画像をクリックすると、


その商品の拡大画像をJavascript（jQery）を使用して表示する。






















■ 変更方法





１．モデルの変更（line:153）


SC_Product->lists()


/data/class/SC_Product.php





main_large_image　// SQLに拡大画像のパスを追加





２．テンプレートの変更


/data/Smarty/templates/default/products/list.tpl





以下の参考にしてやると修正が楽


→ /data/Smarty/templates/default/products/detail.tpl





・jQueryライブラリ読み込み（line:25）


<link rel="stylesheet" type="text/css" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/facebox.css" media="screen" />


<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/facebox.js"></script>





・バインド（line:58）


$(document).ready(function() {


$('a.expansion').facebox({


loadingImage : '<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/loading.gif',


closeImage : '<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/closelabel.png'


});


});





・商品画像表示の際のリンク先変更（line:154）


<!--{if $arrProduct.main_large_image|strlen >= 1}-->


<a


href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->"


class="expansion over"


target="_blank"


><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" alt="<!--{$arrProduct.name|h}-->" class="picture" /></a>


<!--{/if}-->





サンプル：「世界の塩.com

」








EC-CUBEの仕組みがしっかりしているので、


数十分程度でカスタマイズ完了♪





これからドンドン拡張していこうかと思います♪





※ソースコードの公開義務はこれで果たしたのかな・・・・| 壁 |д･)








PS.


.画像が小さくてすみません、、


なぜか画像投稿のオリジナルサイズがなくなっていたんです。


私だけでしょうか・・・。




※Produced by WEB.HP.Facebookページ.製作会社ジェネキス