Hi I am trying to scroll through data on a single (not category page) and have found code on a post from Shay ( https://www.wix.com/code/home/forum/questions-answers/what-is-wrong ) but can’t get it to work, I believe I have entered it all correctly
My site page is here https://tailoredwebdesign.wixsite.com/universesports-1/halloffame
My pictures link to the dataset dynamic pages, then I want to scroll through the data.
Thanks
I’m having the same problem. Sam helped me with it initially, but there seems to be a linked page that needs some code and I can’t get that one right. This is an important facility to improve the navigation of my site.
Hi,
We’re working on writing an article to explain how to do this. In the meantime you might want to see some of the suggestions I provided in the post below. Maybe one of them can work for your situation.
Great as it seems a lot of other people are having issues with this. The link u provided doesn’t have any new info. Any ETA on the article?
The article should be ready soon. I will post a link to it here when it is available.
We just added a new article demonstrating how create previous and next buttons for a dynamic item page.
https://support.wix.com/en/article/how-to-create-previous-and-next-buttons-for-a-dynamic-item-page
We’d appreciate any feedback on whether or not the article helped you create previous and next buttons on your dynamic item pages.
Worked for me! Thanks!
I’m getting this error code:
Wix code SDK error: The url parameter that is passed to the to method cannot be set to the value . It must be of type string.
anno, try to check out the if field value of the unique URLs column matches the one in the code.
I got this message too and it was solved that way.
Ah, thanks so much, Sharon, will do.
Thanks to Sharon’s helpful suggestion I’ve managed to get it to work to scroll through an A-Z of plants. But, it works this way no matter what category page I enter from. How do I get it to choose the next grassland category plant rather than the next alphabetical plant for people looking plants from a specific category? Many thanks.
First off, this is good feedback, so thanks. We will think about how to integrate this scenario into the article.
In the meantime, off the top of my head I can think of two ways to accomplish what you’re trying to do.
Follow the instructions Shay lays out in this post: https://www.wix.com/code/home/forum/questions-answers/what-is-wrong. This will set the items for the previous and next buttons based on where the user came from. Note, that if you use this approach and a user reaches one of your items pages directly with a URL, without going through a category or index page, the previous and next buttons will be disabled.
You can add to the code from the article so it checks which page the user came from, filters the query based on that info, and also changes the sort field if necessary.
Please continue to give us your valuable feedback. Let us know which of the above approaches works best for you.
Thanks, Sam. Ok, bearing in mind that I have never used code so haven’t a clue what I"m doing, I amended your new article code (nothing ventured, nothing gained), choosing the Habitat field and adding a grassland filter to it. My changes are in bold in the code added below.
Now the button does choose only grassland plants, but not in alphabetic order; seems to jump all over the place. But, this won’t work for all other categories. What code would I add to read which category page the user is coming from, then chooses that page’s filter used to create the page, then sorting the plants alphabetically? Many thanks.
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
let collectionName = “Plants”;
let sortField = “habitat” ;
let linkField = “link-Plants-title”;
$w.onReady(function () {
$w(“#dynamicDataset”).onReady( () => {
let currentSort = $w(“#dynamicDataset”).getCurrentItem()[sortField];
let currentId = $w(“#dynamicDataset”).getCurrentItem()[“_id”];
wixData.query(collectionName)
.le(sortField, currentSort)
.descending(sortField)
.descending(“_id”)
.descending(“_filter-grassland”)
//.limit(116)
.find()
.then( (results) => {
let index = results.items.findIndex( (item) => item._id === currentId );
if(index >= 0 && index < results.items.length - 1) {
$w(“#previous”).onClick( () => {
wixLocation.to(results.items[index + 1][linkField]);
} );
$w(“#previous”).enable();
}
else {
$w(“#previous”).disable();
}
} );
wixData.query(collectionName)
.ge(sortField, currentSort)
.ascending(sortField)
.ascending(“_id”)
.ascending(“_filter-grassland”)
//.limit(116)
.find()
.then( (results) => {
let index = results.items.findIndex( (item) => item._id === currentId );
if(index >= 0 && index < results.items.length - 1) {
$w(“#next”).onClick( () => {
wixLocation.to(results.items[index + 1][linkField]);
} );
$w(“#next”).enable();
}
else {
$w(“#next”).disable();
}
} );
} );
} );
First off, very brave for someone who’s “never used code” to give this one a go. You’re doing great so far.
If you only want “grassland” plants to show, you need to add a .eq(“habitat”, “grassland”) to the query instead of what you did (assuming the field name is “habitat” and the value you want is “grassland”). If you want to keep the same ordering as before, you should change the value of the sortField variable back to what it was before.
That being said, the simplest way you to know which category page the user is coming from is to use the wix-window referrer property. However, I just tested it out doing it that way and it’s not working. We might have a bug. We’re looking into it now.
The other way is to use local storage to pass the category of the category page along to the item page. This is the basis of the other approach I pointed out before. But instead of passing just the category, it passes all of the links as well.
If you’re willing to try it, I think scrapping the approach you’ve been taking until now for the other way will work better under the circumstances. (There is a good chance we will amend the article to take that approach as well.) I will post some code and a short explanation in a few minutes.
This approach has two code snippets, one for the category page and one for the item page.
Category page:
import {local} from "wix-storage";
let linkField = "link-to-item"; // replace value with field key for item page
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
let numberOfItems = $w("#dynamicDataset").getTotalCount();
$w("#dynamicDataset").getItems(0, numberOfItems)
.then((result) => {
let dynamicPageURLs = new Array();
result.items.forEach( (item) => {
dynamicPageURLs.push(item[linkField]);
});
local.setItem('dynamicPageURLs', dynamicPageURLs);
})
.catch(( err) => {
console.log(err.code, err.message);
});
});
});
This code assumes your dataset has the ID dynamicDataset. You also need to set the linkField variable to the proper field key in your collection for the item page.
Item page:
import {local} from 'wix-storage';
import wixLocation from 'wix-location';
$w.onReady(function () {
$w("#previous").disable();
$w("#next").disable();
if (local.getItem('dynamicPageURLs')) {
let dynamicPageURLs = local.getItem('dynamicPageURLs').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();
}
}
});
This code assumes your buttons have the IDs next and previous.
If you try this code please let us know how it goes and if it is easier than the first way you tried.
Thanks again for the valuable feedback.
That works a treat!! Thank you, thank you! Initially it didn’t work until I realised I had to enter the link-Plants-title page url into the item page as well. Even though I must obviously add it to every category page it does seem much simpler for a non-coding person. I also know why one code uses wix storage and the other, wix data. Thanks so much, Sam.
Great to hear. You’ve ventured and you’ve gained. Keep it up and let us know how it’s going.
Hi anno, sharon, leighton.
we are currently thinking about supporting the prev/next functionality on an item page out of the box.
to help us get it right, it would be awesome if you could describe in your own words what do you expect to happen when a user clicks next or prev on an item page.
more specifically -
appreciate your feedback!
thanks.
Hi Ziv and gang, thanks for all your work it is much appreciated.
It would be great for this to work out of the box, I think it would be a much used feature.
For my application I don’t think this work around is the right way. I have the gallery as my main page, user clicks the image to go to the dynamic page. The ‘Next’ button should then go to the image that is next in line in the gallery. It is not listed alphabetically but by the date in which it was added.
So from your question above:
I expect the next button to go to the next image or ‘person’ in the gallery. Previous would only work if you didn’t click the first image. I guess I mean to go the next database item in order of date added.
I guess the same thing, but the user wouldn’t know what was really next as they hadn’t seen the gallery
Hi Ziv!
Thank you very much for you work!
Thanks for you help,
Sharon