How do I add two products from different collections to my cart?
I am developing a website for my eyewear store, and I am using the standard Wix store (“Stores/Products” collection) to register the frames, their details, and prices. Each of those registered frames has several options for lenses, that is included in collection Details.
The site works with the user selecting a frame and then selecting the lens according to their needs (all data in “Itens” collection.
All the repeaters and logic are working properly, and my only issue is to include both products on the cart. I tried in several ways and had the same result: only the product in the (“Stores/Products” is registered, even with the console.log from the cart displaying both products.
Anyone have some thoughts? I am including all the code and the website is https://pspnc4.wixsite.com/ol--vis-o/copy-of-products/sou-um-produto
Sorry for the bad design, but this will be our next task.
I appreciate your help!
import { cart } from “wix-stores-frontend”;
import wixData from ‘wix-data’;$w.onReady(function () {
const lensRepeater = $w(‘#lensRepeater’);
const lensDetailsRepeater = $w(‘#lensDetailsRepeater’);let itemsArray = []; let thisProduct; let currentMedia = 0; let selectedTitle = ""; let productDetail; let selectedSubtitle = ""; let itemsToAdd; const mainMedia = $w('#mainMedia'); const name = $w('#name'); const description = $w('#description'); const mediaRepeater = $w('#mediaRepeater'); const infoSectionsRepeater = $w('#infoSectionsRepeater'); function populateMediaRepeater() { const mediaData = thisProduct.mediaItems.map((item, index) => ({ ...item, _id: index.toString() })); mediaRepeater.data = mediaData; } function populateAdditionalInfoRepeater() { infoSectionsRepeater.data = thisProduct.additionalInfoSections.map((item, index) => ({ ...item, _id: index.toString() })); } function populatePrices() { const price = thisProduct.discountedPrice > thisProduct.price ? thisProduct.formattedDiscountedPrice : thisProduct.formattedPrice; $w('#price').text = price; if (thisProduct.price > thisProduct.discountedPrice) { $w('#originalPrice').html = `<p style="text-decoration: line-through;color:gray;font-size: small;"> ${thisProduct.formattedPrice} </p>`; $w('#originalPrice').show(); } } function mediaItemHandler(currentMedia) { mediaRepeater.forEachItem(($item, itemData, index) => { if (index !== currentMedia) return; mainMedia.src = itemData.src; $w('#mediaBackground').style.backgroundColor = "white"; $item('#mediaBackground').style.backgroundColor = "black"; }); } function readMoreButtonHandler() { if ($w('#readMoreButton').label === "Veja mais") { description.html = thisProduct.description; infoSectionsRepeater.expand(); $w('#readMoreButton').label = "Mostrar menos"; } else { description.html = thisProduct.description.substring(0, 100) + "...</p>"; infoSectionsRepeater.collapse(); $w('#readMoreButton').label = "Veja mais"; description.scrollTo(); } } function addToCart() { const products = [{ productId: thisProduct._id, quantity: Number($w('#quantity').value), price: parseFloat(thisProduct.discountedPrice) }, { productId: productDetail._id, quantity: 1, price: parseFloat(productDetail.price) }, ] console.log(products); cart.addProducts(products) .then((updatedCart) => { $w('#successMessage').text = "Produtos adicionados com sucesso"; $w('#successMessage').show(); const cartId = updatedCart._id; const cartLineItems = updatedCart.lineItems; cart.showMiniCart(); }) .catch(error => { console.error(error); $w('#successMessage').text = "Produtos não adicionados"; $w('#successMessage').show(); }); } function filterAndShowDetails(selectedTitle) { wixData.query("Itens") .eq("title", selectedTitle) .find() .then(results => { const filteredArray = results.items; lensDetailsRepeater.data = filteredArray; lensDetailsRepeater.show(); }) .catch(error => { console.error("Erro ao filtrar itens:", error); }); } function loadLensRepeater(uniqueTitles) { wixData.query("Itens") .find() .then(results => { itemsArray = results.items; const uniqueItems = uniqueTitles.map(title => { return itemsArray.find(item => item.title === title); }); lensRepeater.data = uniqueItems; }) .catch(error => { console.error("Erro ao carregar itens:", error); }); } lensRepeater.onItemReady(($item, itemData) => { $item('#titleText').text = itemData.title; $item('#descriptionText').text = itemData.description; $item('#titleText').onClick(() => { selectedTitle = itemData.title; filterAndShowDetails(selectedTitle); lensDetailsRepeater.show(); }); }); lensDetailsRepeater.onItemReady(($item, itemData) => { $item('#subtitleText').text = itemData.subtitle; $item('#detailPriceText').text = itemData.price.toString(); $item('#subtitleText').onClick(() => { selectedSubtitle = itemData.subtitle; productDetail = itemData; console.log(productDetail); }); }); $w('#nextMediaButton').onClick(() => { if (currentMedia < thisProduct.mediaItems.length - 1) { currentMedia += 1; mainMedia.src = thisProduct.mediaItems[currentMedia].src; mediaItemHandler(currentMedia); } }); $w('#prevMediaButton').onClick(() => { if (currentMedia > 0) { currentMedia -= 1; mainMedia.src = thisProduct.mediaItems[currentMedia].src; mediaItemHandler(currentMedia); } }); $w('#readMoreButton').onClick(readMoreButtonHandler); $w('#addToCartButton').onClick(addToCart); wixData.query("Itens") .find() .then(results => { const uniqueTitles = results.items.map(item => item.title); loadLensRepeater(uniqueTitles); }) .catch(error => { console.error("Erro ao carregar itens:", error); }); $w('#dynamicDataset').onReady(() => { thisProduct = $w('#dynamicDataset').getCurrentItem(); mainMedia.src = thisProduct.mainMedia; name.text = thisProduct.name; description.html = thisProduct.description.substring(0, 100) + "...</p>"; populateMediaRepeater(); populateAdditionalInfoRepeater(); populatePrices(); console.log(thisProduct); }); mediaRepeater.onItemReady(($item, itemData, index) => { $item('#media').src = itemData.src; if (index === 0) { $item('#mediaBackground').style.backgroundColor = "black"; } $item('#media').onClick(() => { mainMedia.src = itemData.src; $w('#mediaBackground').style.backgroundColor = "white"; $item('#mediaBackground').style.backgroundColor = "black"; }); });
});