SXA Storefront アーキテクチャ

概要

SXA Storefront の要素と Storefront テンプレートについて学びます。

SXA Storefront は、Sitecore Commerce の機能を利用し、コマース固有のコントロールを使用して Web ショップをすばやく簡単に構築できるようにするフレームワークです。SXA Storefront (以下の図で青の部分) は、次のようなさまざまなコンポーネントの上にあります。

  • Sitecore Experience Platform – 最先端の CMS とマーケティング機能を備えたカスタマー エクスペリエンス管理ソフトウェアで、カスタマー エクスペリエンスを完全に制御できます。この機能を使用すると、キャンペーンから訪問者のアクティビティやパフォーマンスの測定に至るまで、さまざまなチャネルにわたるすべてのアクティビティを統合できます。

  • Experience Accelerator – Web サイトのカスタマイズに使用される開発者アプリケーションで、サイト間でコンポーネント、レイアウト、およびテンプレートを再利用できます。

  • Sitecore Experience Commerce – 顧客のライフサイクル全体でパーソナライズされたエクスペリエンスを提供することに焦点を当てた e コマース エンジン。これには、カタログおよび販売可能アイテムの管理、在庫管理、顧客管理、注文管理、販売促進管理、および価格管理が含まれます。

  • Commerce Connect – ストアフロント開発者向けの Sitecore Commerce API で、フロントエンド Web ショップ ソリューションとバックエンド外部コマース システム間の統合レイヤーです。バックエンド システムは、Commerce Connect コネクタが Sitecore またはサードパーティ ベンダーによって作成されたものであれば、どの e コマース システムにすることもできます。Connect を介して生成されるレポートには、Commerce 向け Experience Profile レポートや Commerce 向けエクスペリエンス アナリティクス レポートなどがあります。

次の図は、Sitecore ソリューションを構成するコンポーネントを示しています。

Sitecore ソリューションの概要図

SXA Storefront には Storefront サイト テンプレートが含まれています。ここに用意されている事前定義された構造と形式を使用すると、オンプレミスまたはクラウドで Web ショップをすばやく作成してデプロイできます。テンプレートは、Commerce レンダリングで構築された Web ショップ テンプレートで、Habitat カタログを使用します。また、サンプル テーマが含まれています。 

Commerce Foundation レイヤーはさまざまなサービスと機能を提供します。

Commerce Foundation レイヤーの構造

顧客がストアフロントを訪れると、Commerce レンダリングが Commerce Foundation レイヤーに対して呼び出しを行います。

Storefront サイト テンプレートを使用することには、いくつかの理由があります。

  • これは、Sitecore のベスト プラクティスと最先端のテクノロジーに基づいて B2C e コマース ソリューションを構築するための出発点となります。

  • これを採用して、SXA テーマを使用してスキニングし、本番環境用にカスタマイズできます。

  • Sitecore Experience Platform のエンゲージメント機能を利用して、訪問者の行動を追跡およびフォローアップし、個人的なカスタマー エクスペリエンスを生み出して、生涯顧客を獲得するのに役立ちます。

Storefront サイト テンプレートを使用すると、Web ショップに必要なすべての要素がコンテンツ エディターに追加されます。顧客の要件に応じて、これらの要素をニーズに合わせてカスタマイズできます。Storefront コンポーネントのカスタマイズの詳細については、Storefront 開発者向けドキュメント Sitecore Experience Accelerator ドキュメントを参照してください。

注記

チェックアウト時にオンライン決済を可能にするために、Storefront サイト テンプレートには BrainTree との統合が含まれています。BrainTree に連絡して契約を交渉し、必要なマーチャント ID を取得してください。ストアフロントでの開発とテストのための開発者アカウントを取得できるため、カスタム Commerce コンポーネントを作成して、希望の決済プロバイダーを統合できます。Braintree 決済プロバイダーと Sitecore との統合方法に関する概要については、Discover Sitecore チャンネルを参照してください。

SXA Storefront は、ベスト プラクティスを念頭に置いて構築されており、モジュラー アーキテクチャがベースになっています。詳細については、「 Sitecore Helix 開発ガイドライン」を参照してください。

SXA Storefront では以下のテクノロジーが使用されています。

  • Sitecore Experience Platform

  • Sitecore Experience Accelerator

  • 基本的な Bootstrap

  • JQuery

  • Knockout – クリーンな基盤となるデータ モデルを使用してレスポンシブ ユーザー インターフェイスを作成できる JavaScript ライブラリ

  • Sitecore と Microsoft ASP.NET MVC

  • HTML 5

  • Newtonsoft JSON

SXA Storefront アーキテクチャの場合:

  • コンテンツ、プレゼンテーション、およびカタログ データは明確に分離されています。

  • Storefront の実装では、カスタム コードの挿入や Sitecore へのフックよりも標準機能が優先されます。

  • SXA Storefront は Cookie を導入していません。

  • 商品カタログは、高度に最適化されたデータ プロバイダーを使用して、通常のアイテムとして Sitecore に表示されます。

  • 実装は完全に Sitecore MVC ベースです。すべてのレンダリングはコントローラー ベースです。

すべてのコンポーネントは、コンポーネント API 呼び出し (AJAX) を使用して更新されます。これには次の利点があります。

  • オブジェクトとデータはオンデマンドで読み込まれ (遅延読み込み)、ページのポストバックがありません。

  • 操作の進行中は、ボタンとテーブルに進行状況インジケーターが表示されます。

  • Knockout.js は動的データ バインディングに使用されます。

  • コンポーネント API 呼び出しは JSON を返します。