Repeater Buttons Linking to different lightboxes

Ask the community
,
1

Hi! I have been trying to fix this for a really long time and searching the forum, but nothing seems to be working.

1008×682 399 KB

I have a menu on my page created with a repeater connected to a dataset. This is working fine but my
problem is that I want to show more info about the dish when people click on the “+” button and I can’t make it work.

I can’t show you the code I have now because I have tried so many different things that I’m not sure which one to paste here.
I tried the forEachItem but nothing happened, tried to change the label depending on a dataset field and connect it to a lightbox with the same name but again, didn’t worked, tried if statements and so on but got no results.
The closest I’ve been to make it work was by creating a box inside the repeater and connect it to the “long Description” on the dataset and then hide it and show with onClick, but the problem is that the box must have the same size as the repeater box so no much info fit and if I press 1 button it appeared on all of the items.

So in conclusion, what I need to do id having the repeater connected to this dataset but teh buttons working individually and linking to a different lightbox each (or to the same lightbox that somehow links to the dataset and shows the related information)

I found this link on the forum and this kind of shows what I need but this code didn’t worked on mine…
HOME | Ratings by User vw (wix.com) ( Ratings by User (grampsworkbench.com) )I don’t need the rate, just the lightbox with the related info.

If anyone can help me it would be amazing! I don’t know what else to do!
And would it be possible to remove the “+” button if the field “long Description” is empty?
Thanks!!

2

Hi I did not understand why you need a lightbox if you have more information for each item you create a dynamic page for each page with information extension that is in a database.
If you still want to open lightbox you can maybe save the name of the lightbox in the database and then open it. For example so maybe it will work for you

import wixWindow from 'wix-window';
export function Button_click(event,$item) {
let MyLightBox =  $item('#dataset1').getCurrentItem().MyLightBox
  wixWindow.openLightbox(MyLightBox)
}
3

I think I understand now what you want.
You can add a box below, and there insert the extension you want text etc.
And of course connect to the data set, and check the box and then add code on the extension button like this:


exportfunction Button1_click(event,$item){
if( $item("#box1").collapsed ) {
 $item("#box1").expand();
 $item("#Button1").label = "-"
}else {
 $item("#box1").collapse();
 $item("#Button1").label = "+"

}
}
1 Like
4

Hi! Thanks for your answers!

I’ve tried it before, but it doesn’t work…

If I create the box inside the repeater the content connect to the dataset perfectly, but I don’t have enough space for everything I want to add as the repeater box is small and I can’t make the content box bigger than the repeater.
If I create the box outside the repeater, I have all the space I want, and I can link to it from the buttons without any problem, but I cant make it show the proper information, it only shows the first item on my dataset on each of teh buttons.

And with the lightbox, i’m not sure if i’m doing it right, I don’t have a special field on my dataset for lightbox but all of them have the same name as the “title” field.
I can’t add teh link to my page, the comment isn’t published…
lets try like this…
urvan cow . co . uk / copy-of-menu-1

And the codes for each:

This is repeated on the 3 pages:
import { local } from ‘wix-storage’ ;
import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;

$w.onReady(() => {
$w( ‘#dataset1’ ).onReady(() => {
$w( ‘#bsides’ ).onClick(() => {
let category = $w( “#bsides” ).label
$w( “#dataset1” ).setFilter(wixData.filter()
.eq( ‘category’ , category))
});
$w( ‘#bmains’ ).onClick(() => {
let category1 = $w( “#bmains” ).label
$w( “#dataset1” ).setFilter(wixData.filter()
.eq( ‘category’ , category1))
});
$w( “#bdrinks” ).onClick(() => {
let category3 = $w( “#bdrinks” ).label
$w( “#dataset1” ).setFilter(wixData.filter()
.eq( ‘category’ , category3))
})
});
});
export function bmains_click(event) {
$w( ‘#lmains’ ).show( ‘Reveal’ );
$w( ‘#lsides’ ).hide();
$w( ‘#ldrinks’ ).hide();
$w( ‘#text142’ ).show();
}

export function bsides_click(event) {
$w( ‘#lmains’ ).hide();
$w( ‘#lsides’ ).show( ‘Reveal’ );
$w( ‘#ldrinks’ ).hide();
$w( ‘#text142’ ).hide();
}
export function bdrinks_click(event) {
$w( ‘#lmains’ ).hide();
$w( ‘#ldrinks’ ).show( ‘Reveal’ );
$w( ‘#lsides’ ).hide();
$w( ‘#text142’ ).hide();
}

On the Lightbox one I have this other code below:
I’m not sure where o if I need to change soemthing to say “title” as this is teh field where I have the name of teh lightboxes.

export function button12_click(event,$item) {
let MyLightBox = $item( ‘#dataset1’ ).getCurrentItem().MyLightBox
wixWindow.openLightbox(MyLightBox)
}

On the box1:
export function button12_click_1(event,$item) {
if ( $item( “#box1” ).collapsed ) {
$item( “#box1” ).expand();
$item( “#button12” ).label = “-”
} else {
$item( “#box1” ).collapse();
$item( “#button12” ).label = “+”
}
}
export function button13_click(event,$item) {
if ( $item( “#box1” ).collapsed ) {
$item( “#box1” ).expand();
} else {
$item( “#box1” ).collapse();
}
}

On teh Box 2
export function button13_click(event,$item) {
if ( $item( “#box1” ).collapsed ) {
$item( “#box1” ).expand();
} else {
$item( “#box1” ).collapse();
}
}

5

I need this too. The other thread that said it had an answer is closed and links to a dead page…

6

Please observe the community guidelines and refrain from multiple posts on the same topic or question. It’s also much better to post your own question instead of bumping up an old post. Explain what you are trying to do, what works, and what doesn’t. Also, add any code in a code block as stated in the Forum Guidelines .

To open a Lightbox, you will first need to implement the Repeater’s onItemReady() event handler which will assign an onClick event handler to each repeater item. This is where you will have the code to open a Lightbox .