How to access specific collection items in a dynamically filtered collection list

Design help Custom code
1

Hello,

I have been struggling for quite a bit of time to figure out how to create a specific functionality for a client. The last piece of it revolves around a dynamically changing preview image. You can see where it’s headed, it is supposed to function like CoD selections. I’m not an NRA member I just make websites!

Preview.PNG
Preview.PNG1644×965 164 KB

I have created a dropdown that has a collection list inside of its dropdown list, filtered accordingly.

Filter
Filter1911×967 244 KB

I would like to display the image from each collection item when they are selected in a div block outside of the dropdown - where the corresponding selection category would be.

I cannot for the life of me figure out how to pull the ID of a filtered collection item from the list so that I can change the image appropriately. All I can find is “w-dyn-item”. Is there any way to access this?

code
code1225×774 121 KB

EDIT: I have managed to find ID’s in the CMS that look like this:

5e5741c041472a2fa0590eda

Unfortunately, I still can’t figure out how to reference the ID so that I can dynamically pull the image associated with the collection item that is clicked!

2

Hi @Cody_Rodgers, I think you have better chances with custom codes to pull the Text value and Image value from the selected item and displaying them.

3

Ok do you think "this.addEventListener(“click”) would work?

4

You could try FinSweet’s CMS Nest Attributes