Lightbox API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

Pass data to a popup when you open it

To pass data to a popup when you open it, follow these steps:

1. Define a type for the popup's payload, the data you pass to the popup. Use it both where you open the popup and where you read the payload:

   Copy

2. Find the slug of your app's popup. open() needs the popup's slug, but a Wix user can change it, so your app knows the popup by its app ID and app page ID, which stay the same across sites. So in the pages map of @wix/site-service-pages, find the popup whose appDefinitionId and appPageId match your own APP_ID and QUICK_VIEW_APP_PAGE_ID constants, and take its slug:

   Copy

3. Handle the case where the popup isn't on the site, for example by hiding the button that opens it:

   Copy

4. Open the popup from a click handler, with productId, the ID of the product the site visitor chose, as its payload. open() rejects when an error stops the popup from opening, such as no popup having that slug or the popup page failing to load, so catch the rejection and keep the page usable. Here, your own setQuickViewFailed() state setter records the failure so the page can show a message:

   Copy

Show the payload of the open popup

To show the payload of the open popup, follow these steps:

1. In a component on the popup page, retrieve the payload. Use the type you used when opening the popup, QuickViewPayload, plus undefined. getPayload() can return undefined, but its return type doesn't include it unless you add it:

   Copy

2. Render a fallback when the payload is undefined:

   Copy

3. Render the product from the payload, with your own ProductSummary component:

   Copy