> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sample Flows

## Article: Sample Flows

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/pages-and-navigation/lightbox/sample-flows.md

## Article Content:

# 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:

   ```ts
   type QuickViewPayload = { productId: string }
   ```

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`:

   ```ts
   const slug = Object.values(pagesService.pages).find(
       (page) => page.popup && page.appDefinitionId === APP_ID && page.appPageId === QUICK_VIEW_APP_PAGE_ID
   )?.slug
   ```

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

   ```tsx
   if (!slug) {
       return null
   }
   ```

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:

   ```ts
   lightboxService.open<QuickViewPayload>({ slug, payload: { productId } }).catch(() => setQuickViewFailed(true))
   ```

## 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:

   ```ts
   const payload = lightboxService.getPayload<QuickViewPayload | undefined>()
   ```

2. Render a fallback when the payload is `undefined`:

   ```tsx
   if (!payload) {
       return <p>Choose a product to see its details.</p>
   }
   ```

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

   ```tsx
   return <ProductSummary productId={payload.productId} />
   ```