My end requirement is to capture 200 color choices for a single product. To give a better user experience Im trying to capture media linked to each color and show it in lightbox. The code is working fine in Preview but showing duplicate media in Live site. Im attaching video for both. For testing, I have just put two colors for a single product.
Any pointers will be appreciated and will help to conclude what we can offer on wix platform
WIX PREVIEW:
WIX LIVE SITE Video
CODE ON Dynamic Product Page
import wixWindow from ‘wix-window’
import wixData from ‘wix-data’
var lightboxGallery;
$w.onReady(() => {
$w( "#dynamicDataset" ).onReady(() => {
var colorSelected;
let galleryItems = ;
let itemObj = $w( “#dynamicDataset” ).getCurrentItem();
//gets Id of current item
let productId = itemObj._id;
let arrPath = itemObj.productOptions.Color.choices.length;
let arrPathOriginal = itemObj.productOptions.Color.choices;
for ( var index = 0 ; index < arrPath; index++) {
console.log( “index” + index);
let displayIndex = index + 1 ;
$w( “#countOfColor” ).label = displayIndex.toString();
galleryItems.push({
“src” : itemObj.productOptions.Color.choices[index].mediaItems[ 0 ].src,
“description” : itemObj.productOptions.Color.choices[index].description,
“title” : “”
});
}
lightboxGallery = galleryItems;
});
});
export function btnCart_click(cartAdd) {
let itemObj = $w( “#dynamicDataset” ).getCurrentItem();
let productId = itemObj._id;
let colorVal = $w( “#txtColorChoosen” ).text;
$w( ‘#shoppingCartIcon1’ ).addToCart(productId, 1 , {
“choices” : {
“color” : colorVal
// “Size”: small
},
})
.then(() => {
console.log( “Product added” );
})
. catch ((error) => {
console.log(error);
});
}
export function button1_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
wixWindow.openLightbox( ‘bulkColorGallery’ , lightboxGallery)
.then((dataFromLightbox) => {
let colorChoosen = dataFromLightbox.colorChoosen;
let imgLink = dataFromLightbox.imgLinkChoosen;
console.log( “Color Chooosen from lightbox” + colorChoosen + "img choosen " + imgLink);
$w( “#txtColorChoosen” ).text = colorChoosen;
$w( “#image1” ).src = imgLink;
});
}
CODE ON LIGHTBOX
import wixWindow from ‘wix-window’ ;
import wixData from ‘wix-data’ ;
$w.onReady( function () {
let dataObj = wixWindow.lightbox.getContext();
$w( ‘#lightboxGallery’ ).items = dataObj;
})
export function lightboxGallery_itemClicked(event) {
let itemIndex = event.itemIndex;
let itemDescription = event.item.description;
let itemLink = event.item.src;
var colorChoosen;
wixWindow.lightbox.close( {
“colorChoosen” : itemDescription,
“imgLinkChoosen” : itemLink
} );
}
