【Shopify】メタオブジェクトのエントリーを下層ページにした際のLiquidカスタマイズ方法を紹介！

メタオブジェクトとは？

2023年1月にアーリーアクセスされたShopifyの機能です。
メタオブジェクトは、カスタムデータを構造化して保存・管理するための機能です。
製品、コレクション、顧客など、様々なリソースに関連付けて追加情報を保存できます。メタオブジェクトは、フィールドと呼ばれる複数の属性で構成され、テキスト、画像、日付など様々なデータ型をサポートしています。

管理画面から簡単に作成・編集でき、オンラインストアのテーマやAPIを通じてアクセスできます。
これにより、製品仕様、サイズ表、FAQなど、構造化されたカスタムコンテンツを柔軟に作成し、ストアフロントに表示することが可能になります。

メタオブジェクトのエントリーを下層ページにした際のLiquidカスタマイス

こちらの解説ではどのファイルに記述するなどは省略しております。Liquidの記述方法のみの解説となります。

request.page_type

"request.page_type”は「metaobject」を返します。

request.page_typeとは

ShopifyのLiquidテンプレート言語で使用できるrequestオブジェクトのひとつで、現在表示されているページのタイプを返すLiquid変数です。
これにより、開発者は特定のページタイプに応じて異なるコンテンツや機能を表示させることができます。

全ページ共通コードの「layout/theme.liquid」でよく使用します。

metaobjectオブジェクトでページの情報を取得する

metaobjectオブジェクトにはエントリーの情報が格納されています。

metaobjectオブジェクトとは

ShopifyのLiquidテンプレート言語で使用できるmetaobjectオブジェクトは、Liquidテンプレート内でカスタムデータ構造にアクセスするための機能です。
このオブジェクトを使用することで、開発者は複雑な構造化データを作成し、オンラインストアで表示できます。

metaobjectは複数のフィールドを持ち、製品やコレクションなどのShopifyリソースに関連付けることができます。
Liquid内では、metaobjectの各フィールドにアクセスして値を取得し、動的にコンテンツを生成できます。

★・・・metaobject_systemプロパティで取得します。

エントリーハンドルを取得

    {{ metaobject.system.handle }}　★

エントリータイトル（ページタイトル）を取得

    {{ metaobject.title }}

エントリーページURLを取得

    {{ metaobject.system.handle }}　★

エントリーIDを取得

    {{ metaobject.system.id }}　★

メタオブジェクト定義のタイプ（ハンドル）を取得

    {{ metaobject.system.type }}　★

request.pathを使って定義ハンドルとエントリーハンドルを取得する

request.pathとは

ShopifyのLiquidテンプレート言語で使用できるrequestオブジェクトのひとつで、現在のページへのパス（URLのドメイン名以降の部分）を返します。
例えば、URLが「https://example.com/collections/all」の場合、“request.path”は「/collections/all」を返します。

“request.path”は既存のページへのURLのみを返すため、存在しないURLの場合は空の文字列を返す可能性があります。

metaobjectオブジェクトを使用せず取得する方法です。

    {%- assign metaobject_info = request.path | split: '/' -%}
    {%- assign metaobject_dl_handle = metaobject_info[2] -%} // 定義ハンドル
    {%- assign metaobject_entry_handle = metaobject_info[3] -%} // エントリーハンドル

”request.path”からページのパスを取得し、splitフィルターを使用して「/」を基準に配列に変換します。
こうすることで、配列の2番目と3番目の要素をそれぞれ定義ハンドルとエントリーハンドルとして取得できます。

request.pathを配列にする際の注意点

”metaobject_info”を出力すると「pages 定義ハンドル エントリーハンドル」のような形で出力されます。
そのため、定義ハンドルを取得使用する場合、インデックス1を指定しそうになります。

”request.path”は常に先頭にスラッシュ（/）を含むパス文字列を返します。
これをsplitフィルダーで分割すると、最初の要素（インデックス0）は空の文字列になります。
これは、先頭のスラッシュの直後から実際のパス要素が始まるためです。

この仕様はURLの絶対パス構造を反映しており、Shopifyのシステムで一貫性のあるパス処理を可能にしています。開発者はこの特性を理解し、適切にパス要素にアクセスすることが重要です。

フィールドの情報をストアフロントに表示する

metaobjectオブジェクトを使用してストアフロントに表示をします。

    {{ metaobject.フィールドのキー }}
    {{ metaobject.フィールドのキー.value }}

メタオブジェクトの出力方法についての詳しい解説

以下の記事で詳しく解説しています。