【Shopify Liquid】メタフィールド「商品のリスト」を使ってブログに関連する商品を表示する | 株式会社エンタースクウェア

メタフィールドを利用して、ブログ記事の下に記事に関連する商品を掲載します。

一つの記事ごとに、一つずつ商品を設定するので、商品数が多い場合はあまり推奨しません。

初めに、商品のメタフィールドを作成する

設定 > メタフィールド > ブログ記事 で商品を入れるメタフィールドを作成します。

名前、ネームスペースとキーは分かりやすい名前をつけて、「コンテンツタイプ」を「商品」、さらに「商品のリスト」を選択します。

作成したブログ記事のメタフィールドで商品を選択する

次に、先ほど作成したメタフィールドに商品を設定していきます。

オンラインストア > ブログ記事 で、新規作成または編集をすると編集ページの下にメタフィールドができています。

それをクリックし、掲載したい商品を選択します。

メタフィールドで選択した商品を表示する「セクション」を作成する

最後に、メタフィールドで設定した商品を表示する「セクション」を作ります。

オンラインストア > テーマ > アクション > コードを編集 を開きます。

「コードを編集」を開くと、ファイルとエディタが表示されます。

Shopifyのテーマの基本的構造はこの画像の通りです↓（Shopify Plusは分かりません）

この「セクション」ディレクトリを開いて、「新しいセクションを追加する」をクリックして、新しいセクションを追加します。

ファイル名はなんでも良いですが、分かりやすい名前が良いです。

セクション作成の基本、shemaの設定

セクションを「カスタム」で利用するために、schemaを設定します。

{% schema %}
  {
    "name": "Section name",
    "settings": [],
    "presets": [
    {
      "name": "Section name"
    }
  }
{% endschema %}

ここでは基本的はschemaだけを記載しています。

“Section name”はセクション名を記載します。

HTMLの実装

次に、htmlを入れて行きます。schemaの上にどんどん追記をしていくイメージです。

CSSは「アセット」ディレクトリ内で既存のCSSファイルを編集するか、新しく作って入れます。

もしくはこのセクションファイルの中でも可能です。

<article>
 <img src="サムネイルパス" alt="">
 <h2>ブログ記事タイトル</h2>
</article>

{% schema %}
 .....
{% endschema %}

Liquidの実装

最後に動的にブログ記事を入れたいので、Liquidを使って実装します。

{%- assign recommend_articles = article.metafields.custom.recommend_products -%}
{%-  if recommend_products != blank -%}
     {%- for product in recommend_products.value  -%}
    <article>
        <a href="{{ product.url }}">
            <img src="{{ product.featured_media | image_url: width: 165 }} " alt="">
            <h2>{{ product.title }}</h2>
        </a>
    </article>
    {%- endif -%}
{%- endif -%}

{% schema %}
 .....
{% endschema %}

最初に「reccomend_articles」という変数に、管理画面の商品詳細でメタフィールドで設定した商品リストを取得しています。

次のif文で、商品リストが設定された場合だけ表示するよう分岐します。

次に、商品リストをfor文で回します。変数recommend_productsに「.value」をつけています。

あとは表示したいタイトル名を表示したりしています。

<article>~</article>の箇所は、元々テーマにあるスニペットを読み込むのも可能です。

これで作業は完成です。