Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Wix Design System (WDS)

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

# Pages 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.

## Build a breadcrumb trail for the current page

To build a breadcrumb trail for the current page, follow these steps:

1. Index the pages by slug, so you can look up each parent page by its `parentSlug`:

   ```ts
   import type { PageConfig } from '@wix/site-service-pages/types'

   const { currentPage, mainPage, pages } = pagesService
   const pagesBySlug = new Map(Object.values(pages).map((page) => [page.slug, page]))
   ```

2. Start the trail with the current page, and keep a set of the slugs already in the trail:

   ```ts
   const trail: PageConfig[] = [currentPage]
   const visited = new Set([currentPage.slug])
   ```

3. Walk up through each page's `parentSlug`, adding each parent to the start of the trail. Stop when a parent isn't in `pages` or is already in the trail, so a broken parent chain can't loop forever:

   ```ts
   let parent = currentPage.parentSlug ? pagesBySlug.get(currentPage.parentSlug) : undefined
   while (parent && !visited.has(parent.slug)) {
       trail.unshift(parent)
       visited.add(parent.slug)
       parent = parent.parentSlug ? pagesBySlug.get(parent.parentSlug) : undefined
   }
   ```

4. Put the main page first, unless the trail already starts with it:

   ```ts
   if (trail[0].slug !== mainPage.slug) {
       trail.unshift(mainPage)
   }
   ```

5. Build each page's link from the site root URL, `siteUrl` in `@wix/site-service-url`, and the page's `path`. Link the main page to the site root URL itself, which is where site visitors reach it:

   ```ts
   const hrefFor = (page: PageConfig) =>
       page.slug === mainPage.slug ? urlService.siteUrl : `${urlService.siteUrl}/${page.path}`
   ```

6. Render the trail, labeling each entry with its `title`. Show the current page, the last entry, as text rather than a link:

   ```tsx
   return (
       <nav aria-label="Breadcrumb">
           {trail.map((page, index) =>
               index === trail.length - 1
                   ? <span key={page.slug}>{page.title}</span>
                   : <a key={page.slug} href={hrefFor(page)}>{page.title}</a>
           )}
       </nav>
   )
   ```

## Adapt a component shown in a popup

To adapt a component shown in a popup, follow these steps:

1. Read `popup` from `currentPage`. For a component shown in a popup, the current page is the popup:

   ```ts
   const inPopup = pagesService.currentPage.popup
   ```

2. Render only the form, your own `SignUpForm` component, in a popup, or the form with a heading and a description on a page:

   ```tsx
   if (inPopup) {
       return <SignUpForm />
   }

   return (
       <section>
           <h2>Join our newsletter</h2>
           <p>Hear about new collections first.</p>
           <SignUpForm />
       </section>
   )
   ```