Question:
How can I make my code pass in and receive data from a lightbox correctly?
Product:
Wix Editor
What are you trying to achieve:
I would like to pass in data from a page to a lightbox, then take data back out.
What have you already tried:
I tried to set up my code similar to the docs, however, it doesn’t seem to be working. It works fine on preview, but as soon as I publish and try it on the live site, I get this console error:
Additional information:
My code:
Cart Page
import { currentCart } from 'wix-ecom-backend'
import wixWindowFrontend from 'wix-window-frontend';
import { getPaymentPlans } from 'backend/web-modules/paymentPlans.web.js'
import { cart } from 'wix-stores-frontend';
$w.onReady(async function () {
const cartInfo = await currentCart.getCurrentCart()
console.log('cart details:', cartInfo)
const paymentPlans = await getPaymentPlans()
const lineItems = cartInfo?.lineItems
if (lineItems && lineItems.length > 0) {
const registrations = lineItems.filter(item => item.catalogReference.appId === '13d21c63-b5ec-5912-8397-c3a5ddb27a97')
if (registrations.length > 0) {
$w('#needAPaymentPlanButton').show()
} else {
$w('#needAPaymentPlanButton').hide()
}
}
$w('#needAPaymentPlanButton').onClick(() => {
console.log('opening!!')
wixWindowFrontend.openLightbox('Payment Plan Options', { 'paymentPlans': paymentPlans }).then(returnedData => {
console.log('returnedData is: ', returnedData)
if (returnedData && returnedData?.selectedPlanId) {
const paymentPlansFiltered = paymentPlans.filter(plan => plan._id === returnedData.selectedPlanId)
if (paymentPlansFiltered.length > 0) {
const couponCode = paymentPlansFiltered[0]?.couponCode
console.log('howdy, plans filtered: ', paymentPlansFiltered, '; plans: ', paymentPlans, '; couponCode: ', couponCode)
if (couponCode) {
console.log('about to apply coupon: ', couponCode)
cart.applyCoupon(couponCode).then(() => { console.log('applied!!!!!');
wixWindowFrontend.lightbox.close() }).catch((e) => { console.error('error handling coupon: ', e) })
}
}
}
})
})
});
Payment Plan Options lightbox code
import { cart } from 'wix-stores-frontend';
import wixWindowFrontend from 'wix-window-frontend';
$w.onReady(function () {
console.log('starting non-async function!')
let received = wixWindowFrontend.lightbox.getContext();
console.log('received: ', received)
console.log('dropdown: ', $w('#paymentPlansDropdownElement'))
const dropdownOptions = received.paymentPlans.map((plan) => {
return {
label: plan.title + ' - every ' + plan.monthsBetweenPayments + 'month' + (plan.monthsBetweenPayments > 1 ? 's' : ''),
value: plan._id
};
});
console.log('dropdown options: ', dropdownOptions)
$w('#paymentPlansDropdownElement').options = dropdownOptions
console.log('options: ', $w('#paymentPlansDropdownElement'), $w('#paymentPlansDropdownElement').options)
});
export function paymentPlanSubmitButton_click(event) {
console.log('in event handler, button click event: ', event)
console.log('payment plan is: ', $w('#paymentPlansDropdownElement').value)
if ($w('#paymentPlansDropdownElement').value) {
wixWindowFrontend.lightbox.close({selectedPlanId: $w('#paymentPlansDropdownElement').value})
}
}
