URL 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 link to a page owned by an app

To build a link to a page owned by an app, follow these steps:

1. Choose the ID of the app that owns the page, and the page's app page ID, such as book_checkout for the Bookings checkout. For an app made by Wix, find its app ID in Apps Created by Wix. For your own app, find it in your app's dashboard. To find an app page ID, read the page's appPageId in the pages map of @wix/site-service-pages on a site where the app is installed.

2. Call appSectionRelativeUrl() with the 2 IDs:

   Copy

3. When the result is undefined, no page on the site belongs to the app, for example because the app isn't installed. Render no link:

   Copy

4. Prepend siteUrl to the result. On a free Wix domain the site root URL includes a path, which a root-relative link drops:

   Copy

5. Render the link:

   Copy

Link to an item on a router page owned by an app

This flow links to one category on the Stores category page, a router page whose items have paths such as /category/jackets.

To link to an item on a router page owned by an app, follow these steps:

1. Call appSectionRelativeUrl() with true for discardRouterPageSuffix, to retrieve only the router prefix. For the Stores category page, this returns /category:

   Copy

2. When the result is undefined, no page on the site belongs to the app. Render no link:

   Copy

3. Take the item's path from your own data for the item, such as the slug of your own category object. The URL API doesn't provide it:

   Copy

4. Join siteUrl, the prefix and the item's path, which gives https://www.example.com/category/jackets:

   Copy

5. Render the link:

   Copy

Read a query parameter from the current URL

To read a query parameter from the current URL, follow these steps:

1. Read currentUrl where you need the value, such as in an event handler. Nothing notifies you when it changes, so read it each time instead of storing it:

   Copy

2. Parse the URL and read the parameter:

   Copy

3. Use the value. searchParams.get() returns null when a site visitor arrives without the parameter, so compare it with the value you expect rather than assuming it's there:

   Copy