Refresh current page (without reloading elements) on lightbox close

Ask the community
,
1

(CASE A)
I have designed a static product page with bunch of elements. Then I am using code to populate content in to those elements from a dataset.

Assuming there are three different products , each represented by a button. All a user needs to do is click a button and instantly the content is changed to a different product (without requiring page reload).

I do this because all my products have the same type of spec (except different values). E.g. Product name, description, key features etc…

This works fine.

(CASE B)
The problem only happened when I decided to move those buttons to a lightbox ( to create a lightbox side-menu). The only thing changed now is that a user needs to open the side menu, click a product button, then the content is supposed to update.

However, I am unable to do this unless I send a “page reload” command from within the buttons on the lightbox.

Is there anyway for the content on my products page (that calls the lightbox) to update (as a user clicks a button on the lightbox) without requiring a total page reload ?

I just want to change the text / html values of the elements on the original page, but don’t want the all the elements to reload, as it’s not required (similar to Case A)

Here’s example of my code :

Products Page :

$w.onReady(function () {

  setProductData();

});

function setProductData ()
{
    ///gets data from dataset for "selectedProduct" from session
    ///then populate the .text and .html values of various elements
}

Lightbox :

export function buttonA_click(event) {
    session.setItem("selectedProduct", "Product A");
    wixLocation.to('/products');    
}

export function buttonB_click(event) {
    session.setItem("selectedProduct", "Product B");
    wixLocation.to('/products');
}

export function buttonC_click(event) {
    session.setItem("selectedProduct", "Product C");
    wixLocation.to('/products'); 
}

Is there any way to achieve this without requiring a page reload ?

Thanks,

2

Have you just tried passing the data from the lightbox to the page?
https://www.wix.com/corvid/reference/wix-window.lightbox.html

How do I pass data between a page and a lightbox?
When you open a lightbox using the openLightbox() function, you can pass an object containing data to be used in the lightbox. In the lightbox’s code, you call the getContext() function to retrieve the data sent by the openLightbox() function.

When you close the lightbox using the close() function, you can pass an object containing data to be used by the page that opened the lightbox. This data is retrieved from the resolution of the Promise returned by the openLightbox() function.

If you read the API reference you will find code examples that you can look at.