Expand a Details Box When Clicking a Repeater Button For a Specific Product

Ask the community
, , ,
1

Hi everyone,

I am creating a multi-step form with a Multi-states box to allow customers to send us a personalized quote request. Everything is working, I’m quite proud of the result. I would like to take the concept further and allow customers to get additional information on products by clicking on the image that is presented within a repeater. The additional information would be displayed in a box that will be collapsed by default.

Here is what it looks like:

979×1130 80.6 KB

Since the button in the repeater has the same iD for each item, I am not able to write my code that will expand the additional information box. If the iDs had been different, I could have created 3 collapsed containers by default and created a different code for each button and each container.

I’m thinking that there is definitely a way to use a single default collapsed container that would expand each time a button is clicked on the repeater but would display the data specific to the product that is clicked on…

To do this, I imagine I would have to start by setting up a piece of code that would determine which product in my collection each repeater button refers to. But I have absolutely no idea how to do this.

I would like to use the collection of products from our store (Wix App).

Here is screenshot of the part of the code I started to write to try to produce this result (I tried to add a code snippet but the forum do not allows me to publish saying that there is a link. I really can’t find any link in that part of the code… :sweat_smile:):

Here is the result :

953×1060 127 KB

As you can see, it works! (I know why my description appears like this, it’s already fixed). However, it will always display the same information no matter which button is clicked.

I hope someone can give me a solution!

Thanks a lot in advance! :smiley:

2

So I figured out how to manage 3 different product details boxes by selecting a specific repeater item button. Here is my code :

//PRODUCTS BUTTONS 
$w ( "#nexairRepeater" ). forEachItem (( $item ,  itemData ,  index ) => { 
    $item ( "#nexairButtons" ). onClick ( **function**  () { 
        **if** ( $item ( "#nexairSku" ). text  ===  "SKU: NSV-2500" ) { 
            **if** (  $w ( "#nsv2500InfosBox" ). collapsed  ) { 
            $w ( "#nsv2500InfosBox" ). expand (); 
            $w ( "#nexair50InfosBox" ). collapse (); 
            $w ( "#nsv5000InfosBox" ). collapse (); 
        }  **else**  { 
            $w ( "#nsv2500InfosBox" ). collapse (); 
        }} 

        **else if** ( $item ( "#nexairSku" ). text  ===  "SKU: NEXAIR5.0" ) { 
            **if** (  $w ( "#nexair50InfosBox" ). collapsed  ) { 
            $w ( "#nexair50InfosBox" ). expand (); 
            $w ( "#nsv2500InfosBox" ). collapse (); 
            $w ( "#nsv5000InfosBox" ). collapse (); 
        }  **else**  { 
            $w ( "#nexair50InfosBox" ). collapse (); 
        }} 

        **else if** ( $item ( "#nexairSku" ). text  ===  "SKU: NSV-5000" ) { 
            **if** (  $w ( "#nsv5000InfosBox" ). collapsed  ) { 
            $w ( "#nsv5000InfosBox" ). expand (); 
            $w ( "#nsv2500InfosBox" ). collapse (); 
            $w ( "#nexair50InfosBox" ). collapse (); 
        }  **else**  { 
            $w ( "#nsv5000InfosBox" ). collapse (); 
        }} 
    }); 
});