Hi, I have up to 6 data sets linked to 6 galleries on a single page. How do I link each one to the next and previous button code? The code I currently have links only dataset1. I’m not sure where or how to add the others inside this code. Many thanks.
Anno
Hi, can you share the code you currently have?
Hi Tomer,
I’ve used the code initially given when the Next and Previous buttons code was written up, and it worked perfectly. Now I see the code in that article has changed, and my code is no longer working. I now get this error message:
Loading the code for the Grassland page. To debug this code, open srllq.js in Developer Tools.
So, I have 2 issues; how to get this code working again, and how to link 6 datasets per page to the buttons.
Here is my current code:
Gallery page code:
import {local} from “wix-storage”;
let linkField = “link-Plants-title”;
$w.onReady(function () {
$w(“#dataset1”).onReady(() => {
let numberOfItems = $w(“#dataset1”).getTotalCount();
$w(“#dataset1”).getItems(0, numberOfItems)
.then((result) => {
let dynamicPageURLs = new Array();
result.items.forEach( (item) => {
dynamicPageURLs.push(item[linkField]);
});
local.setItem(‘link-Plants-title’, dynamicPageURLs);
})
.catch(( err) => {
console.log(err.code, err.message);
});
});
});
Dynamic Title Page Code
import {local} from ‘wix-storage’;
import wixLocation from ‘wix-location’;
$w.onReady(function () {
$w(“#previous”).disable();
$w(“#next”).disable();
if (local.getItem(‘link-Plants-title’)) {
let dynamicPageURLs = local.getItem(‘link-Plants-title’).split(“,”);
let currentPage = “/” + wixLocation.path.join(‘/’);
let currentPageIndex = dynamicPageURLs.indexOf(currentPage);
if (currentPageIndex > 0) {
$w(“#previous”).onClick( () => {
wixLocation.to(dynamicPageURLs[currentPageIndex - 1]);
} );
$w(“#previous”).enable();
}
if (currentPageIndex < dynamicPageURLs.length - 1) {
$w(“#next”).onClick( () => {
wixLocation.to(dynamicPageURLs[currentPageIndex + 1]);
} );
$w(“#next”).enable();
}
}
});
Many thanks.
Anno
Just another point; I am getting a variety of error messages about debugging each page code: example below.
Loading the code for the Grassland page. To debug this code, open srllq.js in Developer Tools.Loading the code for the Plants (Title) page. To debug this code, open frgt9.js in Developer Tools.
Hi, a few things:
- These are not error messages, these are info messages telling you how to debug your code in case you need to.
- When you say the code is no longer working, is it after you changed it to match the updated article? Did it stop working without you doing anything? Can you elaborate on what exactly doesn’t work? I just want to make sure we didn’t break anything on our end.
- To support multiple galleries, you would have to save the links from all of them, because the user can click any one of them. To save them all, you just need to duplicate the code you have today, and save each gallery under its own key (currently the key you use is “link-Plants-title”).
The code in the dynamic page should get the list of URLs from the correct key.
How to do that? One option is to name the keys according to the dynamic page.
For example, if gallery #3 opens a dynamic page with URL “/plants”, I would name the key “plants”.
If gallery #5 opens a dynamic page with URL “/plant-types”, I would name the key “plant-types”. Then, in the dynamic page code, I would get the page url (using “wixLocation.path”) and use it to get the right value from the local storage (using “local.getItem”)
Please give it a try. If it doesn’t work, I will try to create a site similar to yours with a working code sample for you to use.
Thanks, Tomer. I haven’t yet changed the code to match the updated article and I am unsure just when it stopped working. The only change I made was to add new galleries and data sets to each page. The problem I can see with linking each dataset is that they all open the same dynamic page with the URL ‘Plants’. Every category page works off the same database collection, so, for example,
Category page, ‘Woodland’ draws plants with Woodland in the habitat field and opens the dynamic page ‘Plants’. Dataset 1 is linked to Plants dataset and I’ve added filters to get woodland plants with trees in the plant category field. Dataset 2 links to Plants dataset 2 with filters to get woodland plants with shrubs in the plant category field, and so on. But they are all linked to the plant title and sorted A-Z.
I have another idea. Instead of matching URLs, which is not possible in your case, you can add a click event handler to each gallery, and saving the last used gallery. Something like:
export function shrubsGallery_click(event) {
local.setItem('last-used-gallery', 'shrubs')
}
Then you can know which URLs to take in the dynamic page code.
Does it make sense?
Hi Tomer, ok, I’m happy to try it, but I think I need to fix the button navigation issue first because I can’t test if anything works if the Next button does not move me on to the next plant in the gallery. When I click on the first plant in the gallery, nothing happens. If I click on any other plant in the gallery, then click Next, it takes me back to that first plant. And the Previous button is not enabled. Any ideas?
The Next button gives me this: Wix code SDK Warning: The src parameter that is passed to the src method cannot be set to null or undefined.
Or is that just another message? I’m clueless and codeless 
Hi, trying to fix my next and previous button problem, below are my codes for the category and dynamic item pages. Please could you check to see why the buttons still don’t work. Many thanks.
I will take a look at your website and try to find the issue.
Regarding the warning: it means that you’re trying to set an image source to an invalid or “empty” URL. This is usually due to a bug in your code, which I’ll try to find
Thanks so much, Tomer. I appreciate it. I did take off the code from all the category pages except the Grassland page, planning to put the code back today, to see if that changed anything. I’ll work on that now.
I’m looking at the code in this page: https://www.theplantlibrary.co.za/treessmall
I found an issue, looks like we fixed a bug related to URLs which broke your code.
I will investigate and update.
OK, found the issue. In your item pages, change this line:
let currentPage = "/" + wixLocation.path.join('/');
to this:
let currentPage = "/" + wixLocation.prefix + "/" + wixLocation.path.join('/');
Please make the change and let me know if it works. Once we make sure it works, we will work on your initial request of supporting multiple galleries.
Great, we’re getting somewhere! That has fixed the navigation through the gallery, but for some reason, it now shows the image twice, with one overlapping the other.
I don’t think that’s possible unless you have two image elements on the page. Maybe you duplicated it by mistake?
The shrub gallery sits below the tree gallery. The first 3 plants in both are the same, and I think the shrub gallery is showing just beneath it - not moving down the page as the tree gallery expands to fit all the plants.
Actually,silly me. There is a duplicated image on the dynamic page. I’ve taken it off, and all works splendidly. Thanks so much, Tomer.
You’re welcome
So, I will work on a sample site that implements your initial request. I hope it will be ready today.
Thanks very much.