ECCUBE3にslickカルーセル(スライダー)のスクリプトを外部ファイルから読み込む

ECCUBE3にてjavascriptを外部ファイルから読み込もうとした際、うまく読み込みが出来なかった。
原因は、単純に<script></script>を外部ファイルに書いた事が原因だった。
せっかくなので、ECCUBE3とslickの情報を書こうと思う。

経緯

ECCUBE3で、ECサイトを制作しており、商品をカルーセル(スライダー)で表示するのが省スペースで豊富なコンテンツを見せる事ができると考え、カルーセルを実装しようとした。カルーセルは、Javascriptのオープンソースプラグインである「slick」があったので、実装を試みた。

slick:http://kenwheeler.github.io/slick/

slickを入れようとしたら、ECCUBE3にはデフォルトで入っていた。デフォルトのスライダーがslickを使っていたのだ。
矢印はオプションでtrueにしても表示されなかったので、画像を用意して入れて、スタイルをCSSで整えた。

slickは、色々なオプションがあり、それらを使う事で矢印を表示したり、表示個数や速度等、細かい設定ができる。レスポンシブにも対応しているので非常に使い勝手の良いカルーセルだと思った。

 

slickオプション

オプション名 タイプ 初期値 概要
accessibility trueまたはfalse true キーボードの左右ボタンで画像の切り替えを可能にするか否か
adaptiveHeight trueまたはfalse false スライダーの高さを現在のスライドに合わせる
autoplay trueまたはfalse true 自動再生するか否か
autoplaySpeed 数値(ミリ秒) 3000 自動再生時の移動までの時間
arrows trueまたはfalse true スライダーの左右に「進む」「戻る」ボタンをつけるか否か
asNavFor 文字列 null ページ内の他のスライドと連携動作させたいとき、そのclassを記載
appendArrows 文字列 $(element)  矢印ボタンの生成位置を変更
(Selector, htmlString, Array, Element, jQuery object)
prevArrow 文字列
(html|jQuery selector)
object (DOM node|jQuery object)		 <button type=”button” class=”slick-prev”>Previous</button> 「戻る」ボタンのhtmlを指定
nextArrow 文字列
(html|jQuery selector)
object (DOM node|jQuery object)		 <button type=”button” class=”slick-next”>Next</button> 「進む」ボタンのhtmlを指定
centerMode trueまたはfalse false 表示スライドを中央寄せにするか否か
centerPadding 文字列 ’50px’  センターモードのpaddinfを指定。px又は％
cssEase ‘ease’
‘linear’
‘ease-in’
‘ease-out’
‘ease-in-out’		 ‘ease’ スライド切り替え時のアニメーション
customPaging function n/a デフォルトでドット状のページ送りを、サムネイルなどに変更例）
customPaging : function(slick-box, i) {
var thumb = $(slick-box.$slides[i]).data(‘thumb’);
return ‘<a><img src=”‘+thumb+’”></a>’;
},
dots trueまたはfalse false スライダーの下のページ送りを表示するか否か
dotsClass 文字列 ‘slick-dots’ スライダーの下のページ送りのclass名指定
draggable trueまたはfalse true ドラッグが可能か否か
fade trueまたはfalse false スライド切り替え時はフェード処理するか否か
focusOnSelect trueまたはfalse false
easing 文字列 ‘linear’ イージングを指定
edgeFriction integer 0.15 無限スライドしない場合に端のスライドから更に進もうとした場合のバウンド処理の動作秒数
infinite trueまたはfalse true 最後のスライドの次に最初のスライドを表示し、無限にスライドできるようにするか否か
initialSlide integer 0 最初のスライダーの位置
lazyLoad ‘ondemand’または’progressive’ ‘ondemand’ 画像の遅延表示処理。
img 属性のsrcの代わりにdata-lazyで画像アドレスを指定する事で動作。
スライドした領域が表示されるタイミングで読み込みを開始する。
例）
<img data–lazy=“img/lazyfonz1.png”/>
progressiveを指定すると初期画面の描画後、スライドした画像が表示される事前に読み込む処理が行われる。
mobileFirst trueまたはfalse false responsive オプション設定時にモバイル設定を初期値にする
pauseOnFocus trueまたはfalse true 自動再生時、スライドダーにフォーカスしている時一時停止するか否か
pauseOnHover trueまたはfalse true 自動再生時、スライダーにマウスオンで一時停止するか否か
pauseOnDotsHover trueまたはfalse false 自動再生時、ドット状のページ送りにマウスオンで一時停止するか否か
respondTo ‘window’、’slider’または’min’ ‘window’ responsive 設定時のwidth測定をどこに設定するか。より狭い方が優先。
responsive object none レスポンシブの設定を記述
rows int 1 1以上に設定するとグリッドモードが初期化される。
別途 slidesPerRow オプションを使用して、各行に含めるスライドの数を設定
slide element ”
slidesPerRow 数値 1 rows オプションでグリッドモードを初期化した際に有効。各グリッド行にいくつのスライドがあるかを設定例）
rows: 2,
slidesPerRow: 2
として、4つ以上のスライドが有れば、縦に2つづつ切り替わるのスライダーに
数値 1 同時に表示される画像の枚数を設定
slidesToScroll 数値 1 何枚分の画像を移動させるかの設定
speed 数値(ミリ秒) 300 スライド切り替え時の時間を指定
swipe trueまたはfalse true スワイプに対応するか否か
swipeToSlide trueまたはfalse false 表示画像数が少ない場合などにもスワイプ処理を実行するか否か
touchMove trueまたはfalse true タッチムーブ機能を有効にするか否か
touchThreshold 数値 5 スライダーのスライド処理に対して 1/この値 分の距離操作すると、前後に切り替わる？（調査中）
useCSS trueまたはfalse true 切り替わり処理などでCSS Transitionsを有効にするか否か
useTransform trueまたはfalse true 切り替わり処理などでCSS Transformsを有効にするか否か
variableWidth trueまたはfalse false スライド毎の横幅を可変にするか否か。
※違うサイズの画像が含まれるスライダーを実装したい時はtrueに
vertical trueまたはfalse false 縦にスライドするか否か
verticalSwiping trueまたはfalse false 縦方向のスワイプに対応するか否か
rtl trueまたはfalse false Right to Left 通常htmlの記述順で左から右へと表示されるが、右から左へと変更する。
※スライドさせる箇所の親要素にdir=”rtl“を記述する必要が。
例）
<ul class=”slick-box” dir=”rtl“>

