I’m trying to transfer the following data from the product page to a lightbox:
-
Girl Name
(" #InputGirlName ") -
Nurse images
(" #ImageInRepeater ") - I’m using the image that is in the red circle.
Dataset: DatasetSkin -
Quote images
(" #QuoteInRepeater ") - I’m using the image that is in the red circle.
Dataset: datasetMugsQuotes
Not sure if this is the right way but according to the console.log, the " #InputGirlName " is being transferred to the lightbox, but the data is not being updated in the light box. I’m getting 2 Wix Code SDK Warning messages (see the lightbox screenshot).
PRODUCT PAGE
Additional info
-
Girl Name (" #InputGirlName ")
-
Nurse images
Dataset: DatasetSkin, filtered by the Skin Colour and Scrub Colour dropdown menus
(" #ImageInRepeater ")
Quote images
Dataset: datasetMugsQuotes, no filtering
(" #QuoteInRepeater ")
Preview button: calls the lightbox
PRODUCT PAGE Code
import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;
let GirlNamevalidation = “False” ;
let SkinColourDropdownValidation = “False” ;
let ScrubColourDropdownValidation = “False” ;
let CompleteLookValidation = “False” ;
let QuotesValidation = “False” ;
let DetailsValidation = “Collapse”
$w.onReady( function () {
$w( “#dynamicDataset” ).onReady(() => {
//Condition when an item is on sale.
if ($w( “#TextDatabasePrice” ).text != $w( “#TextPrice” ).text) {
//Calculation of the rebate… shown in the red flag.
let DatabasePrice = Number($w( “#TextDatabasePrice” ).text);
let TextPrice = Number($w( “#TextPrice” ).text);
let PercentageRate = Number(( 1 - (TextPrice / DatabasePrice)) * 100 );
$w( “#textPercentageRebate” ).text = parseFloat(PercentageRate).toFixed( 0 ) + ‘% OFF’ ;
//Format the original database price in $ 0.000 CAD format.
$w( “#TextDatabasePrice” ).text = “$” + $w( “#TextDatabasePrice” ).text + " CAD" ;
//Show the special red flag and strikethrough original price.
$w( “#TextDatabasePriceLine” ).show();
$w( “#TextDatabasePrice” ).show();
$w( “#ContainerBoxRebateFlag” ).show();
}
//Format the selling price in “$ 0.00 CAD” format.
$w( “#TextPrice” ).text = “$ " + $w( “#TextPrice” ).text + " CAD” ;
});
});
//----------------- Start of “Input Section” for user ----------------- //
// Copy Girl Name InputBox to “Name” on Mug.
export function InputGirlName_change(event) {
GirlNamevalidation = “True” ;
}
export function DropdownSkinColourSelect_change(event) {
SkinColourDropdownValidation = “True” ;
if (ScrubColourDropdownValidation === “True” ) {
$w( “#textCompleteLook” ).expand();
$w( “#RepeaterImageSample” ).expand();
$w( “#testQuotes” ).expand();
$w( “#RepeaterMugQuotes” ).expand();
$w( “#buttonPreview” ).expand();
}
}
export function DropdownScrubColourSelect_change(event) {
ScrubColourDropdownValidation = “True” ;
if (SkinColourDropdownValidation === “True” ) {
$w( “#textCompleteLook” ).expand();
$w( “#RepeaterImageSample” ).expand();
$w( “#testQuotes” ).expand();
$w( “#RepeaterMugQuotes” ).expand();
$w( “#buttonPreview” ).expand();
}
}
export async function ButtonInImageSampleInRepeater_click(event, $w) {
$w( “#DatasetSkin” ).onReady(() => {
$w( “#RepeaterImageSample” ).onItemReady(($item, itemData, index) => {
CompleteLookValidation = “True” ;
})
})
}
export function ButtonInImageSampleQuotesInRepeater_click(event, $w) {
$w( “#datasetMugsQuotes” ).onReady(() => {
$w( “#RepeaterMugQuotes” ).onItemReady(($item, itemData, index) => {
QuotesValidation = “True” ;
})
})
}
export function textDetails_click(event, $w) {
if (DetailsValidation === “Collapse” ) {
$w( “#boxMoreDetails” ).expand();
$w( “#textDetails” ).text = “Description ▲” ;
DetailsValidation = “Expand” ;
} else {
$w( “#boxMoreDetails” ).collapse();
$w( “#textDetails” ).text = “Description ▼” ;
DetailsValidation = “Collapse” ;
}
}
export function buttonPreview_click(event, $item) {
let PopupPreviewDataGirlName = $w( ‘#InputGirlName’ ).value;
let PopupPreviewDataQuote = $item( ‘#datasetMugsQuotes’ ).getCurrentItem().src;
wixWindow.openLightbox( 'PopupPreview' , {
“Name” : PopupPreviewDataGirlName,
“Quote” : PopupPreviewDataQuote
})
}
LIGHTBOX
Quote images
(" # QuoteOnMug")
LIGHTBOX Code
import wixwindow from ‘wix-window’ ;
import { lightbox } from ‘wix-window’ ;
$w.onReady(() => {
$w.onReady( function () {
let ReceivedData = wixWindow.lightbox.getContext();
$w( ‘#TextGirlNameOnMug’ ).text = ReceivedData.pageSend1;
});
} );
LIGHTBOX screenshot
Seems like the console.log indicates that the name is being transferred over to the lightbox.
Also, the nurse image doesn’t update with the selection, and both the name (located below the nurse image) and the quote image (on the right mug) are now blank. I’m guessing they are blank because of the Wix code SDK Warning - because they are null.
Any help would be greatly appreciated.