Glide.js を使用して Shopify テーマに商品リストのカルーセルを実装する

ishigaki

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

今回の記事では、前回の記事「Shopify テーマにカルーセル用ライブラリ「Glide.js」を導入する」に引き続き、Glide.js を使用して商品リストのカルーセルを実装する方法についてまとめたいと思います。

また、こちらの記事は Shopify Theme Kit での開発を前提としています。Shopify Theme Kit についてはこちらの記事もご覧ください。

商品リストのカルーセルを実装する方法

今回は、以下のように商品が4つが表示され、左右にスクロールが出来る商品リストのカルーセルを実装する方法についてまとめます。

1. セクションを作成する

まずは、テーマファイル内にカルーセルセクション用の新しい liquid ファイルを作成します。

{% comment %}
  セクション設定で指定したコレクションを collection 変数に追加
{% endcomment %}
{%- assign collection = collections[section.settings.collection] -%}

<div class="glide" id="glideProductCarousel">
  <div class="glide__container">
    {% comment %}
      Glide.js の矢印ボタンを表示
    {% endcomment %}
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
    </div>

    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        {% comment %}
          Shopify デフォルトテーマ「Debut」に標準で入っている `product-card-grid` コンポーネントを `glide__slides` class で囲み商品を表示
        {% endcomment %}
        {% for product in collection.products limit: product_limit %}
          <li class="grid__item small--one-half medium-up--one-quarter">
            {% include 'product-card-grid', max_height: 250, product: product, show_vendor: section.settings.show_vendor %}
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>

セクション設定用の schema はこのようになっています。

{% schema %}
{
  "name": {
    "ja": "商品カルーセル"
  },
  "settings": [
    {
      "id": "collection",
      "type": "collection",
      "label": {
        "ja": "コレクション"
      }
    }
  ],
  "presets": [
    {
      "name": {
        "ja": "商品カルーセル"
      },
      "category": {
        "ja": "コレクション"
      }
    }
  ]
}{% endschema %}

このように指定することで、管理画面側でカルーセルに表示させたいコレクションを指定することが可能になります。

2. Glide.js の設定

前回の記事で導入した Glide.js を使用するため、JSファイルを用意し、サイト内に読み込ませます。

document.addEventListener('DOMContentLoaded', function() {
  if (document.getElementById('glideProductCarousel')) {
    new Glide('#glideProductCarousel', {
      type: 'carousel', // カルーセルが一画面でループする設定。`type: 'slider'` ではスライドが末端に到達してから巻き戻る
      startAt: 0, // 要素の何番目から表示するか
      perView: 4, // 一画面に要素を何個表示するか
      autoplay: 4000, // 自動でカルーセルが次の要素へ遷移する秒数 (0で遷移しない)
      hoverpause: true, // autoplay 有効時にカルーセルを停止するか
      breakpoints: {
        "768": { // 画面幅を指定することで指定以下の画面幅時の設定を追加できる
          perView: 2,
        },
      }
    }).mount()
  }
});

3. 管理画面で表示設定を行う

テーマファイル内にセクションを作成し、theme deploy でテーマのデプロイを行うと、管理画面側で先程作成した product-carousel.liquid が使用できるようになっています。

これをページ内に配置し、設定から「コレクション」を設定するとカルーセルが表示できるようになりました。

管理画面から「商品カルーセル」セクションを追加し、コレクションを指定することでカルーセルが表示できる

まとめ

今回は、前回の記事でご紹介した Glide.js で実際にカルーセルを実装する方法までをまとめました。

Shopify の実装に携わる方の参考にしていただけたらと思います。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

ishigaki

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。