Shopify

【Shopify】カテゴリセクション

  /
shopify カテゴリ
アイコン名を入力

カテゴリのセクションを追加したいな
どうすれば追加できるかな？

そんな疑問にお答えします。

今回は以下のようなカテゴリセクションを用意しようとしています。

カテゴリセクション
目次
  1. HTMLを用意する
  2. liquidとして動的にする
  3. カテゴリ画像と、画像上のテキストを動的にする
  4. まとめ

HTMLを用意する

静的なHTMLは以下です。

    <!-- Categories Section-->
    <section class="categories">
      <div class="container">
        <header class="text-center">
          <h2 class="text-uppercase"><small>Top for this month</small>Our Featured Picks</h2>
        </header>
        <div class="row text-left">
          <div class="col-lg-4"><a href="#">
              <div style="background-image: url(img/banner-1.jpg);" class="item d-flex align-items-end">
                <div class="content">
                  <h3 class="h5">Men's</h3><span>New Collection</span>
                </div>
              </div></a></div>
          <div class="col-lg-4"><a href="#">
              <div style="background-image: url(img/banner-2.jpg);" class="item d-flex align-items-end">
                <div class="content">
                  <h3 class="h5">Women's</h3><span>New Collection</span>
                </div>
              </div></a></div>
          <div class="col-lg-4"><a href="#">
              <div style="background-image: url(img/banner-3.jpg);" class="item d-flex align-items-end">
                <div class="content">
                  <h3 class="h5">Accessories</h3><span>Sale of 20%</span>
                </div>
              </div></a></div>
        </div>
      </div>
    </section>

上記をこれからliquidとして扱います。

liquidとして動的にする

まずはタイトルとテキストを動的に変更できるようにしましょう。

カテゴリセクションタイトルとテキストを動的に

sectionsディレクトリに「categories.liquid」としてファイルを1個作ってください。

templates/index.liquidに以下のように読み込ませます。

{% section 'categories' %}

つぎに、schemaと出力タグを書きます。

先に全体像を示します。

<!-- Categories Section-->
<section class="categories">
    <div class="container">
        <header class="text-center">
            <h2 class="text-uppercase">
                <small>{{ section.settings.category_header }}</small>{{ section.settings.category_text }}</h2>
        </header>
        <div class="row text-left">
            <div class="col-lg-4">
                <a href="#">
                    <div class="item d-flex align-items-end" style="background-image: url(img/banner-1.jpg);">
                        <div class="content">
                            <h3 class="h5">Men's</h3>
                            <span>New Collection</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4">
                <a href="#">
                    <div class="item d-flex align-items-end" style="background-image: url(img/banner-2.jpg);">
                        <div class="content">
                            <h3 class="h5">Women's</h3>
                            <span>New Collection</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4">
                <a href="#">
                    <div class="item d-flex align-items-end" style="background-image: url(img/banner-3.jpg);">
                        <div class="content">
                            <h3 class="h5">Accessories</h3>
                            <span>Sale of 20%</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

{% schema %}
{
    "name": "Category Settings",
    "settings":[
     {
        "id":"category_header",
        "type":"text",
        "default":"Category Header",
        "label":"Category Header"
     },
     {
        "id":"category_text",
        "type":"text",
        "default":"Category Text",
        "label":"Category Text"
     }
    ]
}
{% endschema %}

まずはschemaを書いていきましょう。コードて言うと43行目〜６１行目です。

schemaを書くことによって管理者が扱うカスタマイズ項目を新しく作ることができます。

カテゴリタイトル・テキストカスタマイザー

次に、管理者が自由に変更した、タイトルやテキストが表示できるようにします。

静的なHTMLのタイトルとテキストが表示されている部分に出力タグを埋め込みます。

schema表示タグの説明

以下のコードで言うと６行目に２ヶ所、タイトルとテキストとして埋め込まれています。

<!-- Categories Section-->
<section class="categories">
    <div class="container">
        <header class="text-center">
            <h2 class="text-uppercase">
                <small>{{ section.settings.category_header }}</small>{{ section.settings.category_text }}</h2>
        </header>
        <div class="row text-left">
            <div class="col-lg-4">
                <a href="#">
                    <div class="item d-flex align-items-end" style="background-image: url(img/banner-1.jpg);">
                        <div class="content">
                            <h3 class="h5">Men's</h3>
                            <span>New Collection</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4">
                <a href="#">
                    <div class="item d-flex align-items-end" style="background-image: url(img/banner-2.jpg);">
                        <div class="content">
                            <h3 class="h5">Women's</h3>
                            <span>New Collection</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4">
                <a href="#">
                    <div class="item d-flex align-items-end" style="background-image: url(img/banner-3.jpg);">
                        <div class="content">
                            <h3 class="h5">Accessories</h3>
                            <span>Sale of 20%</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

