Hello, I’m trying to create a custom catalog on wix stores by rendering choices on a page using repeaters and opening a lightbox which pulls data including modifiers from that product and displays it. I made it so that the user can configure the product in the lightbox, but the add to cart function is not working. All my console checkpoints do not have errors but after the add, the cart is still empty and lineItems property is empty array.
Here is the backend:
import { Permissions, webMethod } from "wix-web-module";
import { currentCart } from "wix-ecom-backend";
import wixData from "wix-data";
const WIXSTORES_APP_ID = "215238eb-22a5-4c36-9e7b-e7c08025e04e";
export const addToCart = webMethod(
Permissions.Anyone,
async (params) => {
console.log("=== BACKEND ===");
console.log("Received product ID:", params.productId);
try {
// Query the product
const results = await wixData.query("Stores/Products")
.eq("_id", params.productId)
.find();
if (results.items.length === 0) {
console.error("Product not found in Stores/Products");
return {
success: false,
error: "Product not found"
};
}
const product = results.items[0];
const options = {
lineItems: [
{
catalogReference: {
appId: WIXSTORES_APP_ID,
catalogItemId: product._id,
},
quantity: params.quantity,
},
],
};
const result = await currentCart.addToCurrentCart(options);
console.log("addToCurrentCart returned:", result);
const cart = await currentCart.getCurrentCart();
console.log("Current cart:", cart);
console.log("Line items count:", cart.lineItems?.length || 0);
}
}
);
Lightbox page code:
import wixData from 'wix-data';
import wixWindow from 'wix-window';
import { addToCart } from 'backend/cart.web';
let currentProduct;
let selectedSingleOptions = {};
let selectedMultiOptions = {};
$w.onReady(async () => {
const { productId } = wixWindow.lightbox.getContext();
const result = await wixData.get("Stores/Products", productId);
currentProduct = result;
// Render dynamic data
//Populate single-select repeater
//Populate multi-select repeater
setupAddToCartButton();
});
function setupAddToCartButton() {
$w('#addToCartButton').onClick(async () => {
await addProductToCart();
});
}
const addProductToCart = async () => {
try {
const allOptions = { ...selectedSingleOptions, ...selectedMultiOptions };
// Convert array values to comma-separated strings
const formattedOptions = {};
for (const [key, value] of Object.entries(allOptions)) {
if (Array.isArray(value)) {
formattedOptions[key] = value.join(", ");
} else {
formattedOptions[key] = value;
}
}
const quantity = Number($w('#qtyInput').value) || 1;
const params = {
productId: currentProduct._id, // GUID
productOptions: Object.keys(formattedOptions).length > 0 ? formattedOptions : {},
quantity: quantity
};
const result = await addToCart(params);
console.log("Backend result:", result);
} catch (error) {
console.error("Error adding to cart:", error);
}
};
I am not too concerned about the customization options right now as even uncustomized items are failing to be added to cart. Could the issue be with the behavior of the API from lightbox?
Appreciate any help!