Wix Help Center
    Home
  1. Creating your site
  2. Advanced features
  3. Velo by Wix
  4. Code Tutorials

Velo Tutorial: Creating Previous and Next Buttons for a Dynamic Item Page with Code

Visit the Velo by Wix website to onboard and continue learning.
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.

Index Page

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:
  • Retrieves the collection items from the dataset
  • Gets the relative URLs for the dynamic item page for each of the items
  • Stores the URLs in the user's local browser storage for us to use later
Add the following code to your index page in the Page Code section.
1import {local} from 'wix-storage';
2
3const linkField = "link-to-item"; // replace this value
4
5$w.onReady(function () {
6  $w("#myDataset").onReady(() => {
7    const numberOfItems = $w("#myDataset").getTotalCount();
8  
9    $w("#myDataset").getItems(0, numberOfItems)
10      .then( (result) => { 
11        const dynamicPageURLs = result.items.map(item => item[linkField]);
12        local.setItem('dynamicPageURLs', dynamicPageURLs);
13      } )
14      .catch( (err) => {
15        console.log(err.code, err.message);
16      } );
17  } );
18} );
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 key for that field will be different for every situation, you need to edit the code to reflect the proper field key.

On this line

const linkField = "link-to-item"; // replace this value

change the value inside double quotes to the correct field key.

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 Manager, 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 Key for a collection field, click on the vertical ellipses that appears when you hover over a field in the Content Manager in the Editor and select Manage Properties. Be sure to use the Field Key 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.

Item Page

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:
  • Disables the previous and next buttons
  • Retrieves the URLs stored in the user's local browser storage
  • Retrieves the URL of the current page
  • Gets the location of the current page's URL within the list of all the URLs
  • If there is a URL to a "previous" page, sets the previous button's link to that URL and enables the previous button
  • If there is a URL to a "next" page, sets the next button's link to that URL and enables the next button
Add the following code to your dynamic item page in the Page Code section.
1import {local} from 'wix-storage';
2import wixLocation from 'wix-location';
3
4
5$w.onReady(function () {
6  $w("#previous").disable();
7  $w("#next").disable();
8 
9  if (local.getItem('dynamicPageURLs')) {
10    const dynamicPageURLs = local.getItem('dynamicPageURLs').split(',');
11
12    const currentPage = '/' + wixLocation.prefix + '/' + wixLocation.path.join('/');
13    const currentPageIndex = dynamicPageURLs.indexOf(currentPage);
14
15    if (currentPageIndex > 0) {
16      $w("#previous").link = dynamicPageURLs[currentPageIndex - 1];
17      $w("#previous").enable();
18    }
19
20    if (currentPageIndex < dynamicPageURLs.length - 1) {
21      $w("#next").link = dynamicPageURLs[currentPageIndex + 1];
22      $w("#next").enable();
23    }
24  }
25} );
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.

API List

The following APIs are used in the code in this article. To learn more, see the API Reference.
$w
  • $w.onReady( ) - Sets the function that runs when all a page's elements have finished loading.
$w.Button
wix-dataset
wix-location
wix-storage
wix-window

Did this help?

|