Tutorial | Add Navigation to a Dynamic Page

When you use dynamic pages, you often have a dynamic list page that displays multiple items and individual dynamic item pages for each item. If you want visitors to navigate between the individual items in a specific order, you need to ensure the navigation follows the sorted order of your dynamic list page.

The built-in getPreviousDynamicPage() and getNextDynamicPage() methods don't guarantee that the navigation order matches the sort order of your dynamic list page. Rather, these methods determine the previous and next pages based on the lexicographical order of the dynamic page relative URL's.

In this tutorial, we'll use the following steps to add previous and next buttons that follow the sort order of your dynamic list page:

1. Store item page links in local storage.
2. Add navigation buttons to your dynamic page.

Before you begin

Before you start this tutorial, make sure you set up the following:

1. A dynamic list page that displays multiple items and a dynamic item page for each item. An easy way to set up these dynamic pages is with a preset. For this tutorial, we'll use the Team preset as our example. Alternatively, you can set up your dynamic pages manually.

2. Sort your dynamic list page in the order you want the visitors to navigate through the dynamic item pages by sorting the dataset attached to your dynamic list page.

Step 1 | Store item page links in local storage

In this step, you'll collect the unique page links for each item in the Team collection on your dynamic list page and store them in the browser's local storage.

1. Get the field ID from your collection.

   When you add a dynamic item page to your collection, Wix automatically creates a field containing the relative URLs for each item's page. In the Team collection, this field is called Team (Item).

   To find the field ID for the Team (Item) field, click on the vertical ellipses that appears when you hover over the Team (Item) field in your collection and select Edit. You'll see the field ID, for example link-team-title, in the Edit Field window that pops up.

2. Import @wix/site-storage.

   Copy

3. Retrieve the dynamic page URLs for every item in your collection.

   Use the field ID to extract the dynamic page URLs from dynamic dataset. The field ID in our example is link-team-title.

   Copy

4. Save the dynamic page URLs in local storage.

   Save the list of dynamic page URLs to the browser's local storage.

   Copy

Step 2 | Add navigation buttons to your dynamic page

In this step, you'll add the code to your dynamic item page that makes your previousButton and nextButton work. This code uses the list of dynamic page URLs you saved earlier to navigate between items in the correct order when a site visitor clicks the buttons.

1. Add navigation buttons to your dynamic item page

   On the dynamic item page, add 2 buttons and give them the IDs previousButton and nextButton. Don't add any links to the buttons.

2. Import @wix/site-storage and @wix/site-location.

   Copy

3. Disable the previousButton and nextButton when the page loads.

   Copy

4. Retrieve the URLs from local storage.

   Copy

5. Get the URL of the current page.

   Copy

6. Get the index of the current page's URL in the array of stored URLs.

   Copy

7. If there is a URL to a previous page, set the previousButton's link to that URL and enable the previousButton.

   Copy

8. If there is a URL to a next page, set the nextButton's link to that URL and enable the nextButton.

   Copy

Full code example