I am trying to create an online directory with vendors listed by COMPANY, STATE and PROFESSION.
To begin, any help on creating a drop down menu that allows a user to select a COMPANY and then be automatically directed to the Dynamic Page of that Company.
Example: Open drop down menu on homepage > Select “SAID COMPANY” > User is automatically sent to dynamic page which shows that Company.
I have not created a list of all the items in my collection yet. But I just created an interim list on the same URL I referenced previously. Let me know if this helps.
Definitely not remedial. I am no developer so most of this Wix Code is well over my head. For the table that connects to the dynamic pages, I followed step-by-step this video on youtube. hope it helps!
What you’re trying to achieve is most easily built with a table that has built in functionality for linking to other pages when items are clicked. However, you can achieve a similar result with a dropdown if you don’t mind writing a bit of code.
The idea here is to create an event handler for the dropdown’s onChange event. In that event handler, you can use the wix-location to( ) function to send the user to the relevant dynamic page.
Thanks, Sam. Writing Code is a bit beyond my abilities / understanding. Can I find a sample code to copy and paste? Do I simply plug that into the spot where it says: “write your page related code here…”
You will basically need to write an onChange event handler for the dropdown and use the location API to navigate to the actual page.
You add the event from the property editor while selecting the dropdown. Once you add the event, you should write code that looks like
import location from 'wix-location';
import wixData from 'wix-data';
export function dropdown_onChange(event) {
let value = $w('#dropdown').value;
wixData.query('collection')
.eq('field', value)
.find()
.then(res => {
if (res.length > 0)
location.to(res.dynamicUrlField);
})
}
Notes:
dropdown is the id of your dropdown element
collection is the collection name
field is the name of the field in the collection you use to identify items in it. It is probably the title, unless you selected a different field for the dropdown options.
dynamicUrlField is a field in the collection generated for the dynamic pages. It is the field key of the field with the link to the pages.
Thank you very much Yoav. It seems like you have laid this out very clearly. However, it is still well over my head and can’t seem to implement it. Thanks for your input on this.
I will add a few comments to what Yoav has wrote, hopefully making it easier to implement.
the idea is to add this code snippet to the page that has the dropdown on it.
here’s the code, this time with comments:
//the following line tells the system we want to use the wix-location module
import location from 'wix-location';
//the following line tells the system we want to use wix-data to read data from a collection
import wixData from 'wix-data';
//this is the event handler. this code will run whenever the value of the dropdown is changed
export function dropdown_onChange(event) {
// select the dropdown element and read its current value
let value = $w('#dropdown').value;
//build a wix-data query that looks for this value in a collection
wixData.query('collection')
.eq('field', value) //find rows that have this value in the 'field' field
.find() //run the query
.then(res => { //when the data returns, do the following
if (res.length > 0) //if we have retrieved at least one record
location.to(res.dynamicUrlField); //tell wixcode to navigate to the URL in the field 'dynamicUrlField'
})
}
The dynamicUrlField is the field key of the field generated by the dynamic page. You can see this field key in the database view when clicking the field properties on the link field.
1 $w.onReady(function () {
2 //TODO: import location from ‘wix-location’; X 3 import wixData from ‘wix-data’; “import and export may only appear at the top level”
4 ! 5 export function dropdown_onChange(event) { “Parameter ‘event’ is never used” X 6 let value = $w(‘Aarika Day Photography’).value; “Aarika Day Photography is not a valid selector name”
7 wixData.query(‘Vendors’)
8 .eq(‘title’, value)
9 .find()
10 .then(res => {
11 if (res.length > 0) X 12 location.to(res.link-Vendors-title); " ‘location’ is undefined ‘Vendors’ is undefined ‘title’ is undefined"
13 });
14 }
15 });
k. here’s what I have Thanks to everyone who has been so helpful to try and get this functional. I’m getting a few errors / warnings throughout the code. thoughts?
import wixData from 'wix-data';
import location from 'wix-location';
$w.onReady(function () {
});
export function dropdown_onChange(event) {
let value = $w('Aarika Day Photography').value; "Aarika Day Photography is not a valid selector name"
wixData.query('Vendors')
.eq('title', value)
.find()
.then(res => {
if (res.length > 0)
location.to(res.items[0]['link-Vendors-title']);
});
}
I have changed a few things
moved the import line to be the first line in the file
added import for location.
You can ignore the message about the event parameter not being used. It is just a notification, not an error.
res has an array of results called items - I have changed the code to use that - so now we have res.items[0] instead of res.
the link-Vendors-title is not a valid javascript term because of the ‘-’ inside of it. because of this I have changed it to be used as using the javascript member access notation res.items[0][‘member-name’] instead of res.link-Vendors-title.
There is still one thing to fix here - the ‘Aarika Day Photography’ id. ‘Aarika Day Photography’ is not a valid id - ids in Wix Code look like strings without spaces. You can find the id in the top of the property editor when you select the element in question. Once you find the id (lets assume the id is myElementId), you will need to write $w(‘#myElementId’)
Thanks Yoav. Sorry you are having to hold my hand through all this. Can you explain a bit further what you meant by this: ‘You can find the id in the top of the property editor when you select the element in question.’
Property Editor as in the database? The dropdown? Do I need to be in preview mode?
This will be my last question! If I don’t get it from here, I will figure our a way to get it up and going. Thanks for all your time.
You access the property panel from “tools” ==> “developer tools” ==> “property panel”.
once you select a component, the ID is shown at the top of the panel.
Hello, I am a beginner in code and need help on creating a drop down menu that allows a user to select a items and then be automatically directed to the Dynamic Page .
I tried this code…
Thanks for all your time…
Thanks Sam ! for your feedback
I appreciate your knowledge and time
Now I can see the items …
but I can not link to the collection you could suggest me how to do it?
Thanks to everyone who has been so helpful to try and get this functional. I’m getting a few errors / warnings throughout the code. thoughts?
