When creating dynamic pages in Wix, it can be very useful to allow your users to navigate to different dynamic pages right from the page they are currently viewing. However, in Wix, the Next and Previous buttons stop working at the beginning and end of the database. In this post, you will learn how to use Velo to loop the database items on the dynamic pages to allow your users to navigate through all database items for as long as they want.
To get started, watch this video to learn how to properly set it up:
Now that you understand how to set it up, I would like to clarify that the code below will need to be added to 2 separate pages. When adding a database to your site, it typically creates "All" and "Item" dynamic pages. The "All" dynamic page showcases all the items visible from the database. It also allows users to click on a specific item and will redirect them to the "Item" dynamic page. We will need a little code to both the "All" and "Item" dynamic pages for this to work properly.
Code for the "All" dynamic page:
import {local} from 'wix-storage'; const linkField = "link-team-title"; // replace this value $w.onReady(function () { $w("#teamDataset").onReady(() => { const numberOfItems = $w("#teamDataset").getTotalCount(); $w("#teamDataset").getItems(0, numberOfItems) .then( (result) => { const dynamicPageURLs = result.items.map(item => item[linkField]); local.setItem('dynamicPageURLs', dynamicPageURLs); } ) .catch( (err) => { console.log(err.code, err.message); } ); } ); } );
Code for the "Item" dynamic page:
import { local } from 'wix-storage'; import wixLocation from 'wix-location'; $w.onReady(function () { $w("#previous").disable(); $w("#next").disable(); if (local.getItem('dynamicPageURLs')) { const dynamicPageURLs = local.getItem('dynamicPageURLs').split(','); const currentPage = '/' + wixLocation.prefix + '/' + wixLocation.path.join('/'); const currentPageIndex = dynamicPageURLs.indexOf(currentPage); if (currentPageIndex > 0) { $w("#previous").link = dynamicPageURLs[currentPageIndex - 1]; $w("#previous").enable(); } else { $w("#previous").link = dynamicPageURLs[dynamicPageURLs.length - 1]; $w("#previous").enable(); } if (currentPageIndex < dynamicPageURLs.length - 1) { $w("#next").link = dynamicPageURLs[currentPageIndex + 1]; $w("#next").enable(); }else{ $w("#next").link = dynamicPageURLs[dynamicPageURLs.length - 1 - currentPageIndex]; $w("#next").enable(); } } });
Feel free to copy this code over to your sites and have fun!