Hi guys!
First of all im coding inept, Please treat me like a 10 year old. Im not sure What im doing wrong here.
I want to create a custom cart page for my website so i followed this tutorial on youtube: https://www.youtube.com/watch?v=btCO5WtQDZo&list=PL2yxIm1FqbSzGgQnb8rNEVUab_L3y38TA&index=245
Im getting the above error when i first load in the page. The Items in the cart are being added with the correct product option and the price is correct.
However, when i try to add a quantity using the “+” button, It doesnt add up. And i get this error when i click the “+” button.
Questions:
-Why am I getting the error in the first image when i load in the custom cart page? How to fix it in my code?
-Why is the + add quantity not working? how to fix that?
-Is this related to the “rendercart” functionality issue?
HERE IS MY CODE:
PAGE CODE:
import { cart } from "wix-stores-frontend";
import {
myGetCurrentCartFunction,
changeItemQuantity,
getCartTotals,
getCheckoutUrl,
} from "backend/crt1.web";
import wixLocationFrontend from "wix-location-frontend";
$w.onReady(function () {
populateCartItems();
populateCartTotals();
$w("#checkoutButton").onClick(async () => {
const checkoutUrl = await getCheckoutUrl();
wixLocationFrontend.to(checkoutUrl);
});
});
async function populateCartItems(params) {
const currentCart = await cart.getCurrentCart();
console.log(currentCart);
const { lineItems, currency } = currentCart;
console.log("lineItems:", lineItems);
const dataList = lineItems.map((item) => {
return { _id: item.productId, ...item };
});
$w("#lineItemsrepeater").onItemReady(($item, itemData) => {
console.log($item, itemData);
$item("#productName").text = itemData.name;
$item("#image").src = itemData.mediaItem.src;
$item("#price").text = `${currency.code} ${itemData.price}`;
$item("#totalPrice").text = `${currency.code} ${
itemData.quantity * itemData.price
}`;
$item("#quantityInput").text = itemData.quantity.toString();
$item("#productOptions").text = convertProductOptionsToText(itemData);
$item("#addQuantityButton").onClick(async () => {
const { _id, quantity } = itemData;
const updatedQuantity = quantity + 1;
const {currentCart} = await changeItemQuantity({
_id,
quantity: updatedQuantity,
});
console.log("currentCart", currentCart);
renderCart(currentCart);
});
});
$w("#lineItemsrepeater").data = dataList;
}
async function renderCart(currentCart) {
const { lineItems, currency } = currentCart;
$w("#lineItemsrepeater").data = lineItems;
$w("#lineItemsrepeater").forEachItem(($item, itemData) => {
console.log($item, itemData);
$item("#productName").text = itemData.name;
$item("#image").src = itemData.mediaItem.src;
$item("#price").text = `${currency.code} ${itemData.price}`;
$item("#totalPrice").text = `${currency.code} ${
itemData.quantity * itemData.price
}`;
$item("#quantityInput").text = itemData.quantity.toString();
$item("#productOptions").text = convertProductOptionsToText(itemData);
});
}
async function populateCartTotals() {
const { priceSummary } = await getCartTotals();
console.log("priceSummary", priceSummary);
$w("#subtotal").text = priceSummary.subtotal.formattedAmount;
}
function convertProductOptionsToText(product) {
return product.options.find((a) => a.option === "Size").selection;
}
BACK END:
import { Permissions, webMethod } from "wix-web-module";
import { currentCart, checkout } from "wix-ecom-backend";
export const myGetCurrentCartFunction = webMethod(
Permissions.Anyone,
async () => {
try {
const myCurrentCart = await currentCart.getCurrentCart();
console.log("Success! Retrieved current cart:", currentCart);
return myCurrentCart;
} catch (error) {
console.error(error);
// Handle the error
}
},
);
export const getCartTotals = webMethod(
Permissions.Anyone,
async () => {
try {
const cartTotals = await currentCart.estimateCurrentCartTotals();
return cartTotals;
} catch (error) {
console.error(error);
// Handle the error
}
},
);
export const getCheckoutUrl = webMethod(
Permissions.Anyone,
async () => {
try {
const { checkoutId } = await currentCart.createCheckoutFromCurrentCart({
channelType: "WIX_APP_STORE"
});
const {checkoutUrl} = await checkout.getCheckoutUrl(checkoutId);
return checkoutUrl;
} catch (error) {
console.error(error);
// Handle the error
}
},
);
export const changeItemQuantity = webMethod(
Permissions.Anyone,
async (lineItem) => {
try {
const updatedcurrentCart = await currentCart.updateCurrentCartLineItemQuantity([lineItem]);
return updatedcurrentCart;
} catch (error) {
console.error(error);
// Handle the error
}
},
);
I am really struggling with this! I would really appreciate if someone could solve this issue!!!
Thank you!