Hi, I first set up the next and previous buttons for www.theplantlibrary.co.za way back in Aug 2017 but they no longer work and I cannot figure out why. I have 7 separate galleries on each category/title page; clicking on an image within a gallery takes you to a dynamic item page from which the user needs to navigate through images within the gallery the user entered the item page from. My old category page code read:
import {local} from “wix-storage”;
import wixWindow from ‘wix-window’;
const linkField = “plantsTitle”; $w.onReady( function () {
setUrls(‘#hotTrees’, ‘trees’);
setUrls(‘#hotShrubs’, ‘shrubs’);
setUrls(‘#hotPerennials’, ‘perennials’);
setUrls(‘#hotSucculents’, ‘succulents’);
setUrls(‘#hotGroundcovers’, ‘groundcovers’);
setUrls(‘#hotBulbs’, ‘bulbs’);
setUrls(‘#hotGrass’, ‘grass’); });
function setUrls(datasetSelector, galleryCategory) { $w(datasetSelector).onReady(() => { const numberOfItems = $w(datasetSelector).getTotalCount();
$w(datasetSelector).getItems(0, numberOfItems)
.then( (result) => { const plantsTitle = result.items.map(item => item[linkField]); local.setItem(galleryCategory, plantsTitle); })
. catch ( (err) => { console.log(err.code, err.message); }); }); }
export function trees_itemClicked(event) { local.setItem(‘selected-gallery’, ‘trees’); }
and so on for each gallery
The dynamic item page code read:
import {local} from ‘wix-storage’;
import wixLocation from ‘wix-location’;
$w.onReady(function () {
$w(“#previous”).disable();
$w(“#next”).disable();
const selectedGallery = local.getItem(‘selected-gallery’);
if (selectedGallery) {
const dynamicPageURLs = local.getItem(selectedGallery).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();
}
if (currentPageIndex < dynamicPageURLs.length - 1) {
$w(“#next”).link = dynamicPageURLs[currentPageIndex + 1];
$w(“#next”).enable();
}
}
} );
In trying to get it to work again, I’ve added the code given in your article on how to create these navigation buttons. The first dataset on the page is grasslandTrees, the collection is Plants, the key is plantsTitle.
As per your category page cod, I’ve written:
import {local} from ‘wix-storage’;
const linkField = “link-to-item”; // replace this value
$w.onReady(function () {
$w(“#grasslandTrees”).onReady(() => {
const numberOfItems = $w(“#grasslandTrees”).getTotalCount();
$w("#grasslandTrees ").getItems(0, numberOfItems)
.then( (result) => { const dynamicPageURLs = result.items.map(item => item[linkField]); local.setItem(‘plantsTitle’, dynamicPageURLs); } )
.catch( (err) => {
console.log(err.code, err.message);
} );
} );
} );
But, without ‘selected-gallery’ how does this work with my 7 datasets linked to the 7 galleries?
I’ve also added the dynamic item page code from the article, but how does it differentiate between the separate galleries on the category page?
As per your article the dynamic item page code reads:
import { local } from ‘wix-storage’;
import wixLocation from ‘wix-location’;
$w.onReady( function () {
$w(“#previous”).disable();
$w(“#next”).disable();
if (local.getItem(‘plantsTitle’)) {
const dynamicPageURLs = local.getItem(‘plantsTitle’).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();
}
if (currentPageIndex < dynamicPageURLs.length - 1) {
$w(“#next”).link = dynamicPageURLs[currentPageIndex + 1];
$w(“#next”).enable();
}
}
});
In the old code, I assumed the phrase selected-gallery used in the click button event on the category page and on the dynamic item page gave the instruction to move through each specific gallery when clicking on the next/previous buttons.
With this code, the buttons look live but nothing happens when clicked. Its as if there is nothing to say where the clicking action on Next must take you to.
I would really appreciate assistance with this. Many thanks.
Anno