LoginSignup
14
8

More than 1 year has passed since last update.

@eijiSaito(eiji saito)in株式会社UnReact

【Shopify】liquidのオブジェクトについてまとめてみた (metafield, model, model_source)

Last updated at Posted at 2021-02-18

はじめに

この記事では、Liquidオブジェクトについて日本語訳したものです。

metafield、model、model_sourceのオブジェクトをまとめていきます。

こちらを参考にしました。

metafieldオブジェクト

metafieldオブジェクトの概要についてドキュメントからの引用です。

metafieldオブジェクトを使用すると、商品、コレクション、顧客、注文、ブログ、ページ、お店の追加情報を出力することが出来ます。
メタフィールドは、namespace、key、value、description (optional)、で構成されており、namespaceを使用することで、異なるメタフィールドをグループ化することが出来ます。

メタフィールドにはvalue_typeがあり、以下のいずれかになります。

  • integer（整数）
  • string（文字）
  • json_string

例えば、以下の表のようにメタフィールドを作成したとします。

Namespace Key Value
instructions Wash Cold
instructions Dry Tumble

メタフィールドは、以下に示すnamespace[key名が定義された変数]、namespace[key名]、instructions.key名の 3パターン で出力することが可能です。

{% assign instructions = product.metafields.instructions %}
{% assign key = 'Wash' %}
<ul>
  <li>Wash: {{ instructions[key] }}</li>
  <li>Wash: {{ instructions['Wash'] }}</li>
  <li>Wash: {{ instructions.Wash }}</li>
</ul>

Wash: Cold
Wash: Cold
Wash: Cold

2つ目のメタフィールドを出力するには、product.liquidで以下のようにkeyを指定します。

{% assign instructions = product.metafields.instructions %}
{% assign key = 'Dry' %}
<ul>
  <li>Dry: {{ instructions[key] }}</li>
  <li>Dry: {{ instructions['Dry'] }}</li>
  <li>Dry: {{ instructions.Dry }}</li>
</ul>

商品の中でinstructions（namespaceの値）が付けられたすべてのメタフィールドを出力する場合は、次例のようにすることができます。

メタフィールドのkeyは{{field | first}}で、valueは、{{field | last}}で出力することが出来ます。

<ul>
   {% for field in product.metafields.instructions %}
   <li>{{ field | first }}: {{ field | last }}</li>
   {% endfor %}
</ul>

Wash: Cold
Dry: Tumble

value_typeが、json_stringの場合、メタフィールドは反復可能なハッシュや配列に変換されます。

Storage instructions:
<ul>
  {% for key_value in product.metafields.instructions['storage'] %}
    <li>{{ key_value[0] }}: {{ key_value[1] }}</li>
  {% endfor %}
</ul>

Storage instructions:
min_temp: 0
max_temp: 50

Liquidでの使用例

メタフィールドを使用すると、商品ページに追加コンテンツを追加することも出来ます。

例1. タブや関連商品リンクの追加

{%- assign tabs = product.metafields.tabs -%}
<ul class="tabs">
    {% include 'product-description' %}
    {%- for field in tabs -%}
        <li><h2>{{ field | first }}</h2>{{ field | last }}</li>
    {%- endfor -%}
    {% include 'related-products' %}
</ul>

例2. 条件分岐

例では、商品に洗濯の指示があるかどうかをチェックして、その指示を表示することが出来ます。

{% unless product.metafields.Acme134-instructions.Wash == blank %}
Wash: {{ product.metafields.Acme134-instructions.Wash }}
{% endunless %}

例3. 商品属性の保存

メタフィールドを作成して、商品の色を保存して、商品ページの背景を同じ色に設定することが出来ます。

{%- if product.metafields.style.colour != blank -%}
  {%- assign mColour = product.metafields.style.colour -%}
  <style>
      .add-to-cart {
        background: {{ mColour }}
      }
  </style>
{%- endif -%}

例4. 在庫の追跡

配送時間、パックオーダーの日付、チェックアウトページの販売数を表示することが出来ます。

{% if backorder != blank %}<div>This item is backordered, and will ship in {{ backorder }}</div>{% endif %}

<div class="stock-sold-bar">
<span data-start="{{ startCount }}" data-stock="{{ currentCount }}" data-percent="{{ soldPercent }}"></span>
</div>

例5. 複数在庫の追跡

商品がどこの在庫にあるのかを追跡することが出来ます。

{%- assign locations = product.metafields.locations -%}
{%- assign items = locations | split: ';' -%}
<ul class="store-location">
    {%- for item in items -%}
        {% assign stock = item | split:',' %}
        <li>{{ stock | first }}: {{ stock | last }}</li>
    {%- endfor -%}
</ul>

例6. 商品のグループ化

{%- assign r = product.metafields.related.items | split:"," -%}
<div class="related-products">
    {%- for p in r -%}
        {% assign relatedProduct = all_products[p] %}
        {%- include 'some-snippet' product: relatedProduct -%}
    {%- endfor -%}
</div>

例7. 商品の入れ子化

{%- assign cParent = product.metafields.col.parent -%}
{%- assign cChild = product.metafields.col.child -%}
<div>
    {%- if collections[cChild].products.size > 0 -%}
       {%- include 'collection-loop' with collections[cChild] -%}
    {%- endif -%}
</div>

例8. SEOデータの保存

商品ページに、noindexとnofollowのメタタグを追加するには、以下の属性を持つオブジェクトのメタフィールドを作成します。

