EC厨房プログラマーブログ EC-CUBEやWordPressをわかりやすく紹介

商品画像のポップアップをお洒落に！「FancyBox」

EC-CUBEでは、任意で拡大サイズの商品画像をアップロードすることが出来ます。
アップされた画像は商品詳細ページから、ポップアップで見ることができます。
このポップアップをオシャレでクールなものに変えることで、ユーザーに与える印象も良くなることも間違いない！？

まずはjQueryの最新版をダウンロード

EC-CUBEもjQueryを使っていますが、バージョンが古いようです。
最新版をダウンロードしましょう。

jQuery 1.3.1 - Google Code

もとからあるjQueryファイルを上書きします。
※私が上書きして確認した限りでは問題は起きませんでした。不安な方は別名で保存して使用してください。

標準だと以下のパスにあります。
/html/user_data/packages/default/js/jquery.js
これを上書きします。

FacyBoxのダウンロード

次にfancyboxのダウンロードを行います。

http://fancy.klade.lv/
※右上のZIPをダウンロードしてください。

解凍したらfancyboxのディレクトリごと、default以下の場所にコピーしてください。
/html/user_data/packages/default/fancybox/

Smatyテンプレートの書き換え

jQueryは他の場所でも使えるので、テンプレート側に加えてしまいましょう。
下記のテンプレートファイルを開きます。
/data/Smarty/templates/default/site_frame.tpl

<script type="text/javascript" src="<!--{$TPL_DIR}-->js/site.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"><!-- これを追加 -->
<title><!--{$arrSiteInfo.shop_name|escape}-->/<!--{$tpl_title|escape}--></title>

商品詳細ページを書き換え（FancyBoxの追加）

商品詳細ページは管理画面のデザイン管理から書き換えます。
「デザイン管理」->「商品詳細ページ」->「メイン編集」

下記コードを頭の方に加える。

<link rel="stylesheet" href="<!--{$TPL_DIR}-->fancybox/fancy.css" type="text/css" media="screen">
<script type="text/javascript" src="<!--{$TPL_DIR}-->fancybox/jquery.fancybox-1.0.0.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->fancybox/jquery.pngFix.js">

<!–★画像★–>の下あたり。

<!--★画像★-->
<a href="<!--{$arrFile[$large_key].filepath}-->"><!-- リンク先を変更 -->
    <img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
</a>
<p>
    <!--★拡大する★-->
   <a href="<!--{$arrFile[$large_key].filepath}-->"><!-- リンク先を変更 -->
      <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
   </a>
</p>

<!–拡大写真がある場合ここから–>のしたあたり。

<!--{if $arrFile[$lkey].filepath != ""}-->
<a href="<!--{$arrFile[$lkey].filepath}-->"><!-- リンク先を変更 -->
<!--{/if}-->
<!--サブ画像-->
  <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->" width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" />
<!--{if $arrFile[$lkey].filepath != ""}-->
</a>
<p>
  <a href="<!--{$arrFile[$lkey].filepath}-->"><!-- リンク先を変更 -->
    <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" />
  </a>
</p>
<!--{/if}-->

画像を挟む<A>タグを既存のものから、
<a href=”<!–{$arrFile[$lkey].filepath}–>”>
に書き換えるだけです。

これでファンシーでクールな商品画像ポップアップに変わりますよ。
ぜひお試しください。