Dynamic Lightbox | **FIXED**

Hello everyone, I am trying to create an online shop, the idea is as described.
1.) User presses “Buy Now” button in repeater (or dynamic page of product)
2.) Lightbox opens displaying an Html embedding a link from the database.

The issue I am having is that the lightbox does not communicate with the page, and fails to filter the html embed with the database item, however other elements (not the html) do filter correctly.

Example: https://www.shop.xyliase.com/workshop-dynamic (press “add to cart” to see my issue)
Example2: https://www.shop.xyliase.com/product/Product-1 (code here is incomplete, example #1 is)


This is the code on the page with repeater

import wixWindow from 'wix-window';

$w.onReady(() => {

 $w("#dataset1").onReady(() => {

  $w("#repeater1").onItemReady(($item, itemData, index) => {
   $item('#iconButton4').onClick(() => {
 let item = $item('#dataset1').getCurrentItem();
    wixWindow.openLightbox('productdatabase', item)
   });
  });

 });

});

This part is what filters (code in the lightbox)

import { lightbox } from 'wix-window';
import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
import wixUsers from 'wix-users';

$w.onReady(() => {
 let theItem = lightbox.getContext();  //item taken from the repeater
 let postID = theItem._id; //field key for the item ID in the database collection

 $w("#dataset1").setFilter(wixData.filter()
   .eq("_id", postID)  //filtering to display the item that matches this ID
  )
  .then(() => {
   console.log("Dataset is now filtered");
  })
  .catch((err) => {
   console.log(err);
  });

});

This is what inserts the embed link from the database to the html (code in the lightbox)

$w.onReady(function () {
 let widget, e, wide,
  user = wixUsers.getCurrentUser;
 
  e = 0;
  $w("#dataset1").onReady(function () {
 const tF = $w('#dataset1').getCurrentItem();
    widget = tF.productLink;
        $w('#html1').src = widget;
    })
})

If all of this code is from the Lightbox , then you have some problems:

  • You should only use one page onReady() event handler.

  • If you want to getCurrentItem() and set the HtmlComponent .src from the dataset after #dataset1 is filtered, then you need to do the setFilter’s .then() function.

  • You need to getCurrentUser() inside of the page’s onReady() event handler.

Hello Yisrael, thanks for your response.
I made some changes in my post to clarify.

Yes initially all that code is from the Lightbox. Excuse me I am an amateur at this, if you could help or give some pointers I would appreciate it.

1.) Based on that, how could I adjust the code so that it uses only one “onReady()”?
2.) " then you need to do the setFilter’s .then() function." Would I just add this, or do I need to replace something?
3.) I believe I have just fixed this. (code adjusted in post)

I’m unsure on how to make these adjustments :frowning:

After looking at it closer, it’s appears to be much simpler. You are aleady passing the dataset item to the Lightbox, so there’s no need to get the item again. I haven’t test this, but I think all you need to do in the Lightbox is to get the context which will give you the item, and then set the HtmlComponent to the productLink.

$w.onReady(function () {
    let theItem = lightbox.getContext(); //this is the item you took from page
    console.log('item', theItem);
    $w('#html1').src = theItem.productLink;
});

As I said, this is not tested so you might need to make some adjustments. Also, note that I added a console.log() statement to assist in debugging.

Good luck

If you’re implying that I remove all the other Lightbox code and replace it with what you just shared with me, then YES :slight_smile: It does update the html.

I added both your piece and what I had to update it, however the elements take a few seconds to filter and update. Can I increase the speed of this?

Thank you so much for your help, I would love to buy you a beer or something, can I PayPal you?

$w.onReady(function () {
 let theItem = lightbox.getContext(); //this is the item you took from page
 let postID = theItem._id; //field key for the item ID in the database collection
    console.log('item', theItem);
    $w('#html1').src = theItem.productLink;

 $w("#dataset1").setFilter(wixData.filter()
   .eq("_id", postID)  //filtering to display the item that matches this ID
  )
  .then(() => {
   console.log("Dataset is now filtered");
  })
  .catch((err) => {
   console.log(err);
  });
});

What other elements do you have in the Lightbox? All the data for that item is available in theItem that was passed to the Lightbox. What isn’t working?

And, about the beer… Next time you have a beer, just lift it up and say “to Yisrael”. I’m eating lunch in a little while. I’ll raise my glass of beer “to notDany”. I haven’t seen you around lately in the forum. I hope you are well.

" All the data for that item is available in theItem that was passed to the Lightbox. What isn’t working?"

I replaced all my code with the bit that you sent me, so it only updated html embed and not the other elements. I have since updated it and everything works.

“I haven’t seen you around lately in the forum. I hope you are well.” My gaming website hasn’t been bringing any revenue (not that I expected it too), I consider it mostly complete and am just letting it sit there, if someone finds it I hope they have fun. As for now, I am working on a new business and expanding into building a platform where users can submit their products for sale, this is what this post was about.

I am always active with Wix and peaking in the forums once in a while, I’m lucky enough to be a beta user of EditorX too, learning that right now.

UPDATE: Never mind I found a way.


Hello @yisrael-wix :wave:
I am going through one of my websites which has many lightboxes and trying to make them dynamic to clean some things up.

Trying to do the same as in this thread. However instead of clicking on a button aready connected to a dataset, I want to attempt to do this with just a normal button (not connected to dataset) that will open a lightbox filtering a specific item. Do you think this is doable? Been playing around with it for a few hours can’t seem to get it to work.

Goal: User presses on button, lightbox opens with elements filtered to an item in a database.

This is what I currently have, (I already have the code to filter lightbox)

import wixWindow from 'wix-window';

$w.onReady(() => {

 $w("#dataset1").onReady(() => {

   $w('#button').onClick(() => {
 let item = $w('#dataset1').getCurrentItem();
    wixWindow.openLightbox('lightbox', item)

   });
  });
 });