Shopify

【Shopify】複数の画像をスライダーに追加する

  /
shopifyスライド　複数
悩む人

動的に画像を複数枚追加するにはどう書けばいいのかな？

その疑問に答えます。

shopifyではliquid(リキット)とschema(スキーマ)を組み合わせて実現させます。

詳しく見ていきましょう！！

まず全体像を把握

<section class="hero hero-home no-padding">
  <!-- Hero Slider-->
  <div class="owl-carousel owl-theme hero-slider">
    {% for block in section.blocks %}
    <div style="background-image: url({{block.settings.slide_image | img_url: 'master'}});" class="item d-flex align-items-center has-pattern">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <h1>Hub</h1>
            <ul class="lead"> 
              <li><strong>Bootstrap 4 E-commerce</strong> template</li>
              <li><strong>24</strong> pages, <strong>6</strong> colour variants</li>
              <li><strong>SCSS</strong> sources </li>
              <li>frequent & <strong>free updates</strong></li>
            </ul><a href="#" class="btn btn-template wide shop-now">Shop Now<i class="icon-bag"> </i></a>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</section>
  
  {% schema %}
    {
      "blocks":[
        {
          "type": "text",
          "name": "Slider",
          "settings": [
            {
              "id":"slide_image",
              "type":"image_picker",
              "label":"Slider Image"
            }
          ]
        }
      ]
    }
  {% endschema %}

上記が、動的に画像を選択できるコードの全体像です。

以下に注目します。

  {% schema %}
    {
      "blocks":[
        {
          "type": "text",
          "name": "Slider",
          "settings": [
            {
              "id":"slide_image",
              "type":"image_picker",
              "label":"Slider Image"
            }
          ]
        }
      ]
    }
  {% endschema %}

この記述で、カスタマイズ項目を作り出しています。

管理者がポチポチと設定するメニュー項目のことです。↓

スライダー画像選択機能

次は、以下に注目します。

    {% for block in section.blocks %}
    <div style="background-image: url({{block.settings.slide_image | img_url: 'master'}});" class="item d-flex align-items-center has-pattern">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <h1>Hub</h1>
            <ul class="lead"> 
              <li><strong>Bootstrap 4 E-commerce</strong> template</li>
              <li><strong>24</strong> pages, <strong>6</strong> colour variants</li>
              <li><strong>SCSS</strong> sources </li>
              <li>frequent & <strong>free updates</strong></li>
            </ul><a href="#" class="btn btn-template wide shop-now">Shop Now<i class="icon-bag"> </i></a>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}

{% for block in section.blocks %}

{% endfor %}

の繰り返し処理の間に

div style="background-image: url({{block.settings.slide_image | img_url: 'master'}});" class="item d-flex align-items-center has-pattern">

があると思います。

ここに、管理者が選択した画像が動的に入ってきます。

特に重要な記述は以下です。

{{block.settings.slide_image | img_url: 'master'}}

これはliquidの出力表記で、今回の場合画像を出力しています。

まとめ

複数の画像を動的に出力する方法をご紹介しました。

何かわからないなと思ったら下のツイッターからお問合せください！

RELATED POST