I have a staff page on my website that I created with a repeater which is connected to a data collection. I understand that anchors are incompatible with repeaters but I am wondering if there is an alternative. I have a contact page that lists the contact information of our main office staff and I would like to have a “Learn more about so-and-so” button that redirects users to that employee’s specific entry in the repeater on the dynamic page. Is that possible?
Before I got a handle on the repeater feature, I was manually building each staff bio. Not only was it a terribly inefficient use of time, the mobile version translation of what I had designed was a mess. So I am not utilizing the repeater feature which has worked out pretty well. In my original design (before I utilized repeaters), I had it set up so that when users were on the Contact Page, they could click the employee’s name and it would lead them to that person’s bio on the Staff Bio page. I did this by using an anchor. But I can’t use anchors with the repeaters. I also had it set up so that when users were on the Staff Bio page, they could jump down to a specific group of employees based on their job category. I did this using anchors as well. I’ve seen some helpful articles about how to filter repeaters which I might use for that issue though. That might be an entirely different forum thread right there! Please let me know if anyone needs more clarification on any aspect of my project.
I know how to do it, but I don’t have time to explain right now (even though it’s not too complicated).
I’ll try later today (or tomorrow).
Meanwhile, please confirm that the page where the user click the “read more about x” and the page with the repeater are not the same.
So -
first, I’ll assume that you’re using the same staff collection on both pages.
You’ll have to pass the staff member id between the 2 pages.
There’re 2 simple way to do it:
Via the URL query parameters.
Via the memory or browser cache.
For the sake of the example let’s go for the URL params method.
Page 1:
Un-link the button on the editor (we’ll do everything via code):
import wixLocation from 'wix-location';
$w.onReady( function() {
$w("#button1").onClick((event) => {
wixLocation.to("/staff?id=" + staffMemeberId);//use the member Id as appears in your collection
})
})
Thanks, JD. I actually did not connect the Contact Us page to a data collection. That might have been more efficient but I built the contact page first and there were only 4 contacts listed so I didn’t bother creating a data set. How does the code change if the Contact Us page is not connected the same data collection as the Staff Bios page?
If you have only 4 contacts on the first page, you can look at your collection, copy their ID, and make it hard-coded. your code on the first page can be something like:
import wixLocation from 'wix-location';
$w.onReady( function() {
$w("#button1, #button2, #button3, #button4").onClick((event) => {
let contactId;
let clickedButton = event.target.id;
switch (clickedButton) {
case "button1": contactId = "rere_ererreR";
break;
case "button2": contactId = "resdse_ersdreh";
break;
case "button3": contactId = "resdse_ererew";
break;
case "button4": contactId = "erere_ergrr";
break;
}
wixLocation.to(`/staff?id=${contactId}`);
})
})
I have a couple questions . . . bear with me . . .
On the Contact Page, where users will click a button that will navigate them to the dynamic Staff Bios page:
Is the ID I need to include in the code from the ID field that is hidden by default in the database? Or is it the ID from another field?
Where in the code you supplied would I paste the ID?
How does the code know to navigate to the Staff Bio page and how does it know what database to look for the IDs?
On the Staff Bios page:
When I change “dataset1” to “bios” which is the name of my database, I bet the red dot of doom. The error message tell me: ‘bios’ is not a valid selector.
This has definitely thrown me for a loop!
Maybe the easier thing to do is to start out with talking me through making the buttons on the Staff Bios page scroll to specific entries displayed in the repeater. That way I can more easily wrap my head around the code.
Is the ID I need to include in the code from the ID field that is hidden by default in the database? Or is it the ID from another field? -Yes. It’s hidden by default. You can make it visible.
Where in the code you supplied would I paste the ID? -Between thequotation marks: contactId = “rere_ererreR”; (for each of the contact buttons)
How does the code know to navigate to the Staff Bio page and how does it know what database to look for the IDs? -Have a look at this code line:
wixLocation.to(`/staff?id=${contactId}`);
instead of the word staff use the url path of the Staff bio page (the part of the url after the slash).
This code line will add the contactId to the url
On the Staff Bios page:
When I change “dataset1” to “bios” which is the name of my database, I bet the red dot of doom. The error message tell me: ‘bios’ is not a valid selector. -don’t use the dataset name. Use the dataset property id (as appears in the property panel)
OK, so this is what I did and I definitely did something incorrectly . . . The error is likely in the code on the Staff Bio page (though there may be more errors elsewhere). Do I need to replace “[staffId]” with an actual ID?
Contact Page:
import wixLocation from ‘wix-location’;
$w.onReady( function () {
$w(“#hdButton, #wkButton, #smcButton, #bkButton”).onClick((event) => { let contactId; let clickedButton = event.target.id; switch (clickedButton) { case “hdButton”: contactId = “a78dd4c6-1180-4181-b5b1-3aefbf4683f0”; break ; case “wkButton”: contactId = “fb322ebf-d68b-4f4a-83a9-2bda074eaf95”; break ; case “smcButton”: contactId = “77894be0-cbf9-4583-9084-12f05ffbe9f4”; break ; case “bkButton”: contactId = “792a3004-8319-4dc8-b9ab-539e2d778c21”; break ;
}
wixLocation.to(/bios?id=${contactId});
})
})
Staff Bio Page:
import wixLocation from ‘wix-location’;
$w.onReady( function () {
$w(“#biosDataset”).onReady( () => { let staffId = wixLocation.query.id;
$w(“#repeater1”).forItems( [staffId], ($item, itemData, index) => {
$item(“#image72”).scrollTo();
})
})
})
OK, I figured out why I was getting an error message. I typed in one of the ID’s incorrectly. Also, I was confused initially because when I clicked the buttons on the Contact page, it seemed to be navigating to the middle of my entries but then I realized it was just the frozen header that was in the way. But I found a workaround! Thank you so much for your help! I really appreciate it! I am going to give the code for the the buttons on the Staff Bios page a whirl. If I have questions, should I post on this thread or start a new one?
