Shopifyで動的な販売元一覧を画像付きで出力する方法

ショップによっては回遊性の為であったり、SEOの為であったりとブランドやメーカーの一覧ページを設けたいところ。

しかし、Shopifyのデフォルト機能ではページにHTMLを書き込んで、静的に構築するしか方法はありません。

今回ご紹介するのは、動的に販売元一覧を出力する方法とその応用です。

まずは、もっとも簡単な出力方法がこちら。

<ul>
{% for product_vendor in shop.vendors %}
	<li>{{ product_vendor | link_to_vendor }}</li>
{% endfor %}
</ul>

登録されている販売元(Vendor)の一覧を出力するLiquidコードで、以下の様に出力されます。

<ul>
	<li><a href="/collections/vendors?q=販売元名1">販売元名1</a></li>
	<li><a href="/collections/vendors?q=販売元名2">販売元名2</a></li>
	<li><a href="/collections/vendors?q=販売元名3">販売元名3</a></li>
</ul>

新たなページテンプレートを設けて上記のLiquidコードを貼り付ければ、販売元リンクがリスト形式で出力されます。

ただ、この方法だと販売元の名前とリンク先しか出力されませんね。
ブランド一覧ページとして表示させたいなら、ブランドロゴなども出力させたいところですが、現在の仕様では販売元を編集する機能がない為、これ以上の情報は出力できません。

そこで本題っ!

タイトルにある通り、画像付きで販売元を出力できる一覧ページを作る方法をご紹介します。
今回も「Dawn(ドーン)」ベースで紹介していきますが、他テーマでもだいたい同様の手順となります。

1. 販売元のコレクションを作成

まずは「コレクションを作成する」より、以下の手順で各販売元(ブランド)のコレクションを作成してください。

  1. タイトルを登録されている販売元と同名で記載
  2. 条件を「商品の販売元+が右と一致+販売元名
  3. コレクションの画像にブランドロゴ等を登録
  4. 保存

ハンドルは管理しやすいよう、ご自由に設定してください。

2. 販売元一覧を出力するセクションを作成

新しいsectionを追加する」より、「brand-list.liquid」を作成し、以下のコードを貼り付けます。

<div class="page-width page-width--narrow">
  <ul class="brand-link-list">
    {% for collection in collections %}
    {% for product_vendor in shop.vendors %}
    {% if collection.title == product_vendor %}
    <li class="brand">
      <a href="{{ collection.url }}" class="brand-link">
        <figure class="brand-logo">
          <img src="{{ collection.image | img_url: 'small' }}" alt="{{ collection.title }}" class="brand-logo-image">
          <figcaption class="brand-name">{{ collection.title }}</figcaption>
        </figure>
      </a>
    </li>
    {% endif %}
    {% endfor %}
    {% endfor -%}
  </ul>
</div>

{% schema %}
  {
    "name": "ブランド一覧",
	"tag": "section",
	"class": "page-section"
  }
{% endschema %}

仕組みを順に説明しますと、{% for collection in collections %}でショップ内に登録されている全コレクションを出力し、{% for product_vendor in shop.vendors %}ショップ内に登録されている全販売元を出力します。

次に{% if collection.title == product_vendor %}でコレクション名と販売元名が一致したら、HTMLを出力させるという分岐条件を設定します。

HTML構造やクラス名、画像サイズなどは、環境に合わせて編集してください。
また、CSS設定もここでは紹介しませんので、ご自由にデザインしてください。

3. ページテンプレートを作成

新しいtemplateを追加する」より、「page.brand-list.json」を作成し、以下のコードを貼り付けます。

{
  "sections": {
    "main": {
      "type": "main-page",
      "settings": {
      }
    },
    "brand": {
      "type": "brand-list",
      "settings": {
      }
    }
  },
  "order": [
    "main",
    "brand"
  ]
}

これはDawnのJSONテンプレートの例ですが、テーマが従来のLiquidテンプレートの場合は、page.brand-list.liquid」を作成。
page.liquid」のソースをコピペし、最下部に{% section 'brand-list %}を入れてください。

4. ページを作成

ページを追加」よりブランド一覧ページを作成します。

タイトルやハンドルを入力し、テーマテンプレートを「brand-list」に設定し保存すればブランド一覧ページの完成です。
後はページを確認し、HTMLやCSSを調整してください。

Ex. ブランドの並び順を編集したい場合

今回紹介した方法であれば、ブランドロゴも出力できるブランド一覧ページが作成できますが、恐らくはA→Z順となります。

順番を任意で並べ替えたい場合は「メニュー機能」を使った方法がオススメです。
brand-list.liquid」の内容を以下の様にしてください。

{%- assign menu = linklists[section.settings.brand_link_list] -%}

<div class="page-width page-width--narrow">
  <div class="brand-link-wrap">
    <ul class="brand-link-list">
      {% for link in menu.links -%}
      <li class="brand">
        <a href="{{ link.url }}" class="brand-link">
          <figure class="brand-logo">
            <img src="{{ link.object.image | img_url: 'small' }}" alt="{{ link.title }}" class="brand-logo-image">
            <figcaption class="brand-name">{{ link.title }}</figcaption>
          </figure>
        </a>
      </li>
      {% endfor -%}
    </ul>
  </div>
</div>

{% schema %}
  {
    "name": "ブランド一覧",
	"tag": "section",
	"class": "page-section",
    "settings": [
		{
          "type": "link_list",
          "id": "brand_link_list",
          "label": "メニューを選択"
        }
	]
  }
{% endschema %}

各ブランドのコレクションを登録したメニューを作成しカスタマイザーにて設定すれば、メニュー順通りにブランド一覧が出力されます。

Ex. 商品ページにロゴを出力させたい場合

こちらも同様の処理で以下のコードで出力可能です。

{% for collection in collections %}
{% if collection.title == product.vendor %}
<a href="/collections/vendors?q={{ product.vendor | url_encode }}">
  <img src="{{ collection.image | img_url: 'thumbnail' }}" alt="{{ collection.title }}">
</a>
{% endif %}
{% endfor %}

商品ページでは全販売元を出力する必要がない為、{% if collection.title == product.vendor %}でコレクションの中に商品ページの販売元と一致するタイトルがあれば、該当のコレクション画像が表示される仕組みとなっております。

ご注目いただきたいのがリンク先です。

先述のbrand-list.liquid」では{{ collection.url }}をリンク先としており、1で作成した「/collections/ハンドル」といったリンク先となります。

一般的なテーマで使用されている販売元及びそのリンク先は、{{ product.vendor | link_to_vendor }}で出力されておりリンクは「/collections/vendors?q=販売元名」という仕様です。

どちらを利用しても構わないのですが、混乱を避けるため統一させた方が良いと思うので、上記の「/collections/vendors?q={{ product.vendor | url_encode }}」としております。

また、「brand-list.liquid」のリンクにこれを採用する場合は、<a>タグを以下の仕様にしてください。

<a href="/collections/vendors?q={{ collection.title | url_encode }}" class="brand-link">

ちなみに、Dawnテーマは仕様上{{ product.vendor | link_to_vendor }}が利用できないので、該当の箇所を上記と同様の<a>タグで囲うことで、リンク付きの販売元が表示されますよ。

以上!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です