Skip to main content

Event Handling

Overview​

This guide explains how to work with events in the Growave SDK. Events are triggered by various actions within the SDK, such as when a widget is injected, opened, or closed, or when a customer interacts with Growave features. Understanding how to subscribe to, handle, and unsubscribe from these events is crucial for creating responsive and interactive storefronts.

Event handling in the SDK​

Subscribing to events​

To interact with events in the SDK, you must first subscribe to them using the sdk.on method. This allows your application to listen for specific actions and respond accordingly.

Example: Subscribing to an event​

function handleWishlistItemCreated(event) {
    console.log("Wishlist item created:", event.detail);
    // Handle the event
}

window.gw.sdk.on(
    window.gw.sdk.wishlists.events.WISHLIST_ITEM_CREATED,
    handleWishlistItemCreated
);

You can subscribe to events from any SDK module, such as wishlists, reviews, or rewards. Each module exposes its available events through the events property.

Event dispatching​

Events are dispatched when the SDK detects that a particular action has occurred. When an event is triggered, the SDK creates an SdkEvent object, which is then passed to all subscribers.

How dispatching works​

  1. Subscription: You subscribe to an event using the sdk.on method, specifying the event type.
  2. Event occurrence: The SDK monitors for specific actions (e.g., a wishlist item created).
  3. Dispatching: Once the action occurs, the SDK dispatches the event, creating an SdkEvent object.
  4. Receiving: Subscribers receive the event object and can use its data to trigger further actions.

Understanding the event object​

When an event is dispatched, the handler receives an SdkEvent object containing the event's details.

Example: Event object structure​

{
    detail: {
        type: "WISHLIST_ITEM_CREATED",
        wishlistId: "12345",
        productId: "67890",
        variantId: "11223"
    }
}

The structure and properties of the detail object vary depending on the event type. Refer to each module's event documentation for specific details.

Unsubscribing from events​

If you no longer need to listen for a specific event, it's important to unsubscribe to prevent memory leaks and unnecessary processing. This is done using the sdk.off method.

Example: Unsubscribing from an event​

// Subscribe to event
function handleWishlistItemCreated(event) {
    console.log("Wishlist item created:", event.detail);
}

window.gw.sdk.on(
    window.gw.sdk.wishlists.events.WISHLIST_ITEM_CREATED,
    handleWishlistItemCreated
);

// Later, unsubscribe from event
window.gw.sdk.off(
    window.gw.sdk.wishlists.events.WISHLIST_ITEM_CREATED,
    handleWishlistItemCreated
);
warning

You must pass the same callback function reference used during subscription to successfully remove the event listener.

Event handling summary​

  • Subscribe: Use window.gw.sdk.on() to listen for events
  • Handle: Process the event data in your callback function
  • Unsubscribe: Use window.gw.sdk.off() to stop listening for events when they are no longer needed

Best practices​

  • Always store callback functions as named functions (not anonymous) to enable proper unsubscription
  • Unsubscribe from events when components unmount or are no longer needed to prevent memory leaks
  • Check the module-specific documentation for available events and their data structures