EC-CUBE

EC-CUBEでFlexSliderを使う方法

2015-12-07

EC-CUBEにFlexSliderを追加する方法を紹介します。EC-CUBEはデフォルトでスライダーが用意されていないので自分で追加する必要があるんですよね。

方法はテンプレート内に直接記述するやり方とブロックとして追加する方法があります。どちらの方法でも表示はできるんですが、ブロックとして自由に配置できると便利なので、ここではブロックを使ったFlexSliderの使い方を紹介します。

EC-CUBE2.13にFlexSliderを追加する方法

最新版のEC-CUBE3が公開されていますが、ここでは安定板の2.13系を使ってFlexSliderの追加方法を紹介します。

FlexSliderをダウンロードする

まずはFlexSliderプラグインをダウンロードします。FlexSliderの公式ページからダウンロードできます。ページ内のダウンロードボタンを押してダウンロードしましょう。
FlexSlider公式サイト

EC-CUBEのテンプレートにFlexSliderのjs、CSSをセットする

ダウンロードしたらzipファイルを解凍し、FlexSliderのjs、cssファイルを確認します。いろんなファイルがたくさんあってわかりにくいのですが、必要なのはcssとjsファイルだけです。

この２つのファイルをEC-CUBEで使用しているテンプレートのパッケージ内にコピーします。その際htmlとdata双方にコピーしておきましょう。場所は、html->user_data->packages->テンプレート->css,jsフォルダ、data/Smarty->templates->テンプレート->packages->css,jsフォルダ。

フォルダにコピーできたら、テンプレートから呼び出せるように設定します。方法はCSSやJavascriptの読み込みと同じやり方でOK。site_frame.tplのheadタグ内に書くだけです。

EC-CUBEにブロックを追加する

ここまでできたらあとはブロックを追加して表示するだけです。管理画面メニュー->デザイン管理->PC->ブロック設定でブロック設定画面開き、ブロック名とファイル名を書いてブロックのHTMLとJavascriptを記述します。

記述するコードは公式サイトのコードをそのままコピーすればOKです。

javascriptをテンプレート内に直接記述する場合は、scriptタグを忘れず入れておくことをお忘れなく。また、画像のURLも正しいものに置き換えてください。

ここではimgフォルダに入れた画像を読み込んでいるので、html->user_data->packages->テンプレート->imgフォルダにスライダー画像をいれます。

コードを追加できたら登録ボタンで登録して完了。ここでは以下のようなコードを追加しました。

 <div class="flexslider">
     <ul class="slides">
         <li>
             <img src="<!--{$TPL_URLPATH}-->img/img-1.jpg" alt="img" >
         </li>
         <li>
             <img src="<!--{$TPL_URLPATH}-->img/img-2.jpg" alt="img" >
         </li>
         <li>
             <img src="<!--{$TPL_URLPATH}-->img/img-3.jpg" alt="img" >
         </li>
         <li>
             <img src="<!--{$TPL_URLPATH}-->img/img-4.jpg" alt="img" >
         </li>
     </ul>
 </div>
 <script>
   $('.flexslider').flexslider({
     animation: "slide"
   });
 </script>

EC-CUBEのテンプレートにFlexSliderを追加する

ブロックが作れたので実際に配置して表示を確認してみます。管理画面メニュー->デザイン管理->PC->レイアウト設定画面を開き、先ほど追加したFlexSliderブロックを配置しましょう。

画像のサイズによっては少し崩れるかもしれませんが、とりあえず表示してみた結果がこんな感じです。

FlexSliderで表示する画像を変える方法

EC-CUBEで表示したい画像を変更するにはhtml側のpackagesのテンプレートに画像をアップロードればOKです。デフォルトテンプレートのimgフォルダなら、html->user_data->packages->default->imgとなります。

imgフォルダ内にsliderフォルダを新しく作ってその中に入れる場合、imgタグのリンクは以下のようになります。

src="<!--{$TPL_URLPATH}-->img/slider/img-1.jpg"

FlexSliderの表示スタイルを変えてみる

FlexSliderでは公式サイトのデモページにもあるように、様々なスタイルが用意されています。先ほどはシンプルなベーシックスライダーを使いましたが、簡単にスタイルを変更可能です。

例えばサムネイルタイプなら先ほどのブロック設定画面で以下のようなコードを記述すればOKです。

 <div class="flexslider">
     <ul class="slides">
         <li data-thumb="<!--{$TPL_URLPATH}-->img/slider/img-1.jpg">
             <img src="<!--{$TPL_URLPATH}-->img/img-1.jpg" alt="img">
         </li>
         <li data-thumb="<!--{$TPL_URLPATH}-->img/img-2.jpg">
             <img src="<!--{$TPL_URLPATH}-->img/img-2.jpg" alt="img">
         </li>
         <li data-thumb="<!--{$TPL_URLPATH}-->img/img-3.jpg">
             <img src="<!--{$TPL_URLPATH}-->img/img-3.jpg" alt="img">
         </li>
         <li data-thumb="<!--{$TPL_URLPATH}-->img/img-4.jpg">
             <img src="<!--{$TPL_URLPATH}-->img/img-4.jpg" alt="img">
         </li>
     </ul>
 </div>
 <script>
   $('.flexslider').flexslider({
     animation: "slide",
     controlNav: "thumbnails"
   });
 </script>

今回はEC-CUBEにFlexSliderを追加してみました。jQueryを使ったスライダーはこの他にもたくさんあるので、こちらの記事を参照にいろんなスライダーを試してみるのもいいかもしれませんね！
jQueryを使った高品質なスライダーまとめ

また、こちらのショップではFlexSliderを簡単に追加できるプラグインを同梱したEC-CUBEテンプレートを販売中です。

TetraThemes

Bootstrapにも対応したレスポンシブテンプレートとなっているので、FlexSliderのタッチ機能も有効活用できるのがポイント。価格もお手頃なので是非チェックしてみてくださいね！