The Stylux SDK emits general messages via a pubsub pattern. These are similar to events in how they're processed/consumed, but rather than a regular or custom event, you can subscribe to topics using the Stylux.pubsub.subscribe method.

For example:

Stylux.pubsub.subscribe('CLOSE_MODAL', (e) => {
  // handle message/event here
});

Message Topics

Message Topic	Message Data
`SETUP_COMPLETE`	`undefined`
`SHOW_OFFER`	`undefined`
`HIDE_OFFER`	`undefined`
`OPEN_MODAL`	`IModalState`
`CLOSE_MODAL`	`IModalClosingState`
`BUNDLE_CREATE`	`IBundleCreateData`

Where each of the above interfaces are defined as:

interface IModalState {
  openingSource: 'ADD_TO_CART' | 'STYLUX_OFFER';
  offer: IOffer;
  product: IProduct;
}

interface IModalClosingState {
  openingSource: 'ADD_TO_CART' | 'STYLUX_OFFER';
  closingSource: 'NO_THANKS' | 'CLOSE_BUTTON' | 'BACKDROP' | 'UNKNOWN';
  offer: IOffer;
  product: IProduct;
}

interface IBundleCreateData {
  product: IProduct;
  offer: IOffer;
  bundle: IBundleApiResponse;
}

Handling Bundle Creation

The BUNDLE_CREATE event is important to handle, as this is the event emitted when a bundle is created from the Stylux modal. When this occurs we generally want to handle adding the appropriate products to the cart.

For example:

Stylux.pubsub.subscribe('BUNDLE_CREATE', ({ product, offer, bundle }) => {
  if (!bundle) {
    return;
  }

  const baseProductId = product.productId;
  const upsellProductId = offer.upsellProduct?.productId;

  const products = [
    {
      productId: baseProductId,
      properties: {
        _STYLUX_BUNDLE: bundle.id,
      },
    },
  ];

  if (typeof upsellProductId === 'string') {
    products.push({
      productId: upsellProductId,
      properties: {
        _STYLUX_BUNDLE: bundle.id,
      },
    });
  }

  return addToCart({ products });
});

Note: you'll have to replace addToCart with your actual APIs to handle adding products to cart with the appropriate hidden _STYLUX_BUNDLE line item property. If you're using standard out of the box Shopify/non-headless, this is handled automatically for you as part of the SDK's Shopify plugin.