楽天スマホのフリック型バナーを自社サイトスマホでも表示させたい

Question

お世話になっております。
度々の投稿失礼いたします。

ただ今楽天のスマホページの共通小バナーの設定で
添付ファイルのようにフリック型にしております。

こちらの表示をメイクショップのスマホページにも
反映させたいと思いますが、
どのようなソースの設定すればよろしいでしょうか。

調べてみたところjQueryを使用するようですが…。。

お手数おかけしますが、よろしくお願いいたします。

Answer

ECマスターズの田中です。

はい、jQuery用プラグイン（拡張機能）をご利用ください。

この機能は「カルーセル」や「スライダー」など
色々な呼び方をされており、
プラグインも多くの種類がリリースされております。

まずは、
http://creive.me/archives/10461/
上記URLにて最初に紹介されている、
「slick」の導入をお試しください。
導入方法も、ページにて説明がございます。

Answer

ECマスターズの田中です。

ご案内が遅れて失礼いたしました。
jQueryプラグインを直接導入される以外にも、

ECマスターズクラブ会員限定で無料でご提供している
ECステーションのツールボックス「スライドバナー作成」を使うことで、

HTMLを操作せずにスライドバナーを作ることができ、
最後に自動生成される設置タグを、トップページのHTMLファイルに埋め込むだけで
かんたんにスライドバナーを設置することができます。

是非一度、使ってみてください。
https://ec-masters.club/index.php?ecmtools.1509

Answer

ご返信ありがとうございます。

教えて頂いたカルーセルを紹介するページに入りました。
http://creive.me/archives/10461/


最初のslickを試したいと思いますが、

slickはどこでダウンロードできますでしょうか。
英語で理解しがたいです。

また、教えて頂いたURLでは、

★body閉じタグ直前に以下のスクリプトを読み込みます。（jQueryの読み込みはこの記述よりも前で行います。）★

とありますが、makeshopのスマホサイトを編集する場合、body閉じタグ直前とはどこになるでしょうか。

独自デザイン→スマホデザイン→フッターの一番最後にいれるのでしょうか。
よろしくお願いいたします。

ＥＣステーションのスライドバナーについては自分でできなかった場合に
使用させて頂きたいと思います。
教えて頂きありがとうございます。

Answer

ECマスターズの田中です。

＞slickはどこでダウンロードできますでしょうか。
http://kenwheeler.github.io/slick/
上記、slick公式サイトの、
右上メニュー一番右にある「get it now」をクリックしていただき、
画面に表示された「Download Now」ボタンを押していただくと
zipファイルをダウンロードすることができます。

＞makeshopのスマホサイトを編集する場合、body閉じタグ直前とはどこになるでしょうか。
＞独自デザイン→スマホデザイン→フッターの一番最後にいれるのでしょうか。
厳密に最も直前である必要はないので、
仰るとおり、フッターの一番最後で結構です。

Answer

度々失礼いたします。

http://www.morinoen.com/smartphone/

いろいろなサイトを参照しながらつけることができたのですが、jQueryが競合しているのか
下部にあるカテゴリ一覧がクリックしない状態でもすべて展開してしまっています。

どのようにしたら展開しない状態になりますでしょうか？
お手数おかけしますが宜しくお願いいたします。

Answer

ECマスターズの田中です。

ソースを確認したところ、slick.jsの中でエラーが発生した結果、
カテゴリ一覧を管理するJavaScriptが実行されていない模様です。

どうやら、ページの上下２箇所にslickによるスライドバナーを設置しようとして、
２箇所に




および




を記入されているようです。

同じ外部CSS・JSファイルの読み込みは１箇所だけで問題ありません。
特に、外部JSファイルを多重に読み込むと、エラーの原因となる可能性がありますので、
上記４つのHTMLタグについて、
ページ上部に設置されている分を削除していただき、
動作をご確認いただけますでしょうか。

Answer

田中様

ご返信ありがとうございます。
対応させて頂きましたが、変わらず展開したままです。
他に何か対応できることはありますでしょうか？

Answer

ECマスターズの田中です。

改めてソースの内容を確認したところ、
http://gigaplus.makeshop.jp/morinoen/slider/_slick_custom.js
の中に、slickを起動させるコードが複数記入されておりました。

http://gimmicklog.main.jp/jquery/549/
上記ページから引用されたのかと思いますが、
起動に必要なコードは一つだけで結構ですので、

//複数表示（レスポンシブ）
から
//画像遅延読み込み
の手前までに書かれたコードのみを残し、
それ以外のコードを削除してください。

また、同じページに2つのスライダーを設置した結果、
本来同じページに一つしか存在しないはずの
同じid属性を持つタグが2つ存在する状態となっており、
不具合を引き起こしている可能性があります。

片方の設置用タグ（〜）を削除の上
動作をご確認ください。

それでも解決しない場合は、
の中に画像を一つだけ設置した状態にしてみる、
_slick_custom.js内のコードから
slick({ と }); の間の動作オプションを削除していただくなど、
slickとして一番単純な構造で設置していただき、
動作をご確認ください。

一番単純な構造でもエラーが発生する場合は、
makeshopとslickの相性を疑うしかなくなりますので、
一度、他のjQueryプラグインの導入を
お試しいただきますようお願いします。

Answer

田中様

すっきり解決いたしました！
ありがとございます！