"namespace" : "seo"
"key" : "hidden"
"value" : 1
"value_type" : "integer"

Shopfiy ADMIN API

以下のリソースで、メタフィールドを変更することが出来ます。

#{id}は、一意の値が入ります。

Type of resource Location of metafields
Article /admin/blogs/#{id}/articles/#{id}/metafields.json
Blog /admin/blogs/#{id}/metafields.json
CustomCollection and SmartCollection /admin/collections/#{id}/metafields.json
Customer /admin/customers/#{id}/metafields.json
Draft Order /admin/draft_orders/#{id}/metafields.json
Order /admin/orders/#{id}/metafields.json
Page /admin/pages/#{id}/metafields.json
Product /admin/products/#{id}/metafields.json
Product Variant /admin/products/#{id}/variants/#{id}/metafields.json
Product image /admin/metafields.json?metafield[owner_id]=#{id}&metafield[owner_resource]=product_image

上のエンドポイントを使用すると商品画像のメタフィールドを表示できます。商品画像のメタフィールを追加または変更するには、商品画像エンドポイントを使用できます。
Shop /admin/metafields.json


また、Shopify APIでは、以下の方法でメタフィールドを作成したり、更新したりすることができます。

  • GET /admin/api/2021-01/metafields.json：リソースに属するメタフィールドのリストを取得します。

  • GET /admin/api/2021-01/metafields.json*?metafield[owner_id]=850703190&metafield[owner_resource]=product_image*：商品画像のリソースに関するメタフィールドのリストを取得します。

  • GET /admin/api/2021-01/metafields/count.json：リソースのメタフィールドの数を取得します。

  • GET /admin/api/2021-01/metafields/{metafield_id}.json：単一のメタフィールドをIDで返します。

  • POST /admin/api/2021-01/metafields.json：新しいメタフィールドを作成します。

  • PUT /admin/api/2021-01/metafields/{metafield_id}.json：メタフィールドを更新します。

  • DELETE /admin/api/2021-01/metafields/{metafield_id}.json：メタフィールドをIDで削除します。

メタフィールドで使用できるプロパティーは以下の10種類です。

properties 説明
created_at "created_at"："2012-03-13T16:09:54-04:00"
メタフィールドが作成された日時（ISO 8601 format）
updated_at "updated_at"："2012-08-24T14:02:15-04:00"
メタフィールドが最後に更新された日時（ISO 8601 format）
description "description"：null
メタフィールドに含まれる情報の説明
id "id"：915396206
メタフィールドの一意のID
key "key"："warehouse"　
メタフィールドの名前（3-30文字）
namespace "namespace"："inventory"
メタフィールドのセットのためのコンテナ
他のアプリで使用されるメタフィールドと区別するために、メタフィールド用のカスタム名前空間を定義する必要があります（2-20文字）
owner_id "owner_id"：690933842
メタフィールドがアタッチされているリソースの一意のID
owner_resource "owner_resource"："product"
メタフィールドがアタッチしているリソースの種類
value "value"：25
メタデータとして格納する情報（最大長512文字：メタフィールドのnamespaceがtags、keyがaltと等しい場合）

valueの最大長は以下のvalue_typeによって異なります。

・string（文字）の場合：最大5,000,000文字
・integer（整数）の場合：最大100.000文字
・json_stringの場合：最大1000.000文字
value_type "value_type"："integer"
メタフィールドの情報のタイプ：string、integer、json_string

modelオブジェクト

modelオブジェクトの概要についてドキュメントからの引用です。

modelオブジェクトには、Shopify管理画面の商品詳細ページからアップロードされた3Dモデル（3D画像）の情報が入っています。
modelオブジェクトは、productオブジェクトのmedia属性からアクセスできます。

modelオブジェクトの属性について見ていきます。

model.alt

Shopify管理画面の商品詳細ページに設定されている3Dモデルのaltタグを返します。

model.id

3Dモデルのmedia_idを返します。

model.media_type

オブジェクト（model）のタイプを返します。

productオブジェクトの media 配列をフィルタリングすることができます。

{% assign models = product.media | where: "media_type", "model" %}

{% for model in models %}
  {{ model.alt }}
{% endfor %}

Model of the black stroller
Model of the grey stroller

model.position

productオブジェクトのメディア配列内でmodelのインデックス番号を返します。

model.preview_image

3Dモデルのプレビュー画像を返します。

model.sources

model_sourceオブジェクトの配列を返します。

model_sourceオブジェクトについては、次で解説します。

model_sourceオブジェクト

model_sourceオブジェクトの概要についてドキュメントからの引用です。

model_sourceオブジェクトには、商品の3Dモデルのソースファイルに関する情報が格納されています。
ソールファイルには、URLやフォーマットなどの情報が入っています。
model_sourceオブジェクトはモデルオブジェクトのsource配列からアクセスできます。

model_source.mime_type

モデルソースファイルのMIMEタイプ（ audio/webmやvideo/ogg等 ）を返します。

MIMEタイプとは、Multipurpose Internet Mail Extensionsのことで、メディアタイプとも呼ばれます。

文章やファイルの形式などを示す標準のことです。

model_source.format

モデルソースファイルのフォーマット（ JPEGやPNG等 ）を返します。

model_source.url

モデルソースファイルのURLを返します。

終わりに

今回の記事はここまでになります。

お疲れさまでした。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

14
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
8