Rendering Offers

To render an offer within the offer element (optionally configured by using offerElementId; defaults to #stylux-offer-container) you'll want to use the offer's show API.

For example:

Stylux.offers.show({
  productId: 'product-id',
});

You can also configure custom classes to apply to the button element that's ultimately rendered within the container; for instance:

Stylux.offers.show({
  productId: 'product-id',
  elementClasses: ['custom-button-class-here'],
});

Showing an offer will have no effect if the product being retrieved doesn't have an offer associated with it; the button offer will only be displayed to the user if there is a corresponding offer associated with the product. If an offer exists, this will render the offer button or entry point to the Stylux modal. When a user clicks on the button, it will open the Stylux modal for the current product/offer.

If you're implementing a more custom frontend integration for Stylux you'll need to handle the BUNDLE_CREATE event manually (i.e., to handle functionality when a bundle is created from the Stylux modal). To view a sample for how to do this, see the following documentation here.