Hi,
first a desclaimer - I’m a newby…
I have only one product on my site that is customizable and the options affect the price. I created a set of 3 dropdowns with the various options.
The price calculation works well. However, when clicking the “add to cart” button, it redirects to the car page but the cart remains empty. there is no error in the console.
I see in the console that the options are collected correctly, but when I call the contents of the cart, the cart is empty.
I tried with another product that doesn’t have variables - nothing worked. I also found here a piece of code for a cart icon, that I tried to use separately from the button, to add a simple products (no variants) to the cart, and the cart consistently remains empty.
I’m using wix editor with velo.
This is my code:
// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// Import Wix Store module for cart functionality
import { cart } from 'wix-stores';
import wixLocation from 'wix-location';
$w.onReady(function () {
// default values
$w("#lengthDropdown").value = "12"
$w("#destinationDropdown").value = "DE"
$w("#shippingDropdown").value = "monthly"
// Initial price calculation
calculatePrice();
// set the price display
// $w("#priceText").text = "96 €";
$w("#destinationDropdown, #shippingDropdown, #lengthDropdown").onChange(() => {
calculatePrice();
});
// Handle add to cart button click
$w("#addToCartButton").onClick(() => {
addToCart();
});
});
/*********/
//cart icon - test with another product with no options
$w('#shoppingCartIcon1').addToCart("44551edc-f032-a489-5a78-fe403973bdcd", 1)
.then( () => { console.log("Product added"); } )
.catch( (error) => { console.log(error); } );
/*********/
// Function to calculate and update the price
function calculatePrice() {
let basePrice = 8; // Example base price
let totalPrice = basePrice;
let length = $w("#lengthDropdown").value;
let destination = $w("#destinationDropdown").value;
let shipping = $w("#shippingDropdown").value;
// Adjust based on length
switch(length) {
case "1":
totalPrice = (totalPrice * 1);
break;
case "6":
totalPrice = (totalPrice * 6);
break;
case "12":
totalPrice = (totalPrice * 12);
break;
case "24":
totalPrice = (totalPrice * 24);
break;
}
switch(destination) {
case "DE":
totalPrice += 0;
break;
case "EU":
totalPrice += 2;
break;
case "ROW":
totalPrice += 5;
break;
}
switch(shipping) {
case "monthly":
totalPrice += 0;
break;
case "first":
totalPrice += 5;
break;
case "all":
totalPrice += 5;
break;
}
// Update the price display
$w("#priceText").text = `${totalPrice.toFixed(2)} €`;
}
// Function to add selected product to cart
function addToCart() {
let productId = "fc8f503e-fe0b-5dc5-773d-efa87fcf4008";
let totalPrice = parseFloat($w("#priceText").text.replace('€', ''));
// Get selected options
let length = $w("#lengthDropdown").value;
let destination = $w("#destinationDropdown").value;
let shipping = $w("#shippingDropdown").value;
// Define custom options
let options = [
{
"optionName": "Length",
"selection": length
},
{
"optionName": "Destination",
"selection": destination
},
{
"optionName": "Shipping",
"selection": shipping
}
];
//print to the console
console.log("Product ID: ", productId);
console.log("Total Price: ", totalPrice);
console.log("Options: ", options);
console.log("Constructed Options: ", JSON.stringify(options, null, 2));
// Add the item to the cart
cart.addProducts([{
//"_id": "b9d01463-ac47-4a19-a390-9a817ad6af5a", //cart id
"productId" : productId,
"quantity": 1,
"customTextFields": [
{
"title": "Total Price",
"value": `${totalPrice.toFixed(2)} €`
}
],
"options": options
}])
.then(() => {
// Check current cart state
return cart.getCurrentCart();
})
.then((currentCart) => {
console.log("Current cart contents: ", currentCart);
console.log("Product added to cart");
wixLocation.to("/cart-page");
})
.catch((error) => {
console.error("Error adding to cart: ", JSON.stringify(error, null, 2));
if (error.response) {
console.error("Response from server: ", error.response);
}
});
}
When I add the product directly from the product page to the cart, it works, but the price is not calculated.
I appreciate your help!