これで、タイトルと、テキストが自由な文言にできるようになりました。

カテゴリ画像と、画像上のテキストを動的にする

画像とテキスト部分を動的にするので、表示部分は１ヶ所になり、繰り返し処理で３つまで表示できるようにします。

まずは全体像から把握しましょう。

<!-- Categories Section-->
{% assign section_size = section.blocks.size %}

{% if section_size == 1 %}
    {% assign column_size = "col-lg-12" %}
{% elsif section_size == 2 %}
    {% assign column_size = "col-lg-6" %}
{% else section_size == 3 %}
    {% assign column_size = "col-lg-4" %}
{% endif %}
<section class="categories">
    <div class="container">
        <header class="text-center">
            <h2 class="text-uppercase">
                <small>{{ section.settings.category_header }}</small>{{ section.settings.category_text }}</h2>
        </header>
        <div class="row text-left">
            {% for block in section.blocks %}
            <div class="{{column_size}}">
                <a href="{{ block.settings.banner_link }}">
                    <div class="item d-flex align-items-end" style="background-image: url({{block.settings.banner_image | img_url: 'master'}});">
                        <div class="content">
                            <h3 class="h5">{{ block.settings.banner_header_text }}</h3>
                            <span>{{ block.settings.banner_text }}</span>
                        </div>
                    </div>
                </a>
            </div>
            {% endfor %}

        </div>
    </div>
</section>


{% schema %}
{
    "name": "Category Settings",
    "settings":[
     {
        "id":"category_header",
        "type":"text",
        "default":"Category Header",
        "label":"Category Header"
     },
     {
        "id":"category_text",
        "type":"text",
        "default":"Category Text",
        "label":"Category Text"
     }
    ],
    "blocks": [
     {
        "type": "image",
        "name": "Banner",
        "settings": [
         {
            "id": "banner_image",
            "type": "image_picker",
            "label": "Banner Header Text"
         },
         {
            "id": "banner_text",
            "type": "text",
            "label": "Banner Text"
         },
         {
            "id": "banner_link",
            "type": "url",
            "label": "Banner Link"
         },
         {
            "id": "banner_header_text",
            "type": "text",
            "label": "Banner Text"
         }
        ]
     }
    ]
}
{% endschema %}

動的にするのに欠かせないのが、繰り返し処理のfor文です。

19行目から28行目は

{% for block in section.blocks %}

{% endfor %}

に囲まれているので、管理者がブロックを追加した分だけ繰り返し処理が実行されて

追加した分だけ画像とテキストが表示されます。

また、重要なのが2行目から10行目の部分です。

{% assign section_size = section.blocks.size %}

{% if section_size == 1 %}
    {% assign column_size = "col-lg-12" %}
{% elsif section_size == 2 %}
    {% assign column_size = "col-lg-6" %}
{% else section_size == 3 %}
    {% assign column_size = "col-lg-4" %}
{% endif %}

この部分は、まず１行目でブロックの追加された数は何個かを判断します。

もしブロックの数が1個だったらcol-lg-12の幅で画像を表示し

もしブロックの数が2個だったらcol-lg-6の幅で画像を表示し

もしブロックの数が3個だったらcol-lg-4の幅で画像を表示します。

ちなみにcol-lg-4はBootstrapの表記です。

次は、表示に関してですが動的表示が含まれるのは以下の部分です。

<div class="{{column_size}}">
    <a href="{{ block.settings.banner_link }}">
        <div class="item d-flex align-items-end" style="background-image: url({{block.settings.banner_image | img_url: 'master'}});">
            <div class="content">
                <h3 class="h5">{{ block.settings.banner_header_text }}</h3>
                <span>{{ block.settings.banner_text }}</span>
            </div>
        </div>
    </a>
</div>

1行目に条件分岐の末、導き出された、col-lg-12、col-lg-6、col-lg-4のどれかが動的に入ります。

そして２行目、{{ block.settings.banner_link }}

３行目{{block.settings.banner_image | img_url: ‘master’}}

５行目{{ block.settings.banner_header_text }}

６行目{{ block.settings.banner_text }}

に動的にテキストやURLが入ります。これは管理者が指定したテキストやURLが挿入されます。

まとめ

今回は、カテゴリセクションの作り方を例に挙げて、動的にどのように書けばできるのかを解説しました。

RELATED POST