Project Listing via CMS in a lightbox

Ask the community
, , ,
1

Question:
Using CMS for Project Listing via dynamic page and want to show detail about each Project using LightBox.

Product:
Wix Studio

What are you trying to achieve:
I am creating a dynamic project page. Via CMS. Listing is working. I am using repeater to list them all. Each item has a button to “Learn more” about the project, which I am trying to showcase via Lightbox.

What have you already tried:

Additional information:
Getting this bug.
windowSdkFactory.ts:
144 Uncaught (in promise)
Error: There is no lightbox with the title “#lightboxMEP”.
at Object.openLightbox (windowSdkFactory.ts:144:10)
openLightbox @ windowSdkFactory.ts:144

Really appreciate any help on this.

2

There’s no need for dynamic lightboxes, at least not for your use case

Using code, you can pass data to your lightbox:

Page code

import wixWindow from 'wix-window-frontend'

learnMore_click() {
    // Opens lightboxName passing #dynamicDataset's current item as context
    wixWindow.openLightbox('lightboxName', $w('#dynamicDataset').getCurrentItem())
}

Lightbox Code

import wixWindow from 'wix-window-frontend'

const data = wixWindow.lightbox.getContext()
1 Like
3

After getting the lightbox context data, you can choose two courses of action:

  1. Use a dataset and set its filter to the item’s ID
    • Pros: Adding new elements requires simply linking them to the dataset
    • Cons: Fetches the data again once the lightbox loads, which makes loading time a tad longer
$w('#dataset').setFilter(wixData.Filter().eq('_id', data._id))
  1. Set element data using code
    • Pros: Faster loading time, endless customizability
    • Cons: Requires modifications to the code for each element, pretty simple code, but still
$w('#title').text = data.title // example #title element
1 Like
4

Thank you for your prompt response.

Below is the code that worked. with your suggested direction.

On dynamic page:

import wixWindow from 'wix-window-frontend';
export function learnMore_click(event) {
$w('#dynamicDatasetMEP').getCurrentItem());
let $item = $w.at(event.context);
wixWindow.openLightbox('Project Details', $item("#dynamicDatasetMEP").getCurrentItem());
}

On LightBox Page (no need to connect any field to CMS)

import wixWindow from 'wix-window-frontend'
$w.onReady(function () {
const data = wixWindow.lightbox.getContext()
$w('#projectname').text = data.title;
//.....REST OF THE FIELDS
});

Thanks again.

5

Is there a particular reason you’re using $item instead of $w? I believe $item is used for a different purpose and is redundant here

Also, glad to help :slight_smile:

6

Can you please explain which information should be in each please in the code?
for example, ‘Project Details’ is the ID of the lightbox? Thank you!

7

The first piece of code should go in your listing page. Which in my case I called the data via CMS.

The ‘Project Details’ is a lightbox page which I later called via click function when one of the item is click from the list.

The second piece of code goes in the LightBox page (Project Details).
where I bind which information from CMS with different form field.

1 Like