Introduction

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

With the eCommerce frontend 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 eCommerce frontend API, import wixEcomFrontend from the wix-ecom-frontend module:

Copy
import wixEcomFrontend from "wix-ecom-frontend";

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 wixEcomFrontend from "wix-ecom-frontend";
import wixEcomBackend from "wix-ecom-backend";

$w("#myNavigateToCartPageButton").onClick(() => {
  // 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,
      },
    ],
  };

  // The wixEcomBackend.currentCart module is universal.
  // You can call its methods in frontend and backend code.
  wixEcomBackend.currentCart
    .addToCurrentCart(options)
    .then(() => {
      console.log("item added to cart");
      // navigate to cart page after adding item
      wixEcomFrontend.navigateToCartPage();
    })
    .catch((error) => {
      console.error(error);
      // Handle the error
    });
});
Did this help?