How can I link a items of a dropdown menu to dynamic pages?

Ask the community
,
1

Hello, I have a collection with around 70 items. I get the items of this dropdown menu from a dataset collection. Therefore, I am not adding them manually. I would like to use the item selected by the customer in this dropdown menu to redirect the page to the dynamic page associated to that item.

How can I do that?

Thank you.

2

Hi XCD,
I think this tutorial by the code queen is just for you:
https://www.totallycodable.com/example-dropdown-navigation
~Hope this helps!~
Arthur :grin:

3

Hi, thanks for replying.

I don’t know if I’m missing something or there is something that I don’t understand… I have read the tutorial and I understood that the only way to get this is adding the labels manually and specifying as a value the URL. Is this correct?

Is there no other way to get what I need? That method is fine if you have five elements in your dropdown menu, but I have more than 70!

Thank you.

4

Yes, there is a way to do it.

  1. You have a DATABASE-A with 70-items.
  2. You have a DYNAMIC-PAGE connected trough a DATASET with your DATABASE-A.
  3. Now you have 70-Dynamic pages.

You can make a querry of your DATABASE-A…

import wixData from 'wix-data';

// ...

wixData.query("myCollection")
  .find()
  .then( (results) => {
    if(results.items.length > 0) {
      let firstItem = results.items[0]; //see item below
    } else {
      // handle case where no matching items found
    }
  } )
  .catch( (err) => {
    let errorMsg = err;
  } );

Now you have a querry of 70-items.

Every of this items has an INDEX.

first-item --------> INDEX-0
second-item —> INDEX-1
and so on…

Your drop-down has also an INDEX! ! ! !

And now a little BRAINSTORMING for you :grin: :grin: :grin:

5

Thanks @arthurvalatin .

@rafaxerez … if you are attempting to load 70 items on a dropdown element directly from a dataset ---- know that it may cause performance issues. It is not an expected use-case scenario to have such a large number of options for 1 dropdown element. (Even 50 States is a bit long and people dont like scrolling through all the States — because they prefer to type to filter through the dropdown faster.)

I recommend condensing your options if at all possible. For example using more than 1 dropdown to split them up, such as ‘Category’ and ‘Item’.

Regarding my tutorial examples, the reason I chose those methods is because they are the easiest to teach. All other code would have been too advanced to explain. There are many different scenarios that a person could possibly build their dropdown navigation but I showed the most popular ones I have encountered via my private student sessions.

Anyway, now that im done with my advice let me move on to your original questions.

Yes, you can use a dropdown connected to a dataset to allow users to navigate upon selection or dropdown change.

Assuming all of values are unique, You would create a code that is triggered onChange, get value, perform query to find that ome value, get the dynamic link field and then navigate to link field.

Now that you know the order your code should be written in, you must do a little research via the Wix API docs to get the bits and pieces of code to put it all together (as you may not find coders to write up your entire solution for free).

Writing the code is only part of the job. You also have to plan and implement the correct logic. For example, where will you place the dropdown, what happens when they select an option to the page they are already located at, will the page open on a new tab or the same tab, etc.