お客様の使用しているB to BサイトのBカート。
これまでPC用の表示とタブレット・スマートフォン様の表示を別々に管理していたのですが、システムのバージョンアップに伴い、レスポンシブのみの管理となりました。
その際、トップページのスライドショーをこれまでBxSliderというプラグインを使っていたのですが、Slickというプラグインに変更することにしました。
設定箇所
スクリプトを組む際の設定箇所はヘッダとフッタのフリースペースの2箇所のみ。BカートのようなASPは<head>~</head>内に直接書き込めないのでフリースペースに書くことが多い。（たしかカラーミーショップもそうだったような気がします。）直接ファイルをダウンロードしてサーバーに置くやり方もありますが、ASPの場合FTPとかも使えなかったりするのでCDNを使います。
最後にコンテンツのトップページにあるフリースペースにスライドさせたいバナー画像をおけばオッケーです。
ヘッダ内の記述
コントロールパネル→デザイン管理→基本デザイン→ヘッダーフリーHTMLスペースに以下の内容を書きます。
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />フッタの記述
コントロールパネル→デザイン管理→基本デザイン→ フッター
のところでプルダウンメニューからHTMLを選び以下内容を書きます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$('.slider').slick({
autoplay: true,
arrows: true,
});
</script>実はここでハマったのですが、「slick 使い方」とかで検索した情報によると、<head></head>内に書く例が多く、その通りに ヘッダーフリーHTMLスペースに書いても動きませんでした。
Jsはやっぱり</body>タグの前に書かないといけませんね。
簡単に説明すると1つ目はjqueryのcdn。必ず先に読み込ませてください。
2つ目がslickのcdn。
3つ目は設定を書くjqueryです。
引数にスライドさせる画像を囲ったタグにつけたIDやclassを指定します。
ここに色々設定を書いてコントロールします。
細かいところは公式サイトや別のサイトで詳しく書かれているので割愛します。
コンテンツ部分
コントロールパネル→コンテンツ→各ページ管理→トップページ項目の編集ボタンをクリック。
レスポンシブ表示フリースペースにある上段フリースペース（今回はここに書きます）に以下のように書きます。
<ul class="slider">
<li><a href="#"><img src="aaa.jpg" alt="画像A"></a></li>
<li><a href="#"><img src="aaa.jpg" alt="画像B"></a></li>
<li><a href="#"><img src="aaa.jpg" alt="画像C"></a></li>
</ul>画像を囲むのは<ul></ul>でも<div></div>でもどちらでも構いません。ただclassもしくはidに名前をつけて、それをjqueryの引数に合わせてください。
以上で終わりです。
ポイントはCDNリンクをcssとjsでヘッダとフッタに分けること。読み込む順番を間違わないことです。
基本設定が終わると中々使いやすそうなプラグインです。
そしてB to B専用のBカートも使いやすいASPだと思います。
