Shopifyのメタオブジェクト

Cat WEBサイト構築Tag by cubismer
窓辺

少し試したことをメモとして。
便利ではあるものの分かりづらく面倒なところがあるという印象です。

参考情報

イメージ


shop
- metaobjects
-- metaobject
--- type.handle
--- type.handle
--- type.handle

上記のようにグローバルオブジェクトともいえるshopオブジェクト内に配置されているので、ストアのどこからでもアクセス可能です。

通常のメタフィールドとは違いmetaobjectsはmetaobjectを複数格納する前提なので、末尾にvaluesをつけてforで出力するか、対象のtypeとhandleを特定してアクセスする必要があります。

各metaobjectがエントリーに該当します。

各ページに設定する必要性

メタオブジェクトはliquidからの利用は便利ですが、テーマエディタの動的ソースなどに用いる場合は一手間かかります。

具体的には、以下の利用したい各部のメタフィールドに作成したメタオブジェクトを設定する必要があります。

  • Products
  • Variants
  • Collections
  • Customers
  • Orders
  • Companies
  • Company locations
  • Locations
  • Pages
  • Blogs
  • Blog posts
  • Markets

逆に言えば、liquidで使うだけならおそらくメタフィールドに登録する必要はないと思われます。

サンプル


[前提]
Type: foo (Settings>Custom dataのMetaobjectsで定義として追加)
Handle: bar (追加した定義にfieldとして追加)
Name(key?): baz (追加したfieldのName)
field type: Single line text

上記前提で以下のようになります。

typeのみを指定して出力


forで出力(valuesが必要)
{% for obj in shop.metaobjects.foo.values %}
  {{ obj.baz }}
{% endfor %}

出力順序変更

forを使うと古いエントリーの方から順に出力されます。
現時点(2024.4)ではエントリーの順序をドラッグ&ドロップで変更できないため、順番変更用のメタフィールドを追加しsortフィルターを使う必要があると思います。

ただし下記投稿のように数値でのソートはできないため、順番変更用のメタフィールドは「Single line text(単一行のテキスト)」など文字列が追加できるものを選ぶ必要があります。

また、sortフィルターを使用するには一旦変数に入れる必要もあり、まとめると以下のようになります。


順番設定用にSingle line textで"order"を追加した前提
{% assign metaobject_values = shop.metaobjects.foo.values %}
{% assign metaobject_values_array = metaobject_values | sort: 'order' %}
{% for obj in metaobject_values_array %}
  {{ obj.baz }}
{% endfor %}

type/handle/を指定して出力


直接type/handle/を指定して出力
{{ shop.metaobjects.foo.bar.baz.value }}

forで出力(valuesとvalueが必要)
{% for obj in shop.metaobjects.foo.bar.values %}
  {{ obj.baz.value }}
{% endfor %}

メタオブジェクトに対してpaginateが使用可能

上記を見て知りましたが、下記のようにpaginateでページングが可能です。


{% paginate shop.metaobjects.foo.bar.values by 5 %}
  {% for obj in shop.metaobjects.foo.bar.values %}
    {{ obj.baz.value }}
  {% endfor %}
  {{ paginate | default_pagination }}
{% endpaginate %}

{{ paginate | default_pagination }}で移動できる2ページ目以降には、URL末尾にパラメータが追加された状態となります。

このページングのためにJSやliquidを新たに用意する必要はなく、通常のcollectionで用いるような方法で利用できるようです。

なお、把握している範囲ではliquidのみで51以上のエントリーを取得する方法はpaginateタグを使うしかないようです。

この際の注意点としては、sortやwhereなどのフィルターを使うとページングが機能しなくなる点が挙げられます。

要件としてエントリー数が51以上の場合にも対応する場合は対応が難しくなり、個人的に案件で用いた方法としては擬似的な2次元配列を作ることで対応しました。

メタフィールドのlistタイプには使用できない

配列であるメタフィールドのlistタイプに対してpaginateを使用してもエラーになります。

結び

管理画面的には、Settings > Custom DataとContent > Metaobjectの両方から同じ画面(Settingsの方の画面)に到達するので、便利なようでわかりづらく感じました。
どちらからでも同じ画面に到達できることがわかれば混乱せずに済みますが、慣れないうちはUIが似た別の画面なのではと多少迷いました。

また、グローバルのままで各動的ソースに接続できないのは割と面倒ではあります。
メタフィールドの括りで考えると正しい流れだと思いますが、どこからでもアクセスできるはずのデータなのにと考えてしまいます。

とはいえ便利な仕組みであることは確かです。

3人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