Introduction

Using the frontend eCom API, you can interact with the native cart and checkout components on your site.

With the frontend eCom API, you can:

  • Refresh the cart to display its latest state.
  • Listen to changes in the native cart components.
  • Open the Side Cart panel.
  • Navigate to the Cart Page.
  • Navigate to the Checkout Page.

To use the frontend eCom API, import * as wixSiteEcom from the @wix/site-ecom module:

Copy

Before you begin

It's important to note the following points before starting to code:

Terminology

  • Cart: Holds information about a potential transaction, including details about selected items, prices, and discounts, as well as the potential buyer.
  • Side Cart: A preview of the cart page, which opens as a panel on the side of a page.
  • Cart Page: A page where a buyer can view and manage the items in their cart.
  • Checkout Page: A page where a buyer finalizes a purchase. Each checkout holds information about the items to be purchased, price and tax summaries, shipping and billing information, any applied discounts, and more.
Did this help?

navigateToCartPage( )

Directs the browser to navigate to the site visitor's Cart Page.

The navigateToCartPage() function returns a Promise that resolves when the browser successfully navigates to the Cart Page.

Method Declaration
Copy
function navigateToCartPage(): Promise<void>;
Request
This method does not take any parameters
Navigate to the cart page
JavaScript
import { ecom } from "@wix/site-ecom";
import { addToCart } from "backend/addToCart";

$w("#myNavigateToCartPageButton").onClick(async () => {
  // Example values for the options object
  const options = {
    lineItems: [
      {
        catalogReference: {
          // Wix Stores appId
          appId: "215238eb-22a5-4c36-9e7b-e7c08025e04e",
          // Wix Stores productId
          catalogItemId: "3fb6a3c8-988b-8755-04bd-5c59ae0b18ea",
        },
        quantity: 1,
      },
    ],
  };

  try {
    // addToCart() is defined by you in a backend file
    // that calls currentCard.addToCurrentCart from the
    // backend ecom SDK module.
    await addToCart(options);
    console.log("Item added to cart");
    // Navigate to cart page after adding item
    await ecom.navigateToCartPage();
  } catch (error) {
    console.error(error);
    // Handle the error
  }
});
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?