コマース統合フレームワークを使用した、AEM と Adobe Commerce の統合 aem-framework

Experience Manager と Adobe Commerce は、コマース統合フレームワーク(CIF)を使用してシームレスに統合されます。CIF を使用すると、AEM は Adobe Commerce の GraphQL API を使用して、コマースインスタンスに直接アクセスして通信できます。

NOTE
サポートされている GraphQL API の最小バージョンは 2.3.5 です。一部の機能は、新しいバージョンでのみ、または Adobe Commerce エディションでのみサポートされています。
NOTE
GraphQL は現在、Adobe Experience Manager(AEM)as a Cloud Service の、2 つの(個別の)シナリオで使用されています。

アーキテクチャの概要 overview

全体的なアーキテクチャは次のとおりです。

CIF アーキテクチャの概要

CIF 内では、サーバーサイドとクライアントサイドの通信パターンがサポートされます。
サーバーサイド API 呼び出しは、組み込みの汎用的な GraphQL クライアント と、コマース GraphQL スキーマ用に 生成された一連のデータモデル を組み合わせたものを使用して実装されます。また、GraphQL クエリや GQL 形式のミューテーションも使用できます。

React を使用して作成されるクライアントサイドコンポーネントの場合は、Apollo クライアント が使用されます。

AEM CIF コアコンポーネントのアーキテクチャ cif-core-components

AEM CIF コアコンポーネントのアーキテクチャ

AEM CIF コアコンポーネントは、AEM WCM コアコンポーネントと同様の設計パターンとベストプラクティスに従っています。

AEM CIF コアコンポーネントの Adobe Commerce とのビジネスロジックとバックエンドの通信は、Sling Model で実装されます。プロジェクト固有の要件を満たすために、このロジックをカスタマイズする必要がある場合は、Sling モデルの委任パターンを使用できます。

TIP
AEM CIF コアコンポーネントのカスタマイズページには、CIF コアコンポーネントのカスタマイズ方法に関する詳細な例とベストプラクティスが記載されています。

プロジェクト内では、AEM CIF コアコンポーネントとカスタムプロジェクトコンポーネントは、Sling Context-Aware 設定を使用して、AEM ページに関連付けられた Adobe Commerce ストア用に設定されたクライアントを簡単に取得できます。

検索 search

CIF は、Commerce GraphQL API に基づいてサーバーサイドでレンダリングされた検索エクスペリエンスである検索コアコンポーネントを標準で提供します。Commerce のお客様には、代わりにライブ検索を使用するオプションがあります。CIF とライブ検索の統合について詳しくは、このリンクに従ってください。

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab