前回記事「Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃1」に引き続き今回もShopifyのテーマ制作で使えるコード例を見ていきます。ShopifyはLiquidというテンプレートエンジンが採用されており、商品やユーザーデータ、またブログなどのコンテンツ情報も専用のオブジェクトに格納されており、フロント側で簡単に取得することができます。今回はそのオブジェクトをつかったループ処理など動的にコンテンツを展開する商品情報を中心にまとめています。  

1. コレクション別の商品一覧表示（表示数指定で表示）

商品一覧については基本的にコレクション単位で管理されます。全商品もすべての商品を対象としたコレクションを指定します。コレクション別で商品を表示させるには、まずcollectionsオブジェクトからすべてのコレクションをループさせ、該当するコレクションの中でそのコレクションに登録された商品をループで表示させるという方法になります。

{% for collection in collections %}
  {% if collection.handle == '指定したコレクションのハンドル名' %}
    {% for product in collection.products limit: 12 %}
      <div>
        <img src="{{ product.featured_image | product_img_url : '400x400' }}" alt="">
        <h3>{{ product.title }}</h3>
        <a href="{{ product.url }}">商品詳細を見る</a>
      </div>
    {% endfor %}
  {% endif %}
{% endfor %}

  商品情報をループさせる時に「limit」パラメーターを指定することでループ回数の上限を設定することができます。指定した数の商品情報を設定する場合にはここで指定します。あとは商品情報はproductsオブジェクトに格納されているので、そこから商品画像や商品名などの情報を取得することができます。    

2. コレクション別の商品一覧表示（ページネーションで表示）

先ほどはあらかじめ商品数を決めた上で表示させる方法ですが、商品数が可変長の場合にはページネーションを配置したいケースもあります。そんな時には下記のように「paginate」タグを使うことでページネーションを簡単に出力させることができます。paginateタグには対象となる配列要素と、ページ繰りの単位となる数値を指定します。下記の場合ですと、コレクションに含まれる商品情報を24個ごとにページ繰りされるようページネーションが表示されるという感じですね。ループの部分をpaginateタグで囲んであげる必要があるので注意です。

{% for collection in collections %}
  {% if collection.handle == '指定したコレクションのハンドル名' %}
    {% paginate collection.products by 24 %}
      {% for product in collection.products %}
        <div>
          <img src="" alt="{{ product.featured_image | product_img_url : '400x400' }}"">
          <h3>{{ product.title }}</h3>
          <a href="{{ product.url }}">商品詳細を見る</a>
        </div>
      {% endfor %}
      {{- paginate | default_pagination }}
    {% endpaginate %}
  {% endif %}
{% endfor %}

  あとはpaginateタグで囲まれた範囲内にページネーションを表示させたい箇所に変数展開をすることでその場所にページネーションのHTMLが出力されるようになります。    

3. 商品一覧で価格やタグを表示

商品情報には商品名や商品写真のほか価格やタグなどの情報も含まれており、それらもあわせて表示させることができます。タグは複数設定できるので配列として格納されているためループで表示させる必要があります。

{% for collection in collections %}
  {% if collection.handle == '指定したコレクションのハンドル名' %}
    {% for product in collection.products %}
      <div>
        <img src="{{ product.featured_image | product_img_url : '400x400' }}" alt="">
        <h3>{{ product.title }}</h3>
        {% assign tax_excluded = product.price | divided_by: 1.1 %}
        <p>{{ tax_excluded | money_with_currency }}（税込{{ product.price | money_with_currency }}）</p>
        {% if product.tags %}
          <ul>
            {% for tag in product.tags %}
              <li>{{ tag }}</li>
            {% endfor %}
          </ul>
        {% endif %}
        <a href="{{ product.url }}">商品詳細を見る</a>
      </div>
    {% endfor %}
  {% endif %}
{% endfor %}

  商品価格については税抜きで表示したい時もあります、そんな時は計算用のフィルターをつかうと便利ですね。    

4. 商品詳細で商品メタフィールドの値を表示

商品情報にはメタフィールドを使うことでデフォルトで用意されている情報以外にもユーザー側で定義した情報を登録することができます。あらかじめメタフィールドを定義し、その時に設定したキーからメタフィールドの値を参照することができます。ちなみに下記の例では改行をbrタグとして出力させるフィルターを適用しています。

{% if product.metafields.custom.メタフィールドのキー名 %}
  <div>{{ product.metafields.custom.メタフィールドのキー名 | newline_to_br }}</div>
{% endif %}

   

5. 商品詳細でメタフィールドで定義した関連商品をリスト表示

ECサイトでよくある商品ページに関連商品を掲載する例になります。この関連商品もメタフィールドを用意し、そこに商品情報を登録すると簡単ですね。先ほどと同じようにメタフィールドを作成しますが、複数の値を持つメタフィールドの場合には値が配列型になっているので、ループですべての要素を展開してあげる必要があります。

{% if product.metafields.custom.関連商品メタフィールドのキー名.value %}
  <ul>
    {%- for product in product.metafields.custom.関連商品メタフィールドのキー名.value -%}
      <li>
        <img src="{{ product.featured_image | img_url : 'master' }}" alt="">
        <h3>{{ product.title }}</h3>
        <a href="{{ product.url }}">商品詳細を見る</a>
      </li>
    {% endfor %}
  </ul>
{% endif %}

  Shopifyのカスタマイズでも多いのはやはり商品情報周りではないでしょうか、基本的に商品情報は動的で出力されるところが多いと多いと思いますので、今回紹介したコードが使えると思いますのでぜひ参考にしてみてくださいね。   （あわせてどうぞ） Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃1