Switching among items in a Dynamic item page

[reina-de-la-mancha]

Good evening!

It would be very interesting to find the way to customizing a dropdown box from Wix Code for visitors in order to being able to switching from an item of a single dynamic item page to any specific item from a database . For example, if the dynamic item page displays fields related to information of an edition of a festival, it would be really cool that visitors could choose which specific edition (which specific item) data appears in the dynamic page. In other words, if they are in 30th edition and they want to see the 43th edition data, if they choose “43th edition” option in the dropdown box, the data from 43th edition will automatically appear.

Here you have our questions:

1. Which is the way to programme dropdown box (or other switching buttons) to achieving that effect?

2. How could we achieve the same effect by using previous/next buttons ? (By the way, I have read these posts ( 1 -suggested by a Wix Code Community Expert-, and 2 ), but having it explained by you in an easier way would be awesome!)
   Hope you can reply us with an answer to every single question as soon as possible.

Thank you in advance!

[adas-bradauskas]

Hey Reina!

Let’s start with a first problem. Check this code and let me know if you need a detailed walkthrough.

import wixData from 'wix-data'; 
import wixLocation from 'wix-location';

export function selection1_change(event) {
	// Get dropdown value
	let selectedValue = event.target.value;
	
	// Get all dynamic pages
	$w('#dataset1').getItems()
		.then(res => {
			// Loop over every page
			res.items.forEach(function(item) {
				// Check if selected option matches item title
				if (item.title === selectedValue) {
					// If it does, nacigate to dynamic page of that item (check CM for system generated dynamic page link)
					wixLocation.to(item['link-page-title']);
				}
			});
		});
}

[reina-de-la-mancha]

Hello Adas!

Thank you very much for your reply! I’m not very much into coding language, though. I really appreciate your help, so I would be very grateful if you guided me step by step in order to understanding the way to programme my page through your code or other solutions.
For that reason, it might be a great idea to continue a conversation with you here in the Forum, or by e-mail or private chat if you prefer. That’s how I’ll be able to giving you more specific data in order to understanding better the problem.

I’m looking forward to receiving your answer.

Keep in touch!

Thank you very much!

[system]

Hi Reina!
I’ll try to add some more context around Adas’ code.
Javascript is based on ‘Events’ (see here ) that, among other things, lets the page know when a user is interacting with it, and lets the programmer decide what to do when this interaction happen (by writing a callback function ).

In your use case, we need to know that a user has chosen a value from a dropdown element.

Before coding, lets simplify the logic of what we need to do when a value is clicked:

1. Understand what the value is (e.g. ‘Dog Festival’)
2. Go over our database, and find the URL that corresponds to the value (e.g. ’ www.mysite.com/festivals/dog-festival ')
3. Navigate to that corresponding URL.

Now let’s have a look at Adas’ code:
Adas is assuming that you have a dataset called ‘dataset1’ that is connected to your database of festivals, and a dropdown with the id of ‘selection1’, and he’s defining the function that is called upon a change of ‘#selection1’ dropdown:

export function selection1_change(event) {

Inside this function body we have a code that does exactly what we wanted to do in our logical breakdown:

1. Get the selected value:

let selectedValue = event.target.value;

2. Go over our database, and find the URL that corresponds to the value:

$w('#dataset1').getItems() .then(res => 
    { // Loop over every page 			
    res.items.forEach(function(item) { 
    // Check if selected option matches item title 
    if (item.title === selectedValue) {

3. Navigate to the page URL (assuming you have it written under ‘link-page-title’ in the database):

wixLocation.to(item['link-page-title']);

Hope this helps

Liran.

[reina-de-la-mancha]

Hello, Liran!

Thanks for the explanation. Now, I think I have understood better what Adas tried to tell me.

I have changed the name of his defaut dataset (‘#dataset1’) to the actual name of my specific dataset (‘#Ediciones_item’), which is the dataset automatically generated for the system when the Dynamic item page was created. I have also changed its link-page-title to the name of my item URL field: link-Ediciones-title (which is the field title from the database).

You can see how it looks now in one of the images I’ve shared with you.

Nevertheless, in the Preview Mode , the dropdown box (right side, labelled “Elige una edición”, which in English means “Choose an edition”, assuming that edition=item in terms of meaning) appears in a disabled way , so I can’t choose any of the options or items (“47ª Edición”, “48ª Edición”…) in order to navigate to the specific URL of each correspondent item. As you can see in the images below, on the one hand, the dropdown box is disabled in the Preview Mode; on the other, as it is disabled, the URL connection are broken in the Preview Mode.

What is the problem? Why isn’t the code working? Is there any mistakes?

Please, help me to resolve it as soon as possible, so I can try the effect in the dropdown box!

Thank you!

[system]

Hi Reina,

I’ll take a wild guess that the connection of the dropdown is not setup as it should.
See this example from the connect panel:

If that doesn’t help, please provide me some more information and a link to your site.

Liran.

[reina-de-la-mancha]

Hello, Liran!

Now I can see which my mistake might be: in the second row of the “Connect Dropdown” menu, you have set it as "Value connects to - Not connected ", while in my case I had it as "Value connects to - Edición (Text) ".

When I tried setting it following your example, the dropdown box isn’t disabled anymore in the Preview Mode, but now there is a new problem: when the dropdown box is unfolded, only the option belonging to the current item appears, so there isn’t any list! In other words: if there are several options like “47ª Edición”, “48ª Edición” (in this example, 2 options), when you are located in the item “47ª Edición” and you click on the dropdown box, the only option which appears in the list is “47ª Edición”, but the other options to navigate among the rest of the items (like “48ª Edición” and so on) are missing in the list.

These images will help you understand the new trouble better:

The last version of my site isn’t published yet. I will do it later, but I would need this stuff to be resolved before publishing it.

Let me know if you catch every idea. I’ll provide more information to you if needed.

Thank you very much for your help!

I’m looking forward to reading your next reply in order to getting this fixed eventually.

[system]

Hi Reina, can you please share a link to your site?

Liran.

[adas-bradauskas]

Hey Reina,

It seems you need to connect Dropdown values to a different dataset. Now you’ve connected to the same dataset used for dynamic page, whereas you need the one dedicated specifically for having dropdown options.

[adas-bradauskas]

Just some more notes to have a more clean solution:

• It seems "import wixData from ‘wix-data’; " is redundant unless you use wixData

• For dropdown, you need to bind options, but for a top “Connect a dataset” you can leave it blank – you don’t use dropdown as part of true html form, you only listen to changes of user selection as Liran explained it next to events

[adas-bradauskas]

I imagine it might sound like new concepts to learn, but once you have one case finished end-to-end, it will become more clear the next time you approach a similar task.

[reina-de-la-mancha]

Answer to Liran Kurtz (WIX)

Hi Liran!

As I told you previously, my site doesnt’ show some changes like the Dynamic item page, either the dropdown box. I will publish it soon, when I apply some other important changes. My site is reinadelamancha.

Answer to Adas Bradauskas

Hello Adas!

I’m afraid of not understanding too much what you’re trying to say to me.

These are some of my doubts , so you can resolve every of them separately:

1. Is it required having an additional database which consisted on the dropdown options (“47ª Edición”, “48ª Edición”…) exclusively? I thought I could use just the field with the options from the ‘Ediciones_item’ dataset which is based on ‘Ediciones’ database. Isn’t it enough? What should I do specifficaly?

2. Could you explain me what wixData is and how can I use it?

3. I haven’t understood at all the second point of your 2nd commentary of this round. Is there any mistake in any section of the Connect Dropdown menu according to my own settings (look at the vertical image in my previous answer to @Liran)?
   Not being able to understand anything you both tell me at once makes me feel quite ashamed, as I’m pretty new into coding. I’m really sorry.

Thank you to both of you for your assistance!

[system]

Hi again Reina,

First of all: you should not feel ashamed. We know that this is a lot to take in, and it’s great that you’re really want to learn.

Some answers to your questions:

1. You don’t need a new Data Base , just a new Data Set , as I see you already have in your site.
   Your first data set is used for the Dynamic pages, and acts as one: this means he is always connected to a data of one page (therefore only one edition name is shown).
   This should work for you:

2. This is ‘wix-data’ , you have the following line of code:

import wixData from 'wix-data';

This import means that you want to use whatever it is that ‘wix-data’ API supplies.
What Adas is saying is that you never really user wixData on your code, you’re just importing it. Therefore, this line of code is not necessary.

3. Adas has a good point that I should have explained better:
   When you are connecting an element (let’s say a dropdown) to a dataset (and database) this means that this element should have some data exchange with the database.
   We separate these exchanges to be Read or Write.
   Since you only need to read from the database and get a lost of options, connecting the options is enough.
   If you wanted to allow a user to submit a Form that one of it’s fields has a dropdown, then you would use the upper part of the Connect panel, which will define where, in a database, the users input should be saved.

Hope this makes some sense.
Liran.

[reina-de-la-mancha]

Hello Liran!

Thank you very much! Now I have learnt the ideas both of you showed me. I’ve given it a try, and the Connect Dropdown is now configured as you have advised me (the same than your previous image). The list appears complete right now; when you click on a different option related to each item, the URL doesn’t work, though. So when you select an option, there isn’t any navigation to that specific item , which is the main goal of this dropdown for me…

Where is the problem supposed to be?
May the " wixLocation to " part be wrong (the ‘link-Ediciones-title’ )? Have I used a wrong field?

Please, take a look and you’ll tell me…

Thanks!

[adas-bradauskas]

Hey Reina,

As Liran said, there’s nothing to be ashamed of. You’re entering into a new field, which might be bumpy at first, but eventually it only takes time to learn these things.

Now getting back to the last part of your problem, you need to be sure whether the field key used (“link-Ediciones-title”) is the correct one. In order to do that, go to the Database of Ediciones and locate the grey field which was auto-generated when you added dynamic pages. Then, click three dots on a field and select “Manage Properties”. In the dialog, locate a section “Field Key”. This is the key you need to put in wixLocation.to(item[‘name-of-your-key’]);. Mind that this key is case-sensitive.

It should look something like this:

[reina-de-la-mancha]

Hello Adas!

I have checked the Field key again and it seems it was written properly from the beginning:

Take into account that, in the code panel, in line 16, I set ’ #dataset1 ', which is my “Ediciones_dropdown1” dataset. I thought that could be a mistake so I tried changing it for ‘#dynamicDataset’, which is my “Ediciones_item” dataset (automatically generated when I created the Dynamic Item Page). Then, I have changed it again to ‘#dataset1’, the original name.

I’m always writing everything paying attention to spelling properly both capital and lower case letters.

Anyway, the navigation through options (items) from the dropdown list is still broken …

Therefore, why isn’t it still working as it is supposed to? Could you investigate it deepier , attending to database content, field key, the title of that field, etc.?

Thank you, and sorry for this tough assignment!

[precise-yoga]

GUYS…PLEASE MAKE A VIDEO OF DROPDOWN BOXES AND CHANGES IN EVENTS. THIS IS VERY IMPORTANT AND A LOTTTT of people have the same problem which is not being resolved or understood.

[reina-de-la-mancha]

My problem isn’t resolved yet

Good afternoon!

After waiting for a long time, there isn’t any answer to my last post in this thread from Wix Code experts, both those who were helping me with quick messages and the rest.
In addition, Precise Yoga has suggested a point which seems very interesting to me, and its message hasn’t been replied eiteher.

That said, I really hope Wix Experts would help me with additional answers as my problem isn’t resolved yet.

Keep in touch!

[adas-bradauskas]

Hey Reina!

Sorry for taking so long, but it seems you should finally be able to achieve the desired result!

Here’s the updated code:

import wixLocation from 'wix-location';

export function selection1_change(event) {
	// Add your code for this event here: 
	let selectedValue = event.target.value;
	
	// Create new variable to reference dataset 
	let dataset1 = $w('#dataset1');
	
	// Get all dynamic pages
	dataset1.getItems(0, dataset1.getTotalCount())
		.then(res => {
			// Loop over every page
			res.items.forEach(function(item) {
				// Check if selected option matches item title
				if (item.title === selectedValue) {
					// If it does, navigate to dynamic page of that item (check CM for system generated dynamic page link)
					wixLocation.to(item['link-Ediciones-title']);
				}
			});
		});
}

A quick walkthrough of changes. Here, we create new variable to reference dataset so that it was easier to call to methods – getItems() an d getTotalCount() on the same dataset.

let dataset1 = $w('#dataset1');

Then, we get all the items by using getItems method:

dataset1.getItems(0, dataset1.getTotalCount())

Basically, dataset1.getTotalCount() gets the total number of all the items in your collection.

Then the rest of the code is already covered above.

Last bit that we forgot to mention is that when you add a function to handle component events, in your case, it’s selection1_change(), you also need to add this method to properties panel on that component, so in your case on dropdown like this:

Tested this on site cloned from yours, and it works as desired!

Regarding video, there’s probably still some improvements that could be made on our end until we should make a video.

[adas-bradauskas]

Hey Reina!

One last bid. We’ve updated our API a bit, so that you can use getItems() method without parameters. That means that instead of this:

// Create new variable to reference dataset
let dataset1 = $w('#dataset1'); 

// Get all dynamic pages
dataset1.getItems(0, dataset1.getTotalCount())

You can just have this:

$w('#dataset1').getItems()

Let us know if you still have any issues with this flow!