Knowledge Diary

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

Published: Updated:

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

こんにちは、Webデザイナーの 夢拓(MUHIRO)です。

Shopifyのメタオブジェクトは、「エントリーをウェブページとして公開する」をオンにすることでエントリーを下層ページとして公開することができます。
当サイトのWeb制作現場で使う用語集ページもこの機能を使用して作成しています!

この記事では、メタオブジェクトのエントリーをページとして実装する際のLiquidのカスタマイズ方法を紹介します。

この記事はこんな方におすすめ!

  • Shopifyのストアフロント開発をする方

この記事を通して、メタオブジェクトのエントリーを下層ページ化する際のLiquidカスタマイズ方法が学べ、Shopifyをさらに活用できるようになります。

それでは、どうぞ!

Index

CloseOpen

メタオブジェクトとは?

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 }}

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

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

関連記事 Related articles

免責事項

  • 当ブログでは、執筆者の経験に基づいた技術情報や知識を提供していますが、その正確性や普遍性を保証するものではありません。情報は執筆時点のものであり、技術の進展により古くなる可能性があります。これらの情報を利用する際は、自己責任で行ってください。必要に応じて専門家の助言を求めることをお勧めします。
  • 当ブログで提供するプログラムコードは、執筆者の最善の知識に基づいていますが、その正確性や完全性を保証するものではありません。コードの利用や実行により生じた損害や問題については、一切の責任を負いかねます。コードの使用は、自己責任で行ってください。
  • 当サイトで使用しているスクリーンショット画像について、著作権はサイトの権利者に帰属します。掲載に不都合がある場合、お手数ですがお問い合わせフォームよりご連絡ください。
  • 当サイトからリンクよって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いかねますのでご了承ください。
  • 当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。