Rendering communication

Abstract

Learn about the elements of SXA Storefront and the Storefront template.

The Commerce Foundation layer provides the mechanism that enables a rendering on a storefront page to communicate with other renderings on the page. This topic explains renderings communicate in the current version of SXA Storefront and how renderings communicated in versions of Sitecore XC prior to version 10.0.

The current implementation includes a ProductEventHandler called CXAObservable, which was introduced to streamline messaging and improve scalability. This Observable manages the emission and subscription between renderings and the CXAObservable. Introducing the CXAObservable service means that there is now one broker, one context, and one queue. The following diagram is an example of how renderings communicate through the CXAObservable.

Note

The diagram is only an example and does not include all the renderings that communicate through CXAObservable. For more information, see Working with Scriban templates.

Diagram of rendering communication through CXAObservable.

In the following example, a shopper visits the Product Detail page and adds an item to the cart. The following communication occurs:

  1. When the shopper selects a variant, the Product Variants rendering sends a message to CXAObservable.

  2. CXAObservable notifies the following four renderings that subscribe to product selection events:

    • The Product Price rendering updates the price to reflect the price of the selected variant.

    • The Product Inventory rendering updates the current stock status and the number of items in stock.

    • The Add-to-cart rendering is aware of the selected variant and is ready to add it to the shopping cart as soon as the shopper clicks Add to Cart.

    • The Product Images rendering updates the hero image to match the selected variant.

  3. When  the shopper clicks Add to cart , the Add-to-cart rendering sends a message to CXAObservable. The Add-to-cart rendering passes the cart count to the Ajax Service broker, which passes it to the Minicart rendering via CXAObservable. If there is an error, CXAObservable sends a message to the Message broker, which notifies the Message Summary rendering (the only rendering that subscribes to messaging events).

  4. CXAObservable notifies the Minicart rendering (the only rendering that subscribes to cart events):

    • The Minicart rendering updates the content of the cart and increases the cart count displayed.

    • The Message Summary rendering outputs a user-friendly message to the shopper.

Note

For backwards compatibility, existing events continue to be emitted by the renderings but are handled using the current rendering communication by default.

In the previous implementation of rendering communication, which is still supported, each rendering on a page communicates with other renderings on the page through a broker. In essence, a rendering registers with a broker and then messages are passed between renderings.

In the following example, a shopper visits the Product Detail page and adds an item to the cart and the following communication occurs:

FoundationLayer.gif
  1. When the shopper selects a variant, the Product Variants rendering sends a message to the Product Selection broker service.

  2. The Product Selection broker service notifies the following four renderings that subscribe to product selection events:

    • The Product Price rendering updates the price to reflect the price of the selected variant.

    • The Product Inventory rendering updates the current stock status and the number of items in stock.

    • The Add-to-cart rendering is aware of the selected variant and is ready to add it to the shopping cart as soon as the shopper clicks Add to Cart.

    • The Product Images rendering updates the hero image to match the selected variant.

  3. When  the shopper clicks Add to cart, the Add-to-cart rendering sends a message to the Cart broker service.

  4. The Cart broker notifies the Minicart rendering (the only rendering that subscribes to cart events):

    • The Minicart rendering calls the Commerce Engine using the Ajax service and, based on the result, updates the content of the cart and increases the cart count displayed. If there is an error, it sends a message to the Message broker, which notifies the Message Summary rendering (the only rendering that subscribes to messaging events).

    • The Message Summary rendering outputs a user-friendly message to the shopper.

There are five Broker services in total. This example uses four of them:

  • Cart Broker - the broker receives a message (or an event raised) from the shopper’s add-to-cart request and forwards the message to its subscriber - the Minicart rendering.

  • Message Broker - the broker receives a message from the Minicart rendering and forwards the message or error to its subscriber - the Message Summary rendering.

  • Ajax Service Broker - the broker receives a message from the Minicart rendering and forwards the message as an AJAX call to the Commerce Engine to validate the message or request.

  • Product Selection Broker - the broker receives a message from the shopper's product selection and forwards the message to its subscribers – the Product Images, Product Prices, Product Inventory and Add-to-cart renderings. These subscribers require the message to know which product image, price, and inventory to display and which product details to add to the minicart when the shopper clicks Add to cart.