(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,