Name: Understanding the Event System in SAP Commerce Cloud Composable Storefront
Uploaded: 2023-9-27
Duration: 491 s
Description: In this video you will go through the Event System in Composable Storefront, its different types and its capabilities.

Share feedback

<p>Planned maintenance of Practice Systems</p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Subscribe now

Learn more

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div>In this video you will go through the Event System in Composable Storefront, its different types and its capabilities.</div></div>

Understanding the Event System in SAP Commerce Cloud Composable Storefront

Hello everyone.  In this video, we will be discussing about the event system in Composable Storefront.  The event system is used in composable  storefront to build integrations to third party  systems, such as tag managers and web trackers.  It provides a stream of events that one can  consume without tight integration between components or modules.  The event system is based on RxJs  observables, which are simply reactive e extensions for JavaScript observables, a standard library in Angular.  Events can help in decoupling  some components. For example, Component A can dispatch an event. Component B can react to it.  And there is no need for a hard dependency  between these two components.  For example, add to cart can be decoupled from the model of “Added to cart”.  This can be achieved by the “add to cart”  action emitting an event and “added to cart”  model observing the same.   We will take a look at this example in a demo in a bit.  Event Types - Composable Storefront events  are driven by TypeScript classes that can be instantiated.  For example, “SearchBoxSuggestionSelectedEvent”.   This gets emitted upon selecting a suggestion from the search box.   The event object holds all key parameters like free Text, list of search suggestions and the suggestion selected by the user, just to name a few.  Now let us see how to observe the stream of events that are emitted.  To achieve that, the stream of the event type  has to be fetched and it has  to be subscribed to.  Event service can be used to get the event observable and can be subscribed.  Let us examine this use case in the following demonstration.  We will use pre-written code in this demo. This is the codebase of a local instance of Composable Storefront.   For ease of execution, the demo snippets are  added in the App Component class and are  initiated in the ngOnInit() method.  In this add to cart example, the collectAddToCartEvents method has a CartAddEntry event that is emitted upon the  add to cart action in the product details page.   A CartAddEntrySuccess event is emitted when the cart addition succeeds, as part of backend OCC call.   These events are available by default  Composable Storefront.  The event observables are first fetched using  EventService and then they are subscribed.  For this demo, we will only be logging the event  information in the browser console for both these events.  Now, when we add a product to the cart from the product details page, we can first see  CartAddEntryEvent info getting logged and, on successful computation at the backend,  CartAddEntrySuccessEvent gets logged  in the browser console. This is how we can observe events and run corresponding computations in Composable Storefront.  If one needs more data than what is available  in the subscribed event, then the data can be  combined with other streams.   For example, additional data can be  pulled from facades.   We can see this in a demo.  This demo will simulate reacting to an “added to cart event”, then retrieving all cart data from the facades,  then appending cart data to the event data.  The “pullAdditionalCartData()” method will be  used for the demo, which is initiated in ngOnInit method of the AppComponent class.  In the code snippet, we can see a CartAddEntrySuccessEvent being retrieved  using EventService.  This is followed by waiting for the cart  to be stable, as any cart operation reloads the backend OCC cart.  Then the latest snapshot of the cart data is retrieved using ActiveCartService and then  finally it is merged with the event data.  Then the entire merged info gets logged to the browser console for this demo.  Now on “add to cart”, as you can see in the  console, we can see the entire cart data along with the data of CartAddEntrySuccessEvent.  The “cart” property holds the entire cart data  pulled from the facades, which holds information about cart total price, promotions applied, etc.,  Other properties, like cartId, productCode,  quantity, and quantityAdded  are from CartAddEntrySuccessEvent.  This is an example of pulling additional info from facades and merging it with the event data.  RxJs observables are lazy by default and since event service leverages those, event streams are lazy too.  This means that an observable does not start producing values or executing its logic, like  pulling data from facades as seen in the  previous demo, until someone subscribes to it.  Until that point, it remains inert and does not  consume any resources, hence no performance cost until subscribed.  How do we  register an event  in Composable Storefront?  Any RxJs Observable can be the source of  events as soon as it emits objects of the declared class type.  Here is the syntax, where the event is registered using Event Service providing the event class type and event source observable as parameters.  The register() method is for registering RxJs observables.  Events can also be dispatched individually using the dispatch() method as seen in this example where we could see a custom  event being instantiated and dispatched.  Now let us learn the importance of unregistering an event source when it is no longer needed.  Every completed event source observable that is no longer needed should be unregistered from the Event Service, to eliminate the possibility of  a memory leak which can impact  the application’s performance.  An event source will not be automatically unregistered upon a stream’s completion --  this must be done explicitly.  So how does one unregister an event source?   The register() method returns  a “teardown” function which can unregister the given event source.  In this example, we can see the register()  method returning a “teardown” function that can be utilized for undoing the original  event registration.  Now, let us look at the available  event type inheritance options.  As seen in this example, CartAddEntryEvent,  along with other similar cart events,  is grouped under one common parent event  which is CartEvent.  By subscribing to the parent CartEvent in this  case, all the event emissions of child  cart events can be fetched.  CartEvent, in turn, extends CxEvent, which is the base parent event that is generally extended when creating  any type of event class.  In this demo, we will subscribe to  the parent CartEvent and log the event data in the browser console.   The fetchCartEvents() method is initiated in the ngOnInit() method  of the App Component class.  The expectation is that all child event  emissions of this parent event are to be  logged in the browser console on corresponding actions.  Here, in the product details page, on “add to cart”, as observed earlier, we can see CartAddEntryEvent  CartAddEntrySuccessEvent getting logged in the browser console, both of which extend CartEvent.  Similarly, when we move to the cart page and remove the added item from the cart,  we can find the CartRemoveEntrySuccess event getting logged in the console.   This event also extends CartEvent.  In this manner, subscribing to the parent event  enables capturing the emission of all events of  the specified type, including all of its subtypes.  This is all we have to cover for  the “Event System”.  There is detailed documentation about all of this in the SAP help portal.  Do take a look and happy learning!