The official link: https://sap.github.io/spartac…

The Spartacus event service provides a stream of events that you can consume without a tight integration to specific components or modules. The event system is used in Spartacus to build integrations to third party systems, such as tag managers and web trackers.

The Spartacus event service provides a stream of events that you can use without having to tightly integrate with a particular component or module. Event systems are used in Spartacus to build integration with third-party systems, such as tag managers and network trackers.

The event service also allows you to decouple certain components. For example, you might have a component that dispatches an event, and another component that reacts to this event, without requiring any hard dependency between the components.

Event services also allow you to decouple certain components. For example, you might have one component that dispatches an event and another that reacts to that event without any hard dependencies between the components.

An example:

import { CxEvent } from "@spartacus/core";
export class CartAddEntryEvent extends CxEvent {
  cartId: string;
  userId: string;
  productCode: string;
  quantity: number;
}

The code to listen for this event in the App Module:

export class AppModule { constructor(events: EventService, myAdapter: OccCartAdapter) { const result$ = events.get(CartAddEntrySuccessEvent); result$.subscribe((event) => console.log(event)); }}

At run time, as soon as I add a product to my cart, I trigger the console.log of the anonymous function registered in the App Module above, printing out the value of the CartAddEntrySuccessEvent instance.

Pulling Additional Data From Facades – Extracts Additional Data From the Facade

If you need more data than is contained in a particular event, you can combine this data with other flows. For example, you can collect additional data from the facade.

Here is an example of reacting to the “Add to shopping cart event”, then waiting for the shopping cart stable (because the OCC shopping cart needs to be reloaded from the back end), and then appending all shopping cart data to the event data:

constructor( events: EventService, cartService: ActiveCartService ){} /* ... */ const result$ = this.events.get(CartAddEntrySuccessEvent).pipe( // When the above event is captured, wait for the cart to be stable // (because OCC reloads the cart after any cart operation)... switchMap((event) => this.cartService.isStable().pipe(filter(Boolean), mapTo(event)) ), // Merge the state snapshot of the cart with the data from the event: withLatestFrom(this.cartService.getActive()), map(([event, cart]) => ({ ... event, cart })) );

Runtime effects:

More of Jerry’s original articles can be found on “Wang Zixi “: