OS 3.0 テーマエディターでの動的ソース(メタフィールド)の設定方法
動的ソース(メタフィールド)を使用すると、手動で入力した静的コンテンツの代わりに、ストアのリアルタイムデータをストアフロントに表示できます。パーツを動的ソースに接続することで、商品特徴やカテゴリタグなどの固有の詳細情報がストア全体で一貫して最新の状態に保たれます。現在、この機能は主に商品およびカテゴリリソースのメタフィールドをサポートしています。
このガイドでは、メタフィールドの定義方法、3つの動的データ取得の次元の理解、およびよくある設定問題のFAQによる解決方法について説明します。
| 注:メタフィールドとメタオブジェクトは、補完的な2つの動的ソースタイプです。このガイドは、商品やカテゴリなど特定のリソースに付随するカスタム属性であるメタフィールドを扱います。ストアレベルで再利用可能なデータ履歴であるメタオブジェクトについては、「OS 3.0 テーマエディターでのメタオブジェクトの接続」をご参照ください。 |
設定前のメタフィールドの作成
動的コンテンツを表示する前に、カスタムデータフィールド(メタフィールド)を定義し、商品やカテゴリに値を割り当てる必要があります。
- SHOPLINE管理画面で、設定 > カスタマイズデータに移動します。
- 作成したいリソースタイプ(例:商品またはカテゴリ)を選択します。
-
フィールドを追加をクリックして新しいフィールドを作成します。
- 特定のアイテム(例:商品ページ)に移動し、メタフィールドセクションでそのアイテムの必須フィールドを入力します。次に、追加をクリックして設定を保存します。
| 注:メタフィールドの作成および管理の詳細なガイドについては、「メタフィールドでストアコンテンツをカスタマイズする」をご参照ください。 |
3つの動的ソースの次元の説明
OS 3.0 エディターは3つのデータ取得の次元を提供します。それらのロジックを理解することで、異なるページで正確にコンテンツを表示できます:
テンプレートリソース(現在のページ)
- 仕組み: これは、顧客が現在訪れている「URL」に完全に依存する固定データロジックです。
- 最適な用途: 商品詳細ページやカテゴリページの固定位置に最適です。
- 効果: 顧客が商品Aを訪れると、システムはURLを識別し、商品Aのメタフィールドにロックします。「現在の商品」に連携されたブロックは、そのページ固有のデータを自動的に取得します。
コンポーネントレベルのリソース(現在のコンポーネント)
- 仕組み: これは「コンポーネント自体」の設定に基づいており、配置されているページには依存しません。コンポーネントレベルで割り当てられたデータをサブモジュールが読み取ります。
- 最適な用途: 「注目商品」など、どのページにも配置可能な独立したセクション(例:トップページ)に最適です。
- 効果: まずセクションのトップレベルでリソース(例:「サマーセール」カテゴリの選択)を手動で連携する必要があります。連携後、「現在のコンポーネント」に設定されたサブモジュールは、その特定のカテゴリから正確にデータを取得します。
最も近いリソース
- 仕組み: これは「上方向検索」ロジックを使用します。ブロックは現在の位置から始まり、ページ構造を上に向かって検索し、最も近い利用可能なデータソースを見つけて適用します。
- 最適な用途: 商品リストや検索結果ページに最適です。
- 効果: リスト内の個々のカードが「単一商品」データを識別できない問題を解決します。カード内の任意の要素(例:タイトル、画像)が「最も近いリソース」に設定されていると、そのループ内でそのカードに割り当てられた特定の商品データに自動的に一致します。
「最も近いリソース」の理解と使用方法
最も近いリソースの仕組みは、自動レイアウトにおける画期的な機能です。繰り返しリスト内の個々のブロック(商品カードなど)が「上方向を見て」そのアイテムに関連する特定のデータを見つけることを可能にします。
なぜ最も近いリソースを使うのか
- 自動化: 商品カードの各カードに手動でデータを割り当てる必要がなくなります。
- 詳細な表示: リストや検索結果の中で、商品カードに特定のアイテム特性(例:アルコール度数や生地の種類)を直接表示できます。
最も近いリソースの設定方法
- OS 3.0 テーマエディターで、商品一覧があるページ(例:カテゴリページ)に移動します。
- 商品テンプレート内のブロックを選択します(例:商品説明ブロック)。
-
コンテンツ入力欄の隣にある動的ソースを追加アイコンをクリックします。
-
現在のパーツセクションの下にある最も近い商品を選択します。
- 表示したい特定のメタフィールドを選択し、保存をクリックします。
ユースケース:商品一覧と独立したパーツ
適切なソースの次元は、パーツの配置場所によって異なります:
シナリオ 1:商品一覧ページ
カテゴリページや検索結果ページの商品のカードを扱う場合は、最も近いリソースの次元を使用します。
- 重要な操作:商品カード内のサブモジュールを最も近い商品に接続します。
- 期待される結果:これにより、商品カードの各カードが自動的に自身の固有の属性(その商品に特有のメタフィールドなど)をリストをループしながら表示します。
シナリオ 2:独立した/注目セクション
トップページやカスタムページに「注目商品」や「商品一覧」などのセクションを手動で追加する場合は、パーツレベルのリソース次元を使用します。
- 重要な操作:サイドバーのメインセクションレベルで、最初にデータソース(例:特定の商品やカテゴリの選択)をバインドする必要があります。
- 期待される結果:これにより、テンプレート外の任意のページで特定の商品情報を柔軟に表示できます。
| 重要:セクションレベルで最初にソースをバインドしないと、サブモジュールは「親」データを取得できず、内容が空になるかレイアウトエラーが発生します。 |
よくある質問
Q 1 商品カテゴリページの一覧で個別の商品メタフィールドを表示するにはどうすればよいですか?
「最も近いリソース」次元を使用する必要があります。
- よくある落とし穴: コレクションページでは、システムのデフォルト「テンプレートリソース」が「コレクション」全体のデータを取得します。これを商品カードに直接適用すると、個々の商品属性(アルコール度数や生地の素材など)を取得できません。
- 正しい解決策: エディターで商品カード内の特定のブロック(例:テキストボックス)をクリックし、動的ソースを最も近い商品に、カテゴリは最も近いリソースから設定してください。
- ロジック: システムがリストを生成するとき、各カードに個別の商品データを割り当てます。「最も近いリソース」を選択すると、そのブロックは「上方向に検索」して、そのカードにマッピングされた特定の商品データを取得し、差別化された表示を実現します。
| 注: 動的ソースはOS 3.0の共通の基盤プロトコルであり、すべての公式、サードパーティ、カスタムテーマをサポートしています。メタフィールドの作成と管理に関する詳細なガイドは、「メタフィールドを使ったストアコンテンツのカスタマイズ」をご参照ください。 |
Q 2 メタフィールドとメタオブジェクトの違いは何ですか?
メタフィールドは、商品やコレクションなどのリソースに直接付随するカスタム属性(例:「商品」の「生地の種類」)です。メタオブジェクトは、複数の商品、ページ、パーツで参照可能な独立した再利用可能なデータレコードで、共有データテーブルのようなものです。商品固有のデータにはメタフィールドを、共有コンテンツライブラリにはメタオブジェクトを使用してください。メタオブジェクトの詳細については、「OS 3.0 テーマエディターでのメタオブジェクトの接続」をご覧ください。
この記事はAIを使用して翻訳されており、不正確な箇所が含まれる可能性があります。最も正確な情報については、元の英語版をご参照ください。