OS 3.0 テーマエディターでの動的ソース（メタフィールド）の設定方法

動的ソース（メタフィールド）を使用すると、手動で入力した静的コンテンツを置き換え、ストアフロントにリアルタイムのストアデータを表示できます。パーツを動的ソースに接続することで、商品特徴やカテゴリタグなどの固有の詳細情報がストア全体で一貫して最新の状態に保たれます。現在、この機能は主に商品およびカテゴリリソースのメタフィールドをサポートしています。

このガイドでは、メタフィールドの定義方法、3つの動的データ取得の次元の理解、およびよくある質問を通じた一般的な設定問題の解決方法について説明します。

設定前のメタフィールドの作成

動的コンテンツを表示するには、まずカスタムデータフィールド（メタフィールド）を定義し、商品またはカテゴリに値を割り当てる必要があります。

1. SHOPLINE管理画面で、設定 > カスタマイズデータに移動します。
   
2. 作成したいリソースタイプ（例：商品またはカテゴリ）を選択します。
3. フィールドを追加をクリックして新しいフィールドを作成します。
   
4. 特定のアイテム（例：商品ページ）に移動し、メタフィールドセクションでそのアイテムに必要なフィールドを入力します。次に、追加をクリックして設定を保存します。
   

3つの動的ソース次元の説明

OS 3.0エディターは3つのデータ取得次元を提供します。それぞれのロジックを理解することで、異なるページで正確にコンテンツを表示できます：

テンプレートリソース（現在のページ）

• 仕組み：これは、顧客が現在訪れている「URL」に完全に基づく固定データロジックです。
• 最適な用途： 商品詳細ページやカテゴリページの固定位置に適しています。
• 効果：顧客が商品Aを訪れると、システムはURLを識別し商品Aのメタフィールドにロックします。「現在の商品」に接続されたブロックは、そのページ固有のデータを自動的に取得します。

パーツレベルリソース（現在のパーツ）

• 仕組み: これは「コンポーネント自体」の設定に基づいており、配置されているページには依存しません。コンポーネントレベルで割り当てられたデータが、サブモジュールで読み取られます。
• 最適な用途: 「注目商品」など、任意のページ（例：トップページ）に配置できる独立したセクション。
• 効果: セクションの最上位でリソース（例：「サマーセール」カテゴリ）を手動で連携する必要があります。連携後、サブモジュールが「現在のコンポーネント」に設定されている場合、その特定のカテゴリから正確にデータを取得します。

最も近いリソース

• 仕組み: 「上方向検索」ロジックを使用します。ブロックは現在の位置から始まり、ページ構造を上に向かって検索し、最も近い利用可能なデータソースを見つけて適用します。
• 最適な用途: 商品一覧や検索結果ページ。
• 効果: リスト内の個々のカードが「単一商品」データを識別できない問題を解決します。カード内の任意のパーツ（例：タイトル、画像）が「最も近いリソース」に設定されている場合、そのループ内でカードに割り当てられた特定の商品データに自動的に一致します。

「最も近いリソース」の理解と活用

最も近いリソースの仕組みは、自動化されたレイアウトにおける画期的な機能です。繰り返しリスト内の個々のブロック（商品カードなど）が「上方向を見て」そのアイテムに関連する特定のデータを見つけることを可能にします。

なぜ最も近いリソースを使うのか

• 自動化: 商品カードの個々のカードに手動でデータを割り当てる必要がなくなります。
• 詳細表示: 商品一覧や検索結果のカード上で、アルコール度数や生地の種類など、特定のアイテムの特徴を直接表示できます。

最も近いリソースの設定方法

1. OS 3.0 テーマエディターで、商品一覧のあるページ（例：カテゴリページ）に移動します。
2. 商品テンプレート内のブロック（例：商品説明ブロック）を選択します。
   
3. コンテンツ入力欄の横にある動的ソースを追加アイコンをクリックします。
   
4. 最も近いリソースカテゴリの中から最も近い商品を選択します。
5. 表示したい特定のメタフィールドを選択し、保存をクリックします。

ユースケース：商品一覧ページと独立コンポーネント

適切なソースの次元は、コンポーネントの配置場所によって異なります：

シナリオ1：商品一覧ページ

コレクションページや検索結果ページで商品カードを操作する際は、最も近いリソースのディメンションを使用してください。

• 重要な操作: 商品カード内のサブモジュールを最も近い商品に接続します。
• 期待される結果: これにより、システムがリストをループ処理する際に、各カードが自動的に固有の属性（その商品固有のメタフィールドなど）を一致させて表示します。

シナリオ2: 独立/注目セクション

「注目商品」や「商品リスト」などのセクションをトップページやカスタムページに手動で追加する場合は、コンポーネントレベルのリソースディメンションを使用してください。

• 重要な操作: まずサイドバーのメインセクションレベルでデータソース（例：特定の商品やコレクションの選択）をバインドする必要があります。
• 期待される結果: これにより、テンプレート外の任意のページで特定の商品情報を柔軟に表示できます。

よくある質問

Q 1 商品コレクションページのリストで個別の商品メタフィールドを表示するにはどうすればよいですか？

「最も近いリソース」ディメンションを使用する必要があります。

• よくある落とし穴: コレクションページでは、システムのデフォルト「テンプレートリソース」が「コレクション」全体のデータを取得します。これを商品カードに直接適用すると、個別の商品属性（アルコール度数や生地の素材など）を取得できません。
• 正しい解決策: エディターで商品カード内の特定のブロック（例：テキストボックス）をクリックし、動的ソースを最も近いリソースカテゴリの下の最も近い商品に設定します。
• ロジック: システムがリストを生成する際、各カードに個別の商品データを割り当てます。「最も近いリソース」を選択することで、そのブロックは「上方検索」を行い、正確にそのカードにマッピングされた特定の商品データを取得し、差別化された表示を実現します。