引用：http://uzurea.net/explanation-of-jquery-slider-slick/

 

原因は、外部のjsファイル(slick.js)に<script></script>を入れてしまった事が原因だった。
どうやら、<script></script>を入れてはならないようだ。

 

URL：http://www.allmaintenance.jp/shop/html/
ファイル名：index.twig
ブロック名：在庫処分セールブロック

<script src="http://www.allmaintenance.jp/shop/js/test.js"></script>

<h3>在庫処分セール</h3>
<ul class="slick-box3">
<li><img src="http://www.allmaintenance.jp/shop/html/upload/save_image/0729114308_597bf63cea229.jpg" width="" height="" alt="てｓｔ"/>
<div class="timesale-title2">WAKO'S フューエルワン</div>
<div class="timesale-discount2">10%OFF</div>
<div class="price-wrapper2">
<div class="timesale-price2">1,000</div>
<div class="list-price2">1,700</div>
</div>
</li><li><img src="http://www.allmaintenance.jp/shop/html/upload/save_image/0729114308_597bf63cea229.jpg" width="" height="" alt="てｓｔ"/>
<div class="timesale-title2">WAKO'S フューエルワン</div>
<div class="timesale-discount2">10%OFF</div>
<div class="price-wrapper2">
<div class="timesale-price2">1,000</div>
<div class="list-price2">1,700</div>
</div>
</li>

text.js(外部読み込みjsファイル)

$(function() {
$('.slick-box3').slick({
centerMode: true, //センターモード
centerPadding: '60px', //前後のパディング
autoplay: true, //オートプレイ
autoplaySpeed: 2000, //オートプレイの切り替わり時間
slidesToShow: 3, 
vertical: true,
adaptiveHeight: false,
responsive: [{
breakpoint: 768,
settings: {
arrows: false, // 前後の矢印非表示
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}]
});
});

もし、外部jsファイルが読み込めなかったら

 <script>
      alert('JavaScriptのアラート');
    </script>

上記のソースコードをhtmlファイルに直接記述して、ポップアップアラートが出るか確認。
出なければ、javascriptが読み込めていない。ブラウザの設定が怪しいと思う。

ポップアップアラートが出たら、javascriptは読み込めているので、それ以外の問題。パスとか、構文が原因だと思う。

     alert('JavaScriptのアラート');

上記のソースコードをjsファイルにコピペして、ポップアップアラートが出るか確認。
読み込みは、htmlに<script src="http://www.allmaintenance.jp/shop/js/test.js"></script>のように記述してみる。とりあえず、絶対パスで確認。
表示されれば、あとは、相対パスでおこなう。
ルート相対パスなるものが便利で、「/」を先頭に書くと、ルートディレクトリに行く。つまり、「http://www.allmaintenance.jp/」だ。そこから、jsファイルのあるパスを書けばいい。

つまり、<script src="/shop/js/test.js“></script>だ。

外部ファイルで読み込ませるメリット

メリットは、変更が楽という点。
今回のように同じオプションのものを20個作る場合、オプションを変更するとなると、20個のhtmlファイルに書いたオプションを変更しないといけない。相当な手間だ。
なので今回は、何としても外部ファイルで読み込ませようと悪戦苦闘した。

 

ECCUBE3の情報はまだまだ少ないと感じているので、ご覧の方もブログ書いて情報共有してもらえると有難いです。

 

追記

slick 誤動作
slick 誤動作
slick 動作
slick 動作
追加したサイドバーslick
追加したサイドバーslick

商品詳細ページのデザインを変更していた際、サイドバーにslickカルーセルを2つ配置したら、デフォルトの商品画像slickカルーセルが動作しなくなった。

1つ配置した際は、デフォルトの商品画像slickは正常に動作していた。
2つ配置したら、動作しなくなった。

原因は、追加しようとした各slickカルーセルが、外部ファイルを計2回読み込んでいた事だった。
同じクラスを使うなら、外部ファイルは1回読み込めば良いようなので、2つめ以降のslickカルーセルの読み込みソースコード<script src="http://www.allmaintenance.jp/shop/js/test.js"></script>は削除した。これで、正常に動作した。

slickを使う場合は、<head></head>内に定義した方が良い

今まで、ブロック毎に定義したjacascriptファイルを読み出していたのですが、他のjavascriptを使用している箇所で不具合が出てきました。具体的には、右上にあるカートボタンをおしても反応しなくなりました。原因は、javasctiptファイルをブロック内で読み出していた為でした。
そこで、head内に記述する事で改善しました。

/app/template/default/default_frame.twig　の、<head></head>内に定義(例：<script src="/shop/js/test.js"></script>)すると良いです。
/src/template/default/default_frame.twig　の方に定義すると、ECCUBEをアップデートした時に消えるそうです。なので、appの方に記述しました。

再読み込みしただけでは、定義したソースコードを読み込まれませんでした。
そこで、コンテンツ管理＞キャッシュ管理から、twigのキャッシュ削除で反映されました。

その他,未分類

Posted by ぼっち