メタオブジェクトを作成して接続する

このチュートリアルでは、商品のハイライトに関するカスタムメタオブジェクトを作成し、オンラインストアに表示する方法について説明します。商品のハイライトに関するメタオブジェクトによって、画像、商品名、キャプション、説明が表示されます。

このチュートリアルでは、メタオブジェクト定義、エントリーの作成、メタフィールドリファレンスの設定、商品とエントリーの接続について説明した後、オンラインストアでメタオブジェクトを公開する方法についてご紹介します。

何を学ぶか

このチュートリアルを終えると、以下のタスクを完了したことになります。

商品の特長のメタオブジェクトを作成しました
作成したメタオブジェクトを使用して、商品の特長に複数のエントリーを作成しました
メタオブジェクトを参照するメタフィールド定義を作成しました
エントリーを特定の商品に連携させました
メタオブジェクトのエントリーを公開しました

ステップ1：メタオブジェクトを作成する

管理画面から、[設定] > [カスタムデータ] の順に移動します。
[メタオブジェクト定義] で、[定義を追加] をクリックします。
メタオブジェクト定義に「商品のハイライト」という名前を付けます。
[フィールドを追加] をクリックし、このメタオブジェクトに表示するコンテンツのタイプを選択します。フィールドはメタオブジェクトに表示されるコンテンツを定義し、各フィールドには独自のオプションと検証が設定されています。最初のフィールドを追加するには、[ファイル] を選択します。
タイプと検証を設定します。フィールドに [画像] という名前を付け、簡単な説明を入力します。
[アクセス] で、[ストアフロント] が自動的に選択されます。ストアがコンテンツにアクセスして表示できるように、このオプションを選択したままにしておきます。
メタオブジェクトに画像フィールドを追加します。[フィールドを追加] > [ファイル] の順に選択します。
- このフィールドに [画像] という名前を付けます。
- [ビデオ] をオフにすると、このメタオブジェクトが画像のみを表示するよう設定できます。
- 説明を入力します。
- 完了したら [追加] をクリックします。
メタオブジェクトに見出しフィールドを追加します。今回は [フィールドを追加] を選択し、フィールドの種類として [単一行のテキスト] を選択します。以下の手順を実行します。
- このフィールドに [見出し] という名前を付けます。
- [このフィールドを表示名として使用する] にチェックを入れ、インデックスのエントリー名としてこのフィールドを使用します。
- 説明を入力します。
- 完了したら [追加] をクリックします。
メタオブジェクトにキャプションフィールドを追加します。[フィールドを追加] > [単一行のテキスト] の順にクリックします。以下の手順を実行します。
- このフィールドに [キャプション] という名前を付けます。
- 説明を入力します。
- 完了したら [追加] をクリックします。
メタオブジェクトに説明フィールドを追加します。[フィールドを追加] > [複数行のテキスト] の順にクリックします。以下の手順を実行します。
- このフィールドに [説明] という名前を付けます。
- 説明を入力します。
- 完了したら [追加] をクリックします。
新しいメタオブジェクト定義を [保存] します。

メタオブジェクト定義を保存すると、エントリーの作成ができるようになります。

ステップ2：エントリーを作成する

管理画面から [コンテンツ] をクリックします。
新しいエントリーのベースとなる [商品のハイライト] というメタオブジェクト定義をクリックし、[エントリーを追加] をクリックします。
エントリーのフィールドに入力します。
- [画像を選択] をクリックし、この商品の特長の画像を選択またはアップロードします。
- [タイトル] と [説明] を追加します。
ステータスは自動的に [アクティブ] に設定されます。エントリーを使用する準備ができていない場合は、ステータスを [下書き] に変更できます。
[保存] をクリックします。

エントリーが、コンテンツエントリーごとの固有IDである [ハンドル] を生成しました。エントリーをストアの領域に連携させた後は、ハンドルを編集することはおすすめしません。ストアでエントリーハンドルを使用した後にエントリーハンドルを変更する場合の影響について詳しくはこちらをご覧ください。

上記の手順を繰り返して、商品の特長のメタオブジェクト定義に基づきさらに3つのエントリーを作成します。

メタオブジェクト定義とエントリーを保存した後、メタオブジェクトを参照するメタフィールド定義を作成できます。

ステップ3：メタオブジェクトを参照するメタフィールド定義を作成する

管理画面から、[設定] > [カスタムデータ] の順に移動します。
[メタフィールド] セクションで [商品] をクリックします。
[定義を追加] をクリックします。固有の名前と説明を入力し、[コンテンツタイプを選択] をクリックします。
[タイプを選択] をクリックした後、[メタオブジェクト] をクリックします。
[参照] セクションで、参照するメタオブジェクト定義を選択します。[商品のハイライト] を選択します。これにより、商品の定義メタフィールドが商品のハイライトのメタオブジェクトに関連するエントリーのみが表示されます。
この定義によって、1つのエントリーまたはエントリーのリストを表示できるかどうかが定まります。この例では [エントリーのリスト] オプションを選択します。
[アクセス] セクションでは、[ストアフロント] オプションがデフォルトで選択されています。
[保存] をクリックします。

ステップ4：商品をエントリーに連携させる

管理画面から [商品管理] に移動します。
商品の特長を表示する商品を選択します。
たとえば、作成した商品のハイライトの一部 (すべてではない) のエントリーを表示したい場合、[商品のメタフィールド] セクションで [商品のハイライト] メタフィールドの横にあるエントリーフィールドをクリックします。メタフィールドリストに商品のハイライトが表示されない場合、[すべて表示] をクリックします。
[エントリーを選択] をクリックします。このステップでは、この特定の商品に表示するエントリーを選択します。商品の特長を2つ選択します。
商品ページに戻ります。別の商品を選択し、前の手順に従って商品の特長の2つの異なるエントリーを商品に割り当てます。

次に、オンラインストアでメタオブジェクトを公開します。

ステップ5：オンラインストアにエントリーを公開する

エントリーを商品に連携させたため、次に、ストアでエントリーを表示します。この手順では、テーマエディタを使用して、メタオブジェクトのエントリーが連携するブロックとセクションを選択します。

セクションまたはブロックを追加した後、[動的ソースを接続] アイコンをクリックしてメタフィールドを選択できます。

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズ] をクリックします。
画面上部のドロップダウンメニューを使用して、[商品] > [デフォルトの商品] の順に選択します。これにより、テーマエディタにデフォルトの商品のテンプレートを読み込みます。
サイドバーで [セクションを追加] をクリックし、新しいセクションタイプとして [複数列] を選択します。
[複数列] セクションの最初の行をクリックします。
- 最初のブロックの設定が、右側のサイドバーに表示されます。列ブロックでは、手動で画像を選択、見出しを挿入、キャプションを追加、また説明を追加することができます。個々のデータソースのアイコンをクリックして、ブロック設定を希望するエントリーに連携させることもできます。
ブロック名の横にある [動的ソースを接続する] をクリックして、[商品のハイライト] を選択します。テーマエディタによって、新しい複数列ブロックに商品のハイライトのエントリーが入力されます。
[複数列] セクションの残りのブロックを設定するか、未使用のブロックを削除します。
[保存] をクリックして、商品の特長のエントリーを公開します。

エントリーは接続先の商品に関してのみ表示され、商品に対して対応するリファレンスメタフィールドが見つからない場合、そのセクションは公開されません。そのため、すべての商品で機能する単一の商品テンプレートを設定できます。