製品詳細 - 表示ページテンプレートの使用
Minium や Speedwell などのアクセラレータには、製品詳細ウィジェットを使用する製品詳細ページがあります。 ウィジェット ページで製品詳細ウィジェットを使用する代わりに、表示ページ テンプレートを使用して同じページを作成できます。 これにより、個々の要素をカスタマイズする柔軟性が向上し、保守性も向上します。
製品の表示ページテンプレートの作成
-
製品メニュー (
) を開き、 デザイン → ページテンプレートに移動します。 -
[ページ テンプレートの表示] に移動し、 [新規]をクリックします。
-
空白を選択します。
-
名前を 製品詳細 と入力し、コンテンツ タイプを 製品に設定します。
-
保存をクリックします。
これにより、製品の新しい表示ページ テンプレートが作成され、編集モードで開きます。
製品画像と名前の追加
-
コンテナをドロップ領域にドラッグ アンド ドロップします。
-
グリッドをコンテナーにドラッグ アンド ドロップします。
-
右側の「一般」タブで、グリッドのモジュール数を
2に設定します。 -
右側の「スタイル」タブで、「下余白」を
3トークンまたは16pxに設定します。 -
画像ギャラリー フラグメントを検索し、最初のモジュールにドラッグ アンド ドロップします。
-
見出しフラグメントを検索し、2 番目のモジュールにドラッグ アンド ドロップします。
-
左側のブラウザタブで、見出しフラグメントを見つけて、名前を 製品名に変更します。
-
ブラウザから element-text を選択し、ソースとして Product を選択し、フィールドとして Nameを選択します。
製品メタデータの追加
-
可用性フラグメントを検索し、製品名の下にドラッグ アンド ドロップします。
-
右側の「スタイル」タブで、「下余白」を
3トークンまたは16pxに設定します。 -
グリッド フラグメントを可用性フラグメントの下にドラッグ アンド ドロップします。
-
右側の「全般」タブで、グリッドの「モジュールの数」を
2に設定します。 -
右側の「スタイル」タブで、「下余白」を
3トークンまたは16pxに設定します。 -
最初のモジュールに 2 つの列、2 番目のモジュールに残りの列が含まれるようにグリッドのサイズを変更します。
-
最初のモジュール内に段落フラグメントをドラッグ アンド ドロップします。
-
左側のブラウザタブで、段落フラグメントを見つけて、名前を Product Fieldsに変更します。
-
段落フラグメントを編集し、次のコンテンツを入力します。
STOCK: SKU: MPN: GTIN: -
コンテンツを選択し、ポップアップ表示されるツールバーで 太字 をクリックします。
-
2 番目のモジュールで、4 つの動的フィールド フラグメントを上下にドラッグ アンド ドロップします。
-
最初のフィールドを 在庫、2 番目を SKU、3 番目を 製造元部品番号、最後を GTINに設定します。
-
グリッドの下に、 オプション セレクター フラグメント、 価格 フラグメント、および カートに追加 フラグメントをドラッグ アンド ドロップします。
製品の説明と仕様を追加する
-
初期グリッドの下に、タブ フラグメントをドラッグ アンド ドロップします。
-
右側の「全般」タブで、グリッドのタブの数を
3に設定します。 -
最初のタブの名前を 説明に変更し、2 番目のタブの名前を 仕様に変更し、3 番目のタブの名前を 添付ファイルに変更します。
-
最初のタブ内に段落のフラグメントをドラッグ アンド ドロップします。
-
左側のブラウザタブで、段落フラグメントを見つけて、名前を 製品説明に変更します。
-
ブラウザから 要素テキスト を選択し、ソースとして 製品 を選択し、フィールドとして 説明を選択します。
-
2 番目のタブ内にコレクション表示フラグメントをドラッグ アンド ドロップします。
-
関連アイテム コレクション プロバイダー タブから、コレクション フィールドを 製品仕様 に設定します。
-
スタイル表示を 境界線付きリストに設定します。
-
3 番目のタブ内にコレクション表示フラグメントをドラッグ アンド ドロップします。
-
関連アイテム コレクション プロバイダー タブから、コレクション フィールドを 製品添付ファイル に設定します。
-
スタイル表示を 境界線付きリストに設定します。
-
公開をクリックします。
「ページ テンプレートの表示」ページに戻り、 「アクション」 (
) をクリックし、 「デフォルトとしてマーク」を選択します。 これで、Minium にあるものとほぼ同じ表示ページ テンプレートを使用した製品詳細ページができました。
