Question:
Hi,
I would like to let the user switch between dynamic pages with back/forward buttons. This can be done easily without coding by linking the buttons to the CMS.
However, I don’t want to go through all pages, but only the pages of the “category” that the initially called dynamic page has (e.g. all dynamic pages of the type “Restaurant”). category is of type “Tag” in the CMS database (several tags are possible).
Is it possible to link the buttons to the CMS (previous and next dynamic page) and filter the dynamic pages via code so that only the desired selection of pages is called?
Can anyone help me with this?
Best regards, Spectral
Product:
Wix Editor
What have you already tried:
I have tried it this way, but all pages are still scrolled through:
$w('#dynamicDataset').onReady(() => {
const currentCategory = $w("#dynamicDataset").getCurrentItem().category[0];
$w("#dynamicDataset").setFilter(wixData.filter().contains("category", currentCategory))
});
Not sure if this will work on a dynamic dataset,
but you can try using the setFilter() option to filter the dataset by fetching the tag each time the user loads the page.
Did you create regular item dynamic pages?
Or category pages?
Regular item page will have a URL ending like .com/restaurantName
Category page will have a URL ending like .com/chinese/restaurantName
Therefore adding a next or previous button will scroll through the appropriate matching items (all restaurants vs chinese only restaurants)
1 Like
Hi @codequeen,
I have a single dynamic page (.com/restaurantName).
More precisely, I have around 10 dynamic list pages that all refer to the same dynamic item page. An dynamic item page can belong to several categories.
And since there are about 200 pages, I don’t want to change the url ´s anymore 
Thx for your help, Spectral
Hi @Pratham,
…isn’t that what I was trying to do (see my code above) or do you mean something else?
Spectral
PS.
I have also tried something like this (for the next-button), but it doesn’t work either (no further element is found) - it would probably work if the code was correct
$w('#buttonnext').onClick(() => {
const currentItemId = $w("#dynamicDataset").getCurrentItem()._id;
const currentCategory = $w("#dynamicDataset").getCurrentItem().category[0];
wixData.query("Elemente1")
.eq($w("category", currentCategory)
.ne("_id", currentItemId) //not the current element
.limit(1) // only the next element
.find()
.then(result => {
if (result.items.length > 0) {
const nextItem = result.items[0];
// wixLocation.to(............);
} else {
console.log("No next element found");
}
})
.catch(err => {
console.error("Error1:", err);
})
});
Here’s another method to do what you’re trying to achieve. But note that this method takes up a good chunk of data query, and the URL method suggested above will anytime be much healthier.
Code:
import wixData from 'wix-data';
$w.onReady(function () {
$w('#dynamicDataset').onReady(() => {
const currentItem = $w("#dynamicDataset").getCurrentItem();
const currentCategory = currentItem.type;
const currentId = currentItem._id;
wixData.query("Elemente1")
.eq("category", currentCategory)
.limit(1000)
.find()
.then((results) => {
if (results.items.length > 0) {
var index = results.items.findIndex(function (element) {
return element._id === currentId;
});
if (index == 0) {
$w('#prevButton').hide();
} else {
let prevLink = ""; //index - 1
prevLink = prevLink.replace(/ /g, "-");
$w('#prevButton').link = prevLink;
$w('#prevButton').target = "_self";
}
if ((results.items.length - index) == 1) {
$w('#nextButton').hide();
} else {
let nextLink = ""; //index + 1
nextLink = nextLink.replace(/ /g, "-");
$w('#nextButton').link = nextLink;
$w('#nextButton').target = "_self";
}
}
})
.catch((err) => {
console.log(err);
});
});
});
Make sure to disconnect the Prev and Next buttons from your dataset in the editor.
Hi @Pratham,
thank you very much for your help, I will try out your suggestion!
Greetings, Spectral
Hi @Pratham,
I have adapted the code as follows:
$w('#dynamicDataset').onReady(() => {
const mycurrentItem = $w("#dynamicDataset").getCurrentItem();
const currentCategory = mycurrentItem.kategorie[0];
const currentId = mycurrentItem._id;
console.log("currentCategory: " + currentCategory)
wixData.query("Elemente1")
.eq("kategorie[0]", currentCategory)
.limit(1000)
.find()
.then((results) => {
if (results.items.length > 0) {
var index = results.items.findIndex(function (element) {
return element._id === currentId;
});
if (index == 0) {
$w('#buttonprevious').hide();
} else {
let prevLink = ""; //index - 1
prevLink = prevLink.replace(/ /g, "-");
$w('#buttonprevious').link = prevLink;
$w('#buttonprevious').target = "_self";
}
if ((results.items.length - index) == 1) {
$w('#buttonnext').hide();
} else {
let nextLink = ""; //index + 1
nextLink = nextLink.replace(/ /g, "-");
$w('#buttonnext').link = nextLink;
$w('#buttonnext').target = "_self";
}
}
else {
console.log("No results.")
}
})
.catch((err) => {
console.log(err);
});
});
However, no elements are found (console output: “No results.”).
“currentCategory” is output correctly on the console and there are actually many corresponding database entries. The database name is “Elements1”. The field ID of the column is “kategorie”. I only want to compare the first entry (of type “tag”), hence “kategorie[0]”.
Do you have any idea why this might be?
Oh, so do you mean your kategorie field is a selection tag field?
Can you provide a screenshot of the column in the CMS?
Yep
Here is a screenshot (CMS) with the column “Kategorie”:
…and the collection witth the field id (“kategorie”) - at the end:
Hi @Spektral ,
In this case, you can use the hasSome() filter.
Use the code below:
import wixData from 'wix-data';
$w.onReady(function () {
$w('#dynamicDataset').onReady(() => {
const currentItem = $w("#dynamicDataset").getCurrentItem();
const currentCategory = currentItem.kategorie[0];
const currentId = currentItem._id;
wixData.query("Elemente1")
.hasSome("kategorie", currentCategory)
.limit(1000)
.find()
.then((results) => {
if (results.items.length > 0) {
var index = results.items.findIndex(function (element) {
return element._id === currentId;
});
if (index == 0) {
$w('#prevButton').hide();
} else {
let prevLink = "" //index - 1
prevLink = prevLink.replace(/ /g, "-");
$w('#prevButton').link = prevLink;
$w('#prevButton').target = "_self";
}
if ((results.items.length - index) == 1) {
$w('#nextButton').hide();
} else {
let nextLink = ""; //index + 1
nextLink = nextLink.replace(/ /g, "-");
$w('#nextButton').link = nextLink;
$w('#nextButton').target = "_self";
}
}
})
.catch((err) => {
console.log(err);
});
});
});
Hi @Pratham,
Thank you for your continued support!
Now a result is found, but nothing happens when clicking on the buttons.
I am still trying to find out more 
Regards!
Happy to help!
For this you need to set the link of the buttons based on your dynamic URL structure.
If you can provide the URL structure of the dynamic page, I’ll be happy to assist you with it (:
Hi @Pratham,
this is for every page …com/goto/<field ID “url”>
Best regards!
Here you go:
import wixData from 'wix-data';
$w.onReady(function () {
$w('#dynamicDataset').onReady(() => {
const currentItem = $w("#dynamicDataset").getCurrentItem();
const currentCategory = currentItem.kategorie[0];
const currentId = currentItem._id;
wixData.query("Elemente1")
.hasSome("kategorie", currentCategory)
.limit(1000)
.find()
.then((results) => {
if (results.items.length > 0) {
var index = results.items.findIndex(function (element) {
return element._id === currentId;
});
if (index == 0) {
$w('#buttonprevious').hide();
} else {
let prevLink = "/goto/" + results.items[index - 1].url;
prevLink = prevLink.replace(/ /g, "-");
$w('#buttonprevious').link = prevLink;
$w('#buttonprevious').target = "_self";
}
if ((results.items.length - index) == 1) {
$w('#buttonnext').hide();
} else {
let nextLink = "/goto/" + results.items[index + 1].url;
nextLink = nextLink.replace(/ /g, "-");
$w('#buttonnext').link = nextLink;
$w('#buttonnext').target = "_self";
}
}
})
.catch((err) => {
console.log(err);
});
});
});
1 Like
Hi @Pratham,
great, now it works (and I couldn’t have done it on my own).
Thank you very much for your help, I really appreciate it!
And best regards, Spektral
1 Like