Commerceレンダリングを使用したストアフロントの構築
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecore Experience Accelerator (SXA) のCommerceレンダリングは、Commerceテナントとサイトの作成時にツールボックスに追加されるCommerce固有のレンダリングです。Commerceレンダリングは、Web開発チームがeコマース ストアフロントの制作をスピードアップするために使用できます。SXAは、構造とデザインを分離することで、フロントエンド開発者、クリエイティブ デザイナー、コンテンツ作成者、開発者が並行して作業できるようにします。
最良の結果を得るには、Commerceレンダリングの使用を開始する前に、SXAの機能について理解しておいてください。
SXAのCommerceレンダリングは、eコマースとターゲットのSitecore Commerce Engine向けに特別に調整されています。Commerceレンダリングを使用して、事前構築済みのSXAストアフロントに基づいてストアフロントを構築するか、ボトムアップでストアフロントを構築できます。SXA Storefrontの上に構築することで、有利なスタートを切ることができ、その後、SXA Storefrontをカスタマイズして独自のものにすることができます。
ストアフロントを最初から作成する場合は、ツールボックスのコマースレンダリングを使用して独自のページデザインを作成できます。
Commerceレンダリングは、Commerce Antiforgeryメタレンダリングに依存しています。すべてのストアフロントページに偽造防止メタレンダリングを含めて、コマースレンダリングが期待どおりに動作することを確認する必要があります。
SXA Storefrontテンプレートでは、偽造防止メタ レンダリングがCommerceメタデータ パーシャル デザインの <body> に含まれているため、サイトに必要な偽造防止トークンHTMLが生成されます。
Commerceレンダリングをページに追加するには:
-
エクスペリエンス エディターで、既存のページまたはパーシャル デザインを開くか、レンダリングを含める新しいページまたはパーシャル デザインを作成します。
-
ツールボックスで、矢印をクリックしてカテゴリを展開します。
-
レンダリングをクリックしてドラッグし、ページに追加します。
-
関連する場合は、レンダリングの関連コンテンツを選択または作成します。
手記SXA Storefrontに基づいてサイトを構築している場合、レンダリングに関連付けることができるコンテンツ アイテムは、sitecore/Content/Sitecore/Your Storefront/Data/Commerce/Toolbox category/Rendering nameなどですでに作成されています。 sitecore/Content/Sitecore/Storefront/Data/Commerce/Account/Registration
選択したレンダリングがページに表示されます。一部のレンダリングには、プレースホルダーのイメージとデータを含めることができます。たとえば、エクスペリエンス エディターで商品ページが次のように表示され、ストアフロント モックアップ テーマが適用されているとします。
手記レンダリングの外観は、サイトに適用される テーマ によって異なります。
-
レンダリングでは、フィールド ラベル、ボタン ラベル、およびプレースホルダ テキストを編集できます。
-
一部のコンテンツは、エクスペリエンス エディターのページ上で直接編集できます。
-
他のコンテンツは、コンテンツ エディターでのみ編集できます。コンテンツ エディタで関連するコンテンツ アイテムを開くには、レンダリングを選択して
をクリックし、Edit the related itemをクリックします。
手記エクスペリエンス エディターのレンダリングに表示されるテキスト文字列に加えて、ライブ サイトにのみ表示される検証メッセージが存在する可能性があります。検証メッセージは、コンテンツ エディターで関連付けられたコンテンツ アイテムで編集できます。
-
その他の設定オプションについては、次のトピックでレンダリングごとに個別に説明します。
SXA Storefrontでは、データ入力用のフォームを含むコンポーネントは、標準の .NET MVCおよびAJAXフォーム手法を使用して実装されます。したがって、事前定義されたフォームでは、入力フィールドとボタンのラベルのみをカスタマイズできます。