EC-CUBEのカスタマイズ・制作会社 強いネットショップ構築します｜EC-Orange
EC-CUBE カスタマイズ オンマウス時にメイン画像を変更
カスタマイズ：応用/マウスオーバーで画像切替
商品詳細画面において、商品画像の下にサブ画像を表示させ、その画像のオンマウス時に、
メイン画像を変更させる、というカスタマイズを行います。
様々な角度から撮影した商品写真は、全て見ていただきたいですよね。
お客様も商品画像は多いほど嬉しいはず！
デザインテンプレートでサイトのデザインを整えたら、商品一つずつの魅せ方も工夫してみてはいかがでしょうか。
EC-CUBE関連サービスでは、EC-CUBEの開発元である㈱ロックオンが提供する、ネットショップオーナー様に代わって商品の写真撮影を行うサービスを紹介しています。
システム開発でお悩みの方は、ネットショップ構築パッケージ EC-Orange にお問い合わせください
データベースの確認
dtb_products
テーブルを確認してください。
カラムの中に、sub_image1、sub_image2などがあり、値が「NULL」となっているはずです。
これらはカラムとして準備されてはいますが、実際には使用されていませんので、これを使用していきます。
商品登録画面の編集
画像サイズの変更
先程確認した、sub_image1,sub_image2などの項目は、登録画面では「サブ画像」という名前で、200×200の画像として設定されています。
このままでは一回り小さなサイズの画像になってしまいますので、商品詳細画像と同じ、260×260に変更します。
システム設定＞パラメータ設定
から、
NORMAL_SUBIMAGE_WIDTH
NORMAL_SUBIMAGE_HEIGHT
を探してください。
この値をどちらも260に設定します。
ロジックファイルの準備
/var/www/html/user/eccube/data/class/pages/products/LC_Page_Products_Detail.php
サブ画像の情報を格納するための配列を準備しておきます。
- // サブ画像をセット
- foreach($this->arrFile as $key=>$value){
- if(strstr($key,"sub_image")){
- $this->arrSubimage[$key] = $value;
- }
- }
商品詳細画面の編集
デフォルトではファイルを登録しても、表示させるスペースが設定されていないため、
以下のファイルを編集していきます。
/data/Smarty/templates/default/admin/products/product.tpl
- <!--★★サブ画像-->
- <!--{foreach from=$arrSubimage item="value" key="key" name="subimage"}-->
- <img id="<!--{$key}-->" src="<!--{$value.filepath}-->" width="60" height="60" alt="<!--{$value.disp_name|escape}-->" class="picture" />
- <!--{/foreach}-->
今回は、直接大きさを指定して、60×60の画像としてセットしておきます。
ただし、他の画像と同じように設定を行いたいのであれば、パラーメータに新たに項目を追加し、そこから値を呼び出すようにする必要があります。
EC-CUBEのカスタマイズや、ECサイトの開発・構築でお困りなら、
ネットショップ構築パッケージEC-Orangeにお問い合わせください！
ページトップへ