---
title: "レンダリングコミュニケーション"
slug: "rendering-communication"
abstract: "SXA Storefrontの要素とStorefrontテンプレートについて学びましょう。"
---
# レンダリングコミュニケーション

Commerce Foundationレイヤーは、ストアフロントページのレンダリングがページ上の他のレンダリングと通信できるようにする仕組みを提供します。このトピックでは、現在のバージョンSXA Storefrontにおけるレンダリングの通信方法と、バージョン10.0以前のバージョンでレンダリングがどのように通信されていたかSitecore XCについて説明します。

## レンダリングコミュニケーション - 現在

現在の実装には[CXAObservable](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/the-cxaobservable-service.html "The CXAObservable service")というProductEventHandlerが含まれており、メッセージングの効率化とスケーラビリティ向上のために導入されました。このObservableはレンダリングとCXAObservable間のエミッションとサブスクリプションを管理します。CXAObservableサービスの導入により、ブローカーは1つ、コンテキストは1つ、キューも1つになりました。以下の図は、レンダリングがCXAObservableを通じてどのように通信するかの例です。

> !注この図はあくまで例であり、CXAObservableを通じて伝達されるすべてのレンダリングは含まれていません。詳細は [「Scribanテンプレートの活用](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/working-with-scriban-templates.html "Working with Scriban templates")」をご覧ください。

![Diagram of rendering communication through CXAObservable.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/CXAObservable.png)

以下の例では、買い物客が商品詳細ページを訪れ、商品をカートに追加します。以下のやり取りが行われます:

1.  買い物客がバリアントを選択すると、製品バリアントのレンダリングがCXAObservableにメッセージを送信します。
2.  CXAObservableは、製品選択イベントに賛同する以下の4つのレンダリング画像に通知します。
    -   製品価格レンダリングは、選択したバリアントの価格を反映するように価格を更新します。
    -   製品在庫表示では、現在の在庫状況と在庫在庫数が更新されます。
    -   カートに追加レンダリングは選択されたバリアントを認識しており、買い物客が **「カートに追加**」をクリックした瞬間にショッピングカートに追加する準備ができています。
    -   Product Imagesレンダリングは、選択したバリアントに合わせてヒーロー画像を更新します。
3.  買い物客が **「カートに追加** 」をクリックすると、Add-to-CartレンダリングはCXAObservableにメッセージを送信します。Add-to-cartレンダリングはカート数をAjaxサービスブローカーに渡し、AjaxサービスブローカーはそれをCXAObservable経由でMinicartレンダリングに渡します。エラーが発生した場合、CXAObservableはメッセージブローカーにメッセージを送信し、Message Summaryレンダリング(メッセージイベントに唯一サブスクライブするレンダリング)に通知します。
4.  CXAObservableはミニカートレンダリング(カートイベントにサブスクライブする唯一のレンダリング)に通知します:
    -   ミニカートのレンダリングはカートリッジの内容を更新し、表示されるカートリッジ数を増やします。
    -   メッセージサマリーレンダリングは、顧客に使いやすいメッセージを出力します。

> !注後方互換性のため、既存のイベントはレンダリングから引き続き送信されますが、デフォルトでは現在のレンダリング通信で処理されます。

## レンダリングコミュニケーション - 前段階

レンダリング通信の以前の実装(現在もサポートされています)では、ページ上の各レンダリングがブローカーを介してページの他のレンダリングと通信します。本質的には、レンダリングがブローカーに登録され、その後レンダリング間でメッセージが渡されます。

以下の例では、買い物客が商品詳細ページを訪れ、商品をカートに追加すると、以下のやり取りが行われます。

![FoundationLayer.gif](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/FoundationLayer.gif)

1.  買い物客がバリアントを選択すると、製品バリアントレンダリングがプロダクトセレクションブローカーサービスにメッセージを送信します。
2.  製品選択ブローカーサービスは、製品選択イベントに加入する以下の4つのレンダリングに通知します:
    -   製品価格レンダリングは、選択したバリアントの価格を反映するように価格を更新します。
    -   製品在庫表示では、現在の在庫状況と在庫在庫数が更新されます。
    -   カートに追加レンダリングは選択されたバリアントを認識しており、買い物客が **「カートに追加**」をクリックした瞬間にショッピングカートに追加する準備ができています。
    -   Product Imagesレンダリングは、選択したバリアントに合わせてヒーロー画像を更新します。
3.  買い物客が **「カートに追加**」をクリックすると、カートに追加レンダリングがカートブローカーサービスにメッセージを送信します。
4.  カートブローカーはミニカートレンダリング(カートイベントを登録する唯一のレンダリング)に通知します:
    -   ミニカートレンダリングはAjaxサービスを使ってCommerce Engineを呼び出し、その結果に基づいてカートの内容を更新し、表示されるカート数を増やします。エラーが発生した場合、メッセージブローカーにメッセージを送信し、メッセージ要約レンダリング(メッセージイベントにサブスクライブする唯一のレンダリング)に通知されます。
    -   メッセージサマリーレンダリングは、顧客に使いやすいメッセージを出力します。

ブローカーサービスは全部で5つあります。この例ではそのうち4つが使われています。

-   カートブローカー - ブローカーは買い物客のカートに追加リクエストからのメッセージ(または発生したイベント)を受け取り、そのメッセージを加入者に転送します。ミニカートレンダリングです。
-   メッセージブローカー - ブローカーはミニカートレンダリングからのメッセージを受け取り、そのメッセージやエラーを加入者に転送します。これはメッセージ概要レンダリングです。
-   Ajaxサービスブローカー - ブローカーはミニカートレンダリングからのメッセージを受け取り、そのメッセージをAJAXコールとしてコマースエンジンに転送し、メッセージやリクエストを検証します。
-   商品選択ブローカー - ブローカーは買い物客の商品セレクションからのメッセージを受け取り、そのメッセージを購読者に転送します。商品画像、商品価格、在庫、カートに追加レンダリングなどです。購読者は、どの商品画像、価格、在庫を表示するか、どの商品詳細をミニカートに追加するかを把握するためにメッセージを必要とし**ます。**