Custom cart page using velo

Ask the community
,
1

I just want simple custom cart page with Product name, price, product remove button, total price, checkout button.

backend ‘cart.web.js’ file.

// Backend code - cart.web.js

import { Permissions, webMethod } from "wix-web-module";
import { cart, currentCart, checkout, orders } from "wix-ecom-backend";

// Function to retrieve a specific cart by cartId
export const myGetCartFunction = webMethod(
  Permissions.Anyone,
  async (cartId) => {
    try {
      const retrievedCart = await cart.getCart(cartId);
      console.log("Success! Retrieved cart:", retrievedCart);
      return retrievedCart;
    } catch (error) {
      console.error("Error retrieving cart:", error);
      throw new Error("Failed to retrieve the cart.");
    }
  }
);

// Function to update a specific cart by cartId
export const myUpdateCartFunction = webMethod(
  Permissions.Anyone,
  async (cartId, options) => {
    try {
      const updatedCart = await cart.updateCart(cartId, options);
      console.log("Success! Updated cart:", updatedCart);
      return updatedCart;
    } catch (error) {
      console.error("Error updating cart:", error);
      throw new Error("Failed to update the cart.");
    }
  }
);

// Function to remove line items from a cart
export const myRemoveLineItemsFunction = webMethod(
  Permissions.Anyone,
  async (cartId, lineItemIds) => {
    try {
      const updatedCart = await cart.removeLineItems(cartId, lineItemIds);
      console.log("Success! Line items removed from cart:", updatedCart);
      return updatedCart;
    } catch (error) {
      console.error("Error removing line items:", error);
      throw new Error("Failed to remove line items from the cart.");
    }
  }
);

// Function to retrieve the current user's cart
export const myGetCurrentCartFunction = webMethod(
  Permissions.Anyone,
  async () => {
    try {
      const myCurrentCart = await currentCart.getCurrentCart();
      console.log("Success! Retrieved current cart:", myCurrentCart);
      return myCurrentCart;
    } catch (error) {
      console.error("Error retrieving current cart:", error);
      throw new Error("Failed to retrieve the current cart.");
    }
  }
);

// Function to add items to checkout
export const myAddToCheckoutFunction = webMethod(
  Permissions.Anyone,
  async (cartId, options) => {
    try {
      const updatedCheckout = await checkout.addToCheckout(cartId, options);
      console.log("Success! Updated checkout:", updatedCheckout);
      return updatedCheckout;
    } catch (error) {
      console.error("Error adding to checkout:", error);
      throw new Error("Failed to update checkout.");
    }
  }
);

// Function to create an order
export const createOrderFunction = webMethod(
  Permissions.Anyone,
  async (order, options) => {
    try {
      const result = await orders.createOrder(order, options);
      console.log("Success! Order created:", result);
      return result;
    } catch (error) {
      console.error("Error creating order:", error);
      throw new Error("Failed to create the order.");
    }
  }
);

Cart Page code.

import {
  myGetCartFunction,
  myUpdateCartFunction,
  myRemoveLineItemsFunction,
  myGetCurrentCartFunction,
  myAddToCheckoutFunction,
} from "backend/cart.web.js";
import wixEcomFrontend from "wix-ecom-frontend";

// Fetch and display cart details
function fetchCart(cartId) {
  myGetCartFunction(cartId)
    .then((cart) => {
      //$w("#cartTotal").text = cart.subtotal.formattedAmount;
      //$w("#cartItemCount").text = String(cart.lineItems.length);

      // Clear previous items
      $w("#cartRepeater").data = [];

      // Map cart items to the repeater
      const cartItems = cart.lineItems.map((item) => ({
        _id: item._id,
        name: item.name,
        price: item.price.formattedAmount,
        image: item.mediaItems[0]?.src || "", // Assuming the first media item is the product image
      }));

      $w("#cartRepeater").data = cartItems;

      console.log("Cart details retrieved successfully:", cart);
    })
    .catch((error) => {
      console.error("Error fetching cart:", error);
    });
}

// Update repeater on item ready
$w.onReady(() => {
  // Replace with the actual cart ID from your context
  //const cartId = $w("#cartIdInput").value;
  const cartId = '_id';

  // Fetch cart details on button click
  $w("#myNavigateToCartPageButton").onClick(() => fetchCart(cartId));

  // Set up repeater to display cart items
  $w("#cartRepeater").onItemReady(($item, itemData) => {
    $item("#productName").text = itemData.name;
    $item("#productPrice").text = itemData.price;
    if (itemData.image) {
      $item("#productImage").src = itemData.image;
    } else {
      $item("#productImage").hide(); // Hide image if none exists
    }
  });
});
2

:expressionless: not working, can someone please help me?

@Pratham