【shopify】リンク付きスライドショーをliquidで作成

dawnのデフォルトスライドショーをカスタマイズしてリンクを付けようかと思っていたのですが、いろいろややこしかったので、自前で設置することにしました。
絶対忘れるので、備忘録兼ねてコードの記録をしておきます。
…というか再現しようとして1か所コード読み込むのを忘れてて、それを探し当てるのに1時間くらいかかった…やっぱり記録残すのは大事。

やりたいこと

• 画像を数枚横並びにして自動スライドさせる

• 画像にリンクをつける

• レスポンシブで表示可能

• アプリは使わず、自前スライド設置

• 簡単に画像とリンクが変更できる（ブロックで追加できるように）

やったこと

slickスライドショーを利用して自前でスライドショーを設置しました。
今回紹介するのはアプリなしでの設置方法ですが、コード編集ができる人でないと間違えたりした時のトラブル対応ができないので、ご注意ください。

• 「theme.liquid」の編集

• 新しくセクション、css、jsの作成

theme.liquidの編集内容

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">

をdawnの10行目あたりに追加。
ちなみに再現時にこのコードの挿入を忘れていてスライドショーが全く動かず、焦りました。
皆さまも必要ファイルの読み込みをお忘れなく。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

を</head>前に挿入。

<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  {{ 'slideshow-custom.js' | asset_url | script_tag }}

を</body>直前に挿入。
bodyの閉じタグ直前でないと、いろいろ干渉するっぽくて動かなったので。
※{{ 'slideshow-custom.js' | asset_url | script_tag }}の「slideshow-custom」の部分はこの後作るjsファイル名と合わせること。

ここまでで解決できなかった問題点と妥協点

特定セクションの挿入時のみjquery等を読み込むというのをしたかったのですが、全然分からなかった…
dawnではスピード改善のためにjquery等使わないように設計されているので、スライドショーだけのために導入するのは正直気が引ける…
なので、スライドショーの挿入場所が限定的なのであれば、if文で読み込みを制限するのが妥協策かなと思います。

新しいセクションを作る

{{ 'slideshow-custom.css' | asset_url | stylesheet_tag }}

新しく作ったセクションの一行目に挿入。
※{{ 'slideshow-custom.css' | asset_url | stylesheet_tag }}「slideshow-custom」の部分はこの後作るcssファイル名と合わせること。

<ul class="slider">
  <li><a href="test.html"><img src="test01.jpg" alt=""></a></li>
  <li><a href="test.html"><img src="test02.jpg" alt=""></a></li>
  <li><a href="test.html"><img src="test03.jpg" alt=""></a></li>
</ul>

ただスライドショーを作るだけでいいならこのhtmlのリンクと画像urlを変更するだけでも動きます。

{% schema %}
  {
    "name": "Section name",
    "settings": []
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

セクションを新規作成した時に自動で入るコードの「"name": "Section name",」の「Section name」は分かりやすい名前に変更してください。（日本語OK）

セクションを動的に動かしたい場合は、presetsの設定を追加すれば動的セクションになります。

{% schema %}
  {
    "name": "Section name",
    "settings": [],
    "presets": [
      {
        "name": "Section name"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

こちらのscemaに変更すれば、最低限の動きは可能です。
上記と同じで、「Section name」は分かりやすい名前に変更してください。（日本語OK）

新しくcssを作る

アセットで新しくcssを作ります。
今回は「slideshow-custom」という名前で作りました。
上記のコードでそれぞれ読み込ませている名前と同じなので、そのまま使っていただいても大丈夫です。

.slider {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.slider img {
  width: 100%;/*スライダー内の画像を横幅100%に*/
  height: auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
  margin: 0;
}

今回は矢印とかも何も要らなかったので、本当に最低限のコードです。
必要に応じて調整してください。
「slick　カスタマイズ」とかで検索したらいろいろ出てきます。

新しくjsを作る

アセットで新しくjsを作ります。
今回は「slideshow-custom」という名前で作りました。面倒なので私はcssとjsを同じ名前で作っています。
上記のコードでそれぞれ読み込ませている名前と同じなので、そのまま使っていただいても大丈夫です。

$('.slider').slick({
  autoplay: true,//自動的に動き出すか。初期値はfalse
  infinite: true,//スライドをループさせるかどうか。初期値はtrue
  slidesToShow: 3,//スライドを画面に3枚見せる
  slidesToScroll: 1,//1回のスクロールで3枚の写真を移動して見せる
  arrows: false,//左右矢印の表示
  dots: false,//下部ドットナビゲーションの表示
  pauseOnHover: true,//マウスオーバー時スライドを停止
  pauseOnFocus: true,//フォーカス時スライドを停止
  responsive: [
    {
      breakpoint: 769,//モニターの横幅が769px以下の見せ方
      settings: {
        slidesToShow: 2,//スライドを画面に2枚見せる
        slidesToScroll: 1,//1回のスクロールで2枚の写真を移動して見せる
      }
    },
    {
      breakpoint: 426,//モニターの横幅が426px以下の見せ方
      settings: {
        slidesToShow: 1,//スライドを画面に1枚見せる
        slidesToScroll: 1,//1回のスクロールで1枚の写真を移動して見せる
      }
    }
  ]
});

cssと同じでjsもカスタマイズ事例がたくさんあるので、必要に応じて修正してください。

【注意】
jsで調整できるものはできるだけjsで調整すること！
cssで安易に調整してしまうとスライドショー自体が動かなくなる事例があるようです。

そのまま使える全コード

そのまま使える全コードはこちらです。
（セクションに追加する新しいliquidのコード以外はほぼ前述した通りです）
おためしになられる前に必ず、環境・条件をご確認ください。

※ご注意
このコードはshopifyのdawn8.0.0で検証しています。
保障、サポートなどは一切しておりませんので、ご自身の責任下でお試しください。
すでにカスタマイズされている場合や環境、バージョンによっては崩れたり正常に動作しないこともありますので、ご注意ください。

こちらで紹介するコードはトップページだけで作動するようにしているので、必要に応じて修正してください。
また、cssやjsなども表示したい内容によっては修正が必要です。
そのあたりのことをご了承の上で、続きの記事をご覧ください。