Hello!!
I am working on an index page that will show all characters in a project i am writing, and clicking a “profile” button will bring them to their profile page. Most characters use a dynamic page for their profile, but I have a select few characters that I still want to show on the index page, but have their profiles be made unique.
I have figured out how to link them to their correct pages from the index (instead of using the default dynamic page link, I make a url field for each character and give the unique ones their unique url), however on the dynamic item pages themselves I have previous and next buttons to scroll through the characters in alphabetical order. This is where I am getting the problem - when scrolling through characters, if I get to one of the unique characters the button will still lead to their dynamic profile page instead of their unique one.
Here is the code I am using in the buttons on the dynamic pages - the first being for the ‘next’ button and the second being for the ‘previous’ button.
export function vectorImage2_click_1(event, $w) {
$w("#dynamicDataset").getNextDynamicPage()
.then((next) => {
if (next) {
wixLocation.to(next);
}
});
}
export function vectorImage3_click_1(event, $w) {
$w("#dynamicDataset").getPreviousDynamicPage()
.then((prev) => {
if (prev) {
wixLocation.to(prev);
}
});
}
Is there any efficient way to link to these unique pages from the next/previous buttons, while still linking to the dynamic pages for the other characters? I am not fluent in code by any means, so any help is appreciated! I can provide pictures and more information if needed! Thank you so much! :))
If that list of unique characters is constant, you can write it in code, and in your functions just add another check against that list.
If the item is in the list, just don’t change the location.
So, for example, you can change the code to:
const uniqueNames = [‘char1’, ‘char2’, ‘char3’]; // put the real names here
Thank you for your help!! It looks like by adding this code in (and changing ‘next.includes(name)’ to ‘prev.includes(name)’ in the previous button’s code), pressing the button will no longer take you to the dynamic page for the unique characters - so we’re halfway there! It may no longer take you to the dynamic page, but it still doesn’t take you to the unique page I’ve created for the characters! is there a way to add that in as well?
I’m glad to hear it worked.
As per your question, yes, it’s possible.
There are 2 ways to go about it:
If the list is long, you need to have a generic way to map between the character name and the unique page url, otherwise you will need to map each one individually. which will be very tedious.
So if we can assume that the character name is the same as url name (or can be easily transformed into it), it will save you some work.
If you cannot ‘predict’ the page url from the name, then you will need to map each name to its relevant page.
The code will be the same, except for the function goToUniquePageName , which will have a different implementation, depending on the solution you choose (see below).
Note that it’s only the ‘next’ part, ‘prev’ will be the same only with ‘prev’ :
const uniqueNames = [‘char1’, ‘char2’, ‘char3’]; // put the real names here
export function vectorImage2_click_1(event, $w) { $w(" #dynamicDataset ").getNextDynamicPage() .then((next) => { if (next) {
const matchingUniqueName = uniqueNames.find(name => next.includes(name ));
if (matchingUniqueName === undefined) {
// no matching name, go to generic page wixLocation.to (next); }
else {
// found matching name, go to the unique page (you might be able to remove the ‘return’)
return goToUniqueNamePage(matchingUniqueName);
}
}
}
); }
// Example of function for generic case
// you can avoid defining this function if the mapping between name and page url is simple. Otherwise, it’s better to extract it to a separate function
export function goToUniqueNamePage(uniqueName) {
// (you might be able to remove the ‘return’)
return wixLocation.to(uniqueName); // If the mapping is different, you can change this
}
// Example of function for non generic case
// Commented out on purpose, as I haven’t implemented the inner functions (isCharles, etc.)
// export function goTOUniqueNamePage(uniqueName) {
// if (isCharles(uniqueName))
// goToCharlesPage;
// if (isAnna(uniqueName))
// goToAnnaPage;
…
…
}
Hey again, thanks so much for the detailed reply! I seem to be having trouble getting this all to work, though… let me show you what I’ve got, and maybe you can help me figure out what still needs to be done?
import wixLocation from 'wix-location';
const uniqueNames = ['Merisdae', 'Senva', 'Cecil', 'Zixin', 'Naiirae', 'SOUND', 'Anabaru', 'Yudora']; // put the real names here
export function vectorImage2_click_1(event, $w) { $w("#dynamicDataset").getNextDynamicPage() .then((next) => { if (next) {
const matchingUniqueName = uniqueNames.find(name => next.includes(name));
if (matchingUniqueName === undefined) {
wixLocation.to(next); } // no matching name, go to generic page
else {
return goToUniqueNamePage(matchingUniqueName); // found matching name, go to the unique page (you might be able to remove the 'return')
}
}
}
); }
The pages they should be linking to for the unique pages are just ‘/[name]’, for example ‘/Merisdae’ or ‘/Cecil’. It’s definitely partially working, because it scrolls through the list fine until it hits one of the characters with the unique page - however it still doesn’t seem to want to link to the page? Am I doing something wrong?
I believe so? Again, I don’t really have much coding knowledge at all, so I’m not sure if I’ve done this right - but I do have this:
// Example of function for generic case
// you can avoid defining this function if the mapping between name and page url is simple. Otherwise, it's better to extract it to a separate function
export function goToUniqueNamePage(uniqueName) {
// (you might be able to remove the 'return')
return wixLocation.to(uniqueName); // If the mapping is different, you can change this
}