Button in repeater to open a lightbox?

Ask the community
,
1

Hi,

I currently have a button, in a repeater, that is linked to a URL field in my dataset. Is it possible to link it to a lightbox instead and how would I do this?

Thanks,
Rachel

2

Yes. But you should add more explanation regarding what exactly you’re trying to achieve.
Are you trying to open the same light-box for all items, something else? Add as many details as possible.

3

Hi J.D,
Apologies, the button is actually in a dynamic page (linked from a repeater) which gives information on a coach, e.g …/coaches/COACHNAME. Each coach has their own booking page (an external widget) which I would like to display in an html frame, in a lightbox, when the ‘Book Me’ button is clicked.
I currently have a field in my dataset (bookingWidgetUrl) that links to a page in my site but I would to open a lightbox instead so I’m looking to replace bookingWidgetURL with a lightbox name and then somehow link it to the button.

Many thanks,
Rachel

4

Hi,

I’ve actually got it working by connecting my button label to a text field in my database, which holds the lightbox name, using the following code…

export function btnBookMe_click(event, $w) {
 let lightboxName = $w("#btnBookMe").label;
  wixWindow.openLightbox(lightboxName);
}

But is it possible to keep the button label as ‘Book Me’ and not have it display the text in the database?

Thanks again,
Rachel

5

I have tried this…

let btnLabel = "Book Me";
$w("#btnBookMe").label = btnLabel;

But it is not changing the text.

6

Try:

import wixWindow from 'wix-window';
$w.onReady( function() {
$w("#myDataset").onReady( () => {
let item = $w("#myDataset").getCurrentItem();
wixWindow.openLightbox(item.lightboxName);//use the field key from your collection
})
})
7

Thanks but I’m getting the following error in the console log…

TypeError: Property description must be an object

8

Check your code again. Make sure you use the right field key.

9

This is my code which I’m fairly sure is correct?

$w("#coachesDynamicDataset").onReady(() => {
 let item = $w("#coachesDynamicDataset").getCurrentItem();
wixWindow.openLightbox(item.lightboxBookingWidget); 
    })

10

Did you remember to import ‘wix-window’ ?

11

Yes!

12

So I really don’t know. Be sure the value of item.lightboxBookingWidget is equal to the name of the lightbox (case-sensitive).
try console.log(item.lightboxBookingWidget) and see what you get.

13

Thanks but it’s not returning anything in the console log. I’m at a loss!

14

So check that the live DB contains the value and that the collection permission are OK,

15

So, I’ve just checked the live site and it is working! I’m so sorry, I was only viewing in preview mode and getting the error. I wasn’t aware that it wouldn’t work in preview. Thank you for your time and effort :slight_smile:

16

You’re welcome :slight_smile: