見出し画像

【Shopify】九十九悪嵐のうぇぶでざいんびぼうろく。〜カスタムフィールドを作ってみる編〜

悪嵐

※使用テーマは『Dawn』

アプリでカスタムフィールドを作ろうという記事を作成、投稿してから一ヶ月も経ってないのに、もうブログとかページとかにカスタムフィールドが作れるようになってる…早い、早すぎる…。

ということで、メタフィールドでカスタムフィールドを作ります。とはいえ、あまりにも簡単すぎるのでスクショは省略します。

1.カスタムフィールドを作成する

1-1.『設定』にある『メタフィールド』を選択する

1-2.カスタムフィールドを追加したいタイプを選択する

例)
ブログ記事

1-3.『名前』、『ネームスペースとキー』、『説明』、『コンテンツタイプ』を設定する

例)
名前:おすすめ商品
ネームスペースとキー:articles_field.pickup_product
説明:おすすめ商品を設定します
コンテンツタイプ:リファレンス→商品
※複数選択可能なフィールドにする場合は、『値のリストを承認する』チェックボックスにチェックを入れる

1-4.保存する

2.カスタムフィールドを設定する

2-1.販売チャネルからブログ記事を選択し、カスタムフィールドを設定したいブログ記事を選択する

2-2.メタフィールドの『すべて表示』を選択する

2-3.商品を選択する

例)
・某文房具メーカーのボールペン
・某文房具メーカーの蛍光マーカーペン

2-4.保存する

3.カスタムフィールドで設定した値を出力する

今回はブログ記事に『おすすめ商品』というカスタムフィールドを出力させるので、用意するものは以下の通りです。

・ja.schema.json(多言語対応用。『Locales』ディレクトリにある)
・main-article.liquid(カスタムフィールドの値出力用。『Sections』ディレクトリにある)
・section-blog-post.css(デザイン調整用1。『Assets』ディレクトリにある)
・component-custom-field.css(デザイン調整用2。元々このCSSファイルはテーマには存在しないので、『Assets』ディレクトリにて新規で作成する必要があります。面倒だったら作成せず、<style>タグに直接記述するという手もあります)

3-1.『販売チャネル』から『オンラインストア』を選択し、『テーマ』を選択する

3-2.『現在のテーマ』の『アクション』から『コードを編集する』を選択する

3-3.『Locales』から『ja.schema.json』を選択する

3-4.『ja.schema.json』の"main-article"に以下の内容を記述する

        "product_buy": {
          "name": "商品購入ボタン",
          "settings": {
            "heading": {
              "label": "見出し"
            },
            "button_label": {
              "label": "ボタンのラベル"
            }
          }
        }

3-5.『Sections』から『main-article.liquid』を選択する

3-6.『main.articles.liquid』に以下の内容を記述する

※『~~ 省略 ~~』はその名の通り省略しているだけなので、『~~ 省略 ~~』は記述しないでください

~~ 省略 ~~

{%- when 'product_buy' -%}
  <div class="article-template__product_buy page-width page-width--narrow article-product_buy"
    <h2 class="h2">{{ block.settings.product_buy_heading }}</h2>
    <ul class="product_buy_list">
      {% assign metafields = article.metafields.article_fields.products %}
      {%- for metafield in metafields.value -%}
        <li class="product_buy_item">
          <p class="product_buy_item_image">
            {%- if metafield.featured_image != blank -%}
              <img src="{{ metafield.featured_image | img_url: 'master' }}" alt="{% if metafield.featured_image.alt != blank %}{{ metafield.featured_image.alt }}{% else %}{{ metafield.title }}{% endif %}">
            {%- else -%}
              <img src="https://placehold.jp/150x150.png" alt="{{ metafield.title }}">
            {%- endif -%}
          </p>
          <p class="product_buy_item_title">{{ metafield.title }}</p>
          <p class="product_buy_item_button_wrap">
            {{ block.settings.product_buy_button_label | link_to: metafield.url }}
          </p>
        </li>
      {%- endfor -%}
    </ul>
  </div>

{%- when 'content' -%}
~~ 省略 ~~

{% schema %}
{
~~ 省略 ~~
    {
      "type": "product_buy",
      "name": "t:sections.main-article.blocks.product_buy.name",
      "settings": [
        {
          "type": "text",
          "id": "product_buy_heading",
          "label": "t:sections.main-article.blocks.product_buy.settings.heading.label",
          "default": "見出し"
        },
        {
          "type": "text",
          "id": "product_buy_button_label",
          "label": "t:sections.main-article.blocks.product_buy.settings.button_label.label",
          "default": "ボタンのラベル"
        }
      ] 
    }
~~ 省略 ~~

3-7.『section-blog-post.css』や『component-custom-field.css』でスタイルを整える


これで完成です!

ここまでお付き合いいただき、ありがとうございました!
お疲れ様でした~。

4.コード解説

3-6のコードの解説だけします。他のところの解説もしてほしいという方がいらっしゃいましたら、コメントしてください。

  <div class="article-template__product_buy page-width page-width--narrow article-product_buy"
    <h2 class="h2">{{ block.settings.product_buy_heading }}</h2>
    ~~ 諸略 ~~
  </div>

他のデザインと合わせつつ、セクションのブロックで設定した見出しを出力するようにしています。

    <ul class="product_buy_list">
      ~~ 省略 ~~
    </ul>

おすすめ商品をリスト化するために<ul>タグを使用していますが、別に<div>タグでもいいと思います。その場合、下は<li>タグではなく、別のHTMLタグを使用する必要があるので気を付けてください。

      {% assign metafields = article.metafields.article_fields.products %}

metafieldsという変数を用意し、その変数に1で作成したカスタムフィールドの情報を格納しています。

      {%- for metafield in metafields.value -%}
        <li class="product_buy_item">
          <p class="product_buy_item_image">
            {%- if metafield.featured_image != blank -%}
              <img src="{{ metafield.featured_image | img_url: 'master' }}" alt="{% if metafield.featured_image.alt != blank %}{{ metafield.featured_image.alt }}{% else %}{{ metafield.title }}{% endif %}">
            {%- else -%}
              <img src="https://placehold.jp/150x150.png" alt="{{ metafield.title }}">
            {%- endif -%}
          </p>
          <p class="product_buy_item_title">{{ metafield.title }}</p>
          <p class="product_buy_item_button_wrap">
            {{ block.settings.product_buy_button_label | link_to: metafield.url }}
          </p>
        </li>
      {%- endfor -%}

カスタムフィールドの情報をループしながら取得しています。
metafieldという変数ですが、実際はproductオブジェクトです(ややこしい)。
なので、titleやfeatured_image、urlなどが使えます。

参考サイト


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
悪嵐
『悪嵐』と書いて『あらん』と読みます。絵を描いたり、小説を書いたり、想像に集中したりするのが大好きです。一人称は『僕』ですが、生物学上は女だと判断されました。