When you want to add previous and next buttons to a dynamic page, you may be tempted to add two buttons, connect them to your page's dataset, and choose Previous and Next from the Actions list as you would on a regular page. Doing so will not work.
To understand why it doesn't work, we need to understand a little bit about how dynamic item pages work. A dynamic item page decides which item to display using the dynamic sections of the URL that was used to reach the page. When the page loads, the proper item is then fetched from the database and is accessible to the page through the page's dynamic dataset. Since it is an item page, there will only be one item in the dataset. Therefore, there are no "previous" or "next" items to navigate to using the Previous and Next actions of the dataset.
This article will demonstrate how you can use code to create previous and next buttons for a dynamic item page. We will do so by adding code to two pages. First, in an index page that your users use to reach your dynamic item pages, we will add code to store all the relevant item page links. Then, in the dynamic item page, we will add code to retrieve the links and use them in previous and next buttons that we will add to the page.
In this article we assume that you are using an index page to present multiple items from one of your collections on a single page. Users select one of the items on your index page to reach the relevant dynamic item page. The order of the previous and next items on your item page will be determined by the index page that the user came from.
Note: You can also use the getPreviousDynamicPage( ) and getNextDynamicPage( ) functions or the Previous dynamic page and Next dynamic page dataset actions to create previous and next buttons on a dynamic item page. However, you cannot control the item order when using these functions.
The index page can be a regular page or a dynamic list page. In either case, the page will have a dataset that is connected to your collection and a table or gallery that is set to link each item to a dynamic item page.
To create the previous and next buttons on the dynamic item page we don't need to change the index page at all. We just need to add some code that will work behind the scenes.
Note: The order of the previous and next items on your dynamic item page will be determined by the sort order of the dataset on the index page.
The code we will add to the index page does the following:
Add the following code to your index page in the Page Code section.
Note: See the appendix below to learn how to optimize the above code.
You'll need to do two things to make sure this code works for your specific situation.
First, this code assumes your page's dataset has the ID myDataset. If it does not have that ID, you need to either change the dataset's ID to myDataset or change the code wherever it says "#myDataset" to reflect your dataset's actual ID. You can change an element's ID by selecting the element and editing the ID field in the Properties & Events panel.
Second, this code needs to get the URLs to your dynamic item page from your collection. It can only do so if it knows which field in your collection the URLs are stored in. Since the field ID for that field will be different for every situation, you need to edit the code to reflect the proper field ID.
On this line
const linkField = "link-to-item"; // replace this value
change the value inside double quotes to the correct field ID.
Remember, each time you add a dynamic page, a field is automatically created in your collection with relative URLs for that page. In the Content Management System (CMS), you need to locate the field with the URLs for the dynamic item page that you want to add previous and next buttons to.
To find the field ID for a collection field, click on the vertical ellipses that appears when you hover over a field in the CMS and select Edit. You will see the field ID in the Edit Field window that pops up. Be sure to use the field ID and not the Field Name.
Important: This code gets the URLs for all the items in the dataset. If you have a very large collection, you may want to limit the number of items retrieved from the dataset.
Note: If you have more than one index page that leads to the same dynamic item page, you will need to add this code to each of those pages.
On the dynamic item page, begin by adding two buttons to the page. Feel free to change the design and text of the buttons, but make sure not to add any links to the buttons.
The code we will add to the dynamic item page does the following:
Add the following code to your dynamic item page in the Page Code section.
Note: See the appendix below to learn how to optimize the above code.
This code assumes that your buttons have the IDs previous and next. If your buttons do not have those IDs, you need to either change the IDs of the buttons to previous and next or change the code wherever it says "#previous" and "#next" to reflect actual IDs of your buttons. You can change an element's ID by selecting the element and editing the ID field in the Properties & Events panel.
In the code snippets above we use browser's storage to pass information between pages. There are two types of browser storage that you can access using the wix-storage-frontend API. In this article we use local storage. To use session storage instead, all you need to do is change the import statements in both code snippets accordingly. For more information, see wix-storage-frontend in the API Reference.
The following APIs are used in the code in this article. To learn more, see the API Reference.
$w
$w.Button
wix-dataset
wix-location-frontend
wix-storage-frontend
wix-window-frontend