<footer id="WIX_FOOTER" style="visibility:hidden;" class><nav class="zEGd0F" aria-label="More Wix pages" data-hook="footer__wrapper"><div class="qiiRxY"><div class="qSmvZl"><a class="LtfG6S" aria-label="Wix logo, homepage" title="Wix.com" href="https://www.wix.com"><svg xmlns="http://www.w3.org/2000/svg" width="71" height="28" fill="none" viewBox="0 0 166 64"><g fill="#000" clip-path="url(#a)"><path d="M165.301 0h-9.131a7.64 7.64 0 0 0-6.323 3.352l-12.212 18.014a.82.82 0 0 1-1.356 0L124.068 3.352A7.64 7.64 0 0 0 117.745 0h-9.131l21.753 32.09L108.734 64h9.131a7.64 7.64 0 0 0 6.323-3.352l12.091-17.836a.82.82 0 0 1 1.356 0l12.091 17.836A7.64 7.64 0 0 0 156.05 64h9.131l-21.634-31.91zM89.828 6.546V64h4.364a6.546 6.546 0 0 0 6.547-6.547V0h-4.364a6.546 6.546 0 0 0-6.547 6.546M81.83 0h-3.885a9.154 9.154 0 0 0-8.928 7.126L60.33 45.318 52.725 9.666C51.318 3.077 44.557-1.367 37.639.544c-4.407 1.217-7.674 4.94-8.627 9.41L21.485 45.27 12.813 7.128A9.16 9.16 0 0 0 3.883 0H0l14.555 63.997h5.515c5.004 0 9.328-3.499 10.372-8.393l9.305-43.664c.114-.542.6-.934 1.153-.934.552 0 1.038.392 1.153.934l9.312 43.667a10.6 10.6 0 0 0 10.373 8.39h5.533z"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h165.305v64H0z"></path></clipPath></defs></svg></a><p class="bUSBWm">The Wix website builder offers a complete solution from enterprise-grade infrastructure and business features to advanced SEO and marketing tools–enabling anyone to create and grow online.</p><ul class="uLHFcA"><li><a href="https://www.wix.com/about/us" target="_self" class="PlWjyD">About</a></li><li><a href="https://www.wix.com/about/contact-us" target="_self" class="PlWjyD">Contact Us</a></li></ul><ul class="SUCknL FgSyBI" data-hook="social-bar__wrapper"><li><a class="ACLKzf" href="https://www.facebook.com/wix" target="_blank" aria-label="facebook" title="Facebook" data-hook="social-bar__socialLink socialLink--id_facebook"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path fill="#000" d="M10 0C-2.399.363-3.663 17.76 8.43 20v-7.03H5.876V10.06H8.43V7.845c.072-4.058 3.333-4.207 6.047-3.718v2.476H13.21c-1.249 0-1.639.775-1.639 1.57v1.888h2.788l-.445 2.909H11.57V20C23.666 17.759 22.396.362 10 0"></path></svg></a></li><li><a class="ACLKzf" href="https://www.youtube.com/user/Wix" target="_blank" aria-label="youtube" title="Youtube" data-hook="social-bar__socialLink socialLink--id_youtube"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="20" fill="none" viewBox="0 0 28 20"><path fill="#000" d="M11.83.005c-2.96.056-4.594.12-6.14.237C3.805.385 3.093.511 2.475.81c-.357.173-.62.357-.92.648C.825 2.173.53 2.913.321 4.569l-.085.67a45 45 0 0 0-.162 2.222c-.099 2.083-.099 2.994 0 5.083.03.662.121 1.906.162 2.221l.085.67c.21 1.657.503 2.397 1.234 3.112.714.696 1.393.95 3.008 1.118C6.72 19.89 9.763 20 14 20c3.646 0 6.203-.073 8.31-.235 1.899-.148 2.597-.27 3.215-.57.357-.173.62-.357.92-.648.73-.715 1.025-1.455 1.234-3.111l.085-.67c.04-.316.132-1.56.162-2.222.099-2.089.099-3 0-5.083a45 45 0 0 0-.162-2.221l-.085-.67c-.21-1.657-.503-2.397-1.234-3.112C25.956.98 25.43.695 24.736.536c-.983-.23-3.269-.397-6.684-.492A295 295 0 0 0 11.83.005m.192 6.266c1.055.611 2.063 1.195 5.324 3.08.594.341 1.083.635 1.083.651 0 .014-.789.484-1.753 1.04a2861 2861 0 0 0-5.511 3.187c-.014.006-.022-1.897-.022-4.226 0-2.33.008-4.232.022-4.227.01.003.395.226.857.495"></path></svg></a></li><li><a class="ACLKzf" href="https://www.instagram.com/wix" target="_blank" aria-label="instagram" title="Instagram" data-hook="social-bar__socialLink socialLink--id_instagram"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path fill="#000" d="M5.858.07c-1.064.05-1.79.22-2.425.47-.658.256-1.215.6-1.77 1.156a4.9 4.9 0 0 0-1.15 1.772C.267 4.105.1 4.832.053 5.897s-.057 1.407-.052 4.122c.005 2.716.017 3.056.069 4.123.05 1.064.22 1.79.47 2.426.256.657.6 1.214 1.156 1.769a4.9 4.9 0 0 0 1.774 1.15c.636.245 1.363.413 2.428.46 1.064.046 1.407.057 4.122.052s3.056-.017 4.123-.068c1.067-.05 1.79-.221 2.425-.47a4.9 4.9 0 0 0 1.769-1.156 4.9 4.9 0 0 0 1.15-1.774c.246-.636.413-1.363.46-2.427.046-1.067.057-1.408.052-4.123s-.018-3.056-.068-4.122c-.05-1.067-.22-1.79-.47-2.427a4.9 4.9 0 0 0-1.156-1.769 4.9 4.9 0 0 0-1.773-1.15C15.895.269 15.168.1 14.104.054 13.039.009 12.697-.003 9.98.002S6.925.018 5.858.07m.117 18.078c-.975-.043-1.504-.205-1.857-.34-.467-.18-.8-.398-1.152-.746a3.1 3.1 0 0 1-.75-1.149c-.137-.352-.302-.881-.347-1.856-.05-1.054-.06-1.37-.066-4.04s.004-2.986.05-4.04c.042-.974.205-1.504.34-1.857.18-.468.397-.8.746-1.151a3.1 3.1 0 0 1 1.15-.75c.351-.138.88-.302 1.855-.348 1.054-.05 1.37-.06 4.04-.066s2.986.004 4.041.05c.974.043 1.505.204 1.857.34.467.18.8.397 1.151.746.352.35.568.682.75 1.15.138.35.302.88.348 1.855.05 1.054.062 1.37.066 4.04s-.004 2.986-.05 4.04c-.043.975-.205 1.504-.34 1.857a3.1 3.1 0 0 1-.747 1.152c-.349.35-.681.567-1.148.75-.352.137-.882.301-1.855.347-1.055.05-1.371.06-4.042.066s-2.985-.005-4.04-.05m8.153-13.493a1.2 1.2 0 1 0 2.4-.003 1.2 1.2 0 0 0-2.4.003M4.865 10.01a5.134 5.134 0 1 0 10.27-.02 5.134 5.134 0 0 0-10.27.02m1.802-.004a3.334 3.334 0 1 1 6.667-.013 3.334 3.334 0 0 1-6.667.013"></path></svg></a></li><li><a class="ACLKzf" href="https://www.tiktok.com/@wix" target="_blank" aria-label="tiktok" title="TikTok" data-hook="social-bar__socialLink socialLink--id_tiktok"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="20" fill="none" viewBox="0 0 17 20"><path fill="#000" d="M14.46 4.009A4.8 4.8 0 0 1 12.417.873 5 5 0 0 1 12.337 0H8.986L8.98 13.78c-.057 1.544-1.294 2.782-2.811 2.782-.472 0-.916-.121-1.307-.332a2.9 2.9 0 0 1-1.51-2.558c0-1.594 1.263-2.89 2.817-2.89.29 0 .568.048.831.133v-3.51a6 6 0 0 0-.831-.062C2.767 7.343 0 10.183 0 13.672a6.37 6.37 0 0 0 2.633 5.181A6.03 6.03 0 0 0 6.17 20c3.4 0 6.168-2.839 6.168-6.329V6.683A7.83 7.83 0 0 0 17 8.222V4.783a4.55 4.55 0 0 1-2.539-.775z"></path></svg></a></li><li><a class="ACLKzf" href="https://www.pinterest.com/wixcom" target="_blank" aria-label="pinterest" title="Pinterest" data-hook="social-bar__socialLink socialLink--id_pinterest"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path fill="#000" d="M10 0C4.479 0 0 4.477 0 10a10 10 0 0 0 5.986 9.159c-.03-.699-.006-1.536.173-2.296.193-.812 1.288-5.45 1.288-5.45s-.32-.638-.32-1.581c0-1.483.86-2.59 1.928-2.59.91 0 1.35.685 1.35 1.502 0 .914-.583 2.282-.883 3.549-.25 1.06.532 1.926 1.577 1.926 1.895 0 3.172-2.434 3.172-5.317 0-2.19-1.476-3.831-4.161-3.831-3.034 0-4.923 2.261-4.923 4.788 0 .872.256 1.486.66 1.96.183.22.21.308.142.559-.048.184-.157.627-.204.802-.066.254-.271.344-.5.251-1.398-.571-2.047-2.1-2.047-3.82 0-2.842 2.395-6.247 7.145-6.247 3.819 0 6.333 2.762 6.333 5.728 0 3.923-2.182 6.854-5.398 6.854-1.079 0-2.094-.585-2.442-1.247 0 0-.581 2.304-.703 2.749-.213.77-.628 1.542-1.007 2.142.9.265 1.85.41 2.835.41C15.524 20 20 15.523 20 9.999 20 4.477 15.524 0 10 0"></path></svg></a></li><li><a class="ACLKzf" href="https://twitter.com/wix" target="_blank" aria-label="twitter" title="Twitter" data-hook="social-bar__socialLink socialLink--id_twitter"><svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" fill="none" viewBox="0 0 19 20"><path fill="#000" d="m.044.063 7.352 11.022.023.034-3.667 4.39-3.71 4.44L0 20h1.677l3.241-3.881c1.783-2.134 3.242-3.88 3.245-3.88.002 0 1.169 1.745 2.592 3.88L13.344 20H19l-.023-.035-3.84-5.758c-2.1-3.148-3.82-5.73-3.82-5.737a883 883 0 0 1 3.527-4.234C16.783 1.914 18.372.01 18.372.006A28 28 0 0 0 17.54 0h-.835L13.64 3.67a1080 1080 0 0 1-3.074 3.673c-.004.001-1.11-1.65-2.457-3.67L5.658 0H0zM5.339 2.01l11.36 16.74c.005.007-.253.01-1.28.01h-1.286l-2.7-3.977L5.512 6.06C3.739 3.447 2.289 1.308 2.289 1.304s.54-.008 1.283-.008h1.281z"></path></svg></a></li><li><a class="ACLKzf" href="https://www.linkedin.com/company/wix-com?trk=biz-companies-cym" target="_blank" aria-label="linkedin" title="Linkedin" data-hook="social-bar__socialLink socialLink--id_linkedin"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path fill="#000" d="M18.522.003C15.446-.006 4.1.009 1.478.003.662.003 0 .645 0 1.435v17.133C0 19.358.662 20 1.478 20h17.044c.816 0 1.478-.641 1.478-1.432V1.435c0-.79-.662-1.432-1.478-1.432M6.078 16.738H3.085V7.735h2.993v9.003M4.582 6.506c-1.008.01-1.675-.684-1.673-1.555-.003-2.06 3.358-2.084 3.366 0 0 .864-.65 1.555-1.693 1.555M16.87 16.738h-2.993v-4.816c0-1.21-.433-2.036-1.516-2.036-1.111.04-1.663.901-1.634 1.825v5.027H7.735s.039-8.158 0-9.002h2.992l-.02 1.305c.394-.615 1.103-1.517 2.718-1.517 1.968 0 3.445 1.287 3.445 4.052z"></path></svg></a></li></ul></div><div class="lcWAzl"><div class="C2Sjqd" data-hook="column__column column--name_product"><p class="FBGLaT">Product</p><ul class="BWy7Sp "><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/website/templates" target="_self">Website Templates</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com" target="_self">Website Builder</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/website/design" target="_self">Website Design</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/features/main" target="_self">Wix Features</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/app-market" target="_blank">App Market</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/free/web-hosting" target="_self">Web Hosting</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/domains" target="_self">Domain Names</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/accessibility" target="_self">Website Accessibility</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/app-builder" target="_self">Mobile App Builder</a></li></ul></div><div class="C2Sjqd" data-hook="column__column column--name_solutions"><p class="FBGLaT">Solutions</p><ul class="BWy7Sp "><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/ecommerce/online-store" target="_blank">Online Store</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/scheduling-software" target="_blank">Online Booking</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/restaurant/website" target="_self">Restaurant Website</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/start/blog" target="_self">Blog Website</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/portfolio-website" target="_self">Portfolio Website</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/ecommerce/website" target="_blank">eCommerce Website</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/studio" target="_self">Wix Studio</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/studio/enterprise" target="_self">Enterprise Solutions</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/students" target="_self">Student Website</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/tools" target="_self">Professional Tools</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/logo/maker" target="_blank">Logo Maker</a></li></ul></div><div class="C2Sjqd" data-hook="column__column column--name_learn"><p class="FBGLaT">Learn</p><ul class="BWy7Sp "><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/blog" target="_blank">Wix Blog</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/manage/privacy-security-hub" target="_self">Privacy and Security Hub</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/seo/learn" target="_blank">SEO Learning Hub</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/encyclopedia" target="_blank">Wix Encyclopedia</a></li></ul></div><div class="C2Sjqd" data-hook="column__column column--name_support"><p class="FBGLaT">Support</p><ul class="BWy7Sp "><li class="LjUlS_"><a class="KuIaYs" href="https://support.wix.com/en" target="_self">Help Center</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/marketplace" target="_blank">Hire a Professional</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/abuse" target="_self">Report Abuse</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://status.wix.com" target="_self">System Status</a></li></ul></div><div class="C2Sjqd" data-hook="column__column column--name_company"><p class="FBGLaT">Company</p><ul class="BWy7Sp "><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/press-room/home" target="_self">Press &amp; Media</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://investors.wix.com" target="_self">Investor Relations</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/wix-capital" target="_self">Wix Capital</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/about/terms-accessibility" target="_self">Accessibility Statement</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/about/patent-notice" target="_self">Patent Notice</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://www.wix.com/about/sitemap" target="_self">Sitemap</a></li><li class="LjUlS_"><a class="KuIaYs" href="https://careers.wix.com" target="_self">Careers</a></li></ul></div></div></div><div class="PXtX5X"><div class="q2YDTr ehx5BU"><div class="JwIlOl"><div class="waU9GL"><ul class="fLy152"><li><a href="https://www.wix.com/about/terms-of-use" target="_self" class="FzJOdO">Terms of Use</a></li><li><a href="https://www.wix.com/about/privacy" target="_self" class="FzJOdO">Privacy Policy</a></li></ul><span class="GiYy1B">© 2006-2024 Wix.com, Inc</span></div></div></div></div></nav></footer>

Get to know our frameworks

Select an app template built on your preferred framework.

Build apps on our native app editor. Use drag and drop elements, Velo code and Wix APIs to develop custom features.

Streamline your app development process with the Wix CLI. Get a familiar developer experience with minimal setup and configuration.

Take full control over your app's tech stack, deployment, and hosting.

App templates

Wix Blocks templates

Wix CLI templates

Self-hosted templates

Kickstart your app development with templates built on your preferred Wix developer tool. Browse templates for practical foundation and get to know the Wix ecosystem.

Wix App Templates for Developers

This example apps can be used as a starting point for building your own app, for concrete examples of how to use Wix framework, or for inspiration.

Choose a template.<0 />Build an app.

Browse by:

How to build it step by step:

This template is built with:

Read how this template was built, step by step.

How we built this template

Deployment instructions:

Choose a package manager and run the command in your terminal.

Copy command

Before you get started, make sure you have the following:

Prerequisite steps

Get started with Wix CLI

Begin by setting up your Next.js project with your preferred hosting platform.

Select your hosting service

Start the deployment flow and set up your template repo on Netlify. After you finish set up, come back here and add your Netlify custom domain.

Copy the code from our Git repo to deploy your app on any platform that supports Next.js.

Start the deployment flow and set up your template repo on Vercel. After you finish set up, come back here and add your Vercel generated URL.

Add the base URL and give your app a name.

App details

Go to the app dashboard and test your app to ensure a smooth integration within the Wix ecosystem. <0>Learn more about app checks and testing</0>

Define your environment

Terminal

Related templates

Note

Warning

Your app name will be used as the namespace suffix.

Name your app to generate a namespace. This lets you refer to your app in code later on.

Go Headless

Build Apps

Client

API Preview

test

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

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](https://support.wix.com/en/article/customizing-the-cart-page).

```javascript
import { createClient } from "@wix/sdk"; 
import { site } from "@wix/site";
import { ecom } from "@wix/site-ecom";
import wixEcomBackend from 'wix-ecom-backend';

const wixClient = createClient({ host: site.host(), modules: { ecom } });

document.getElementById('myNavigateToCartPageButton').addEventListener('click', 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 {
    // The wixEcomBackend.currentCart module is universal.
    // You can call its methods in frontend and backend code.
    await wixEcomBackend.currentCart.addToCurrentCart(options);
    console.log('item added to cart');
    // navigate to cart page after adding item
    await wixClient.ecom.navigateToCartPage();
  } catch (error) {
    console.error(error);
    // Handle the error
  }
});
```

Navigate to the cart page

navigateToCartPage

void

Fulfilled - When the navigation is complete.

checkoutId

string

Additional parameters for customizing the checkout flow.

options

CheckoutPageOptions

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

The `navigateToCheckoutPage()` function returns a Promise that resolves when the browser successfully navigates to the [Checkout Page](https://support.wix.com/en/article/customizing-the-checkout-page).

> **Note:** The `checkoutId` parameter is **required**. To get a `checkoutId`, use one of the following `wix-ecom-backend` functions:
> + [`createCheckoutFromCurrentCart()`](https://dev.wix.com/docs/velo/api-reference/wix-ecom-backend/current-cart/create-checkout-from-current-cart)
> + [`cart.createCheckout()`](https://dev.wix.com/docs/velo/api-reference/wix-ecom-backend/cart/create-checkout)
> + [`checkout.createCheckout()`](https://dev.wix.com/docs/velo/api-reference/wix-ecom-backend/checkout/create-checkout)

```javascript
import { createClient } from "@wix/sdk"; 
import { site } from "@wix/site";
import { ecom } from "@wix/site-ecom";

const wixClient = createClient({ host: site.host(), modules: { ecom } });

document.getElementById('myNavigateToCheckoutPageButton').addEventListener('click', async () => {

  // Example checkoutId and options values
  const checkoutId = '12345678-1234-1234-1234-1234567890ab';
  const options = {
    skipDeliveryStep: true,
    hideContinueBrowsingButton: false,
    overrideContinueBrowsingUrl: 'https://www.myExampleSite.com/upsellPage',
    // override ThankYouPage URL with dynamic orderId parameter
    overrideThankYouPageUrl: 'https://www.myExampleSite.com/customThankYouPage/{orderId}'
  };

  try {
    await wixClient.ecom.navigateToCheckoutPage(checkoutId, options);
    console.log('Navigated successfully');
  } catch (error) {
    console.error(error);
    // Handle the error
  }
});
```

Navigate to the checkout page

navigateToCheckoutPage

The name of the function or the function expression to run when the cart is changed.

handler

onCartChangeHandler

Adds an event handler that runs when the cart changes.

The event handler set by the `onCartChange()` function runs when the cart changes.

The `onCartChange()` event handler is triggered when:
+ The cart is modified by native UI elements such as the 'Add to Cart' button, increase (+) and decrease (-) item quantity buttons, remove line item button (x), etc.
+ The [`refreshCart()`](https://dev.wix.com/docs/velo/api-reference/wix-ecom-frontend/refresh-cart) function is called.



**Important:** Actions performed by Velo functions other than the `refreshCart()` function do not trigger the `onCartChange()` event handler.

```javascript
import { createClient } from "@wix/sdk"; 
import { site } from "@wix/site";
import { ecom } from "@wix/site-ecom";
import wixEcomBackend from 'wix-ecom-backend';

const wixClient = createClient({ 
  host: site.host(), 
  modules: { ecom } 
});

// handler function that gets the current cart on cart change
const handler = async () => {
    // The wixEcomBackend.currentCart module is universal.
    // You can call its methods in frontend and backend code.
    try {
        const cart = await wixEcomBackend.currentCart.getCurrentCart();
        let cartId = cart._id;
        console.log('cart ID: ', cartId);
    } catch (error) {
        console.error(error);
        // Handle the error
    }
};

await wixClient.ecom.onCartChange(handler);
```

Add an event handler for cart changes

onCartChange

Opens the Side Cart panel.

The `openSideCart()` function opens the Side Cart panel on the current page.

> **Notes:**
> + We are gradually replacing the existing [Mini Cart](https://support.wix.com/en/article/customizing-the-mini-cart) with the new Side Cart panel.
> + This function will fail when viewing the site on mobile because there is no Mini Cart on the mobile site.
> + The new Side Cart works on mobile sites. When Side Cart functionality becomes available for your site, `openSideCart()` will work on mobile.

```javascript
import { createClient } from "@wix/sdk"; 
import { site } from "@wix/site";
import { ecom } from "@wix/site-ecom";

const wixClient = createClient({ 
  host: site.host(), 
  modules: { ecom } 
});

document.getElementById('myOpenSideCartButton').addEventListener('click', async () => {
  // on button click - open the side cart
  await wixClient.ecom.openSideCart();
});
```

Open the Side Cart

openSideCart

Updates cart UI elements, like the [Cart Icon](https://support.wix.com/en/article/customizing-the-cart-icon) and Side Cart with the most recent cart data.

The `refreshCart()` function returns a Promise that resolves when the latest cart data is retrieved, and the cart UI elements are refreshed.

> **Note:** Calling the `refreshCart()` function will trigger the [`onCartChange()`](/ecom/on-cart-change) event handler.

```javascript
import { createClient } from "@wix/sdk"; 
import { site } from "@wix/site";
import { ecom } from "@wix/site-ecom";

const wixClient = createClient({ host: site.host(), modules: { ecom } });

document.getElementById('myAddAndRefreshCartButton').addEventListener('click', 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 {
    // The wixEcomBackend.currentCart module is universal.
    // You can call its methods in frontend and backend code.
    await wixEcomBackend.currentCart.addToCurrentCart(options);
    console.log('item added to cart');
    // refresh the cart after adding item
    await wixClient.ecom.refreshCart();
  } catch (error) {
    console.error(error);
    // Handle the error
  }
});
```

Refresh the cart

refreshCart

Fulfilled - When the cart refresh is complete.

# 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](https://support.wix.com/en/article/customizing-the-cart-page).
 + Navigate to the [Checkout Page](https://support.wix.com/en/article/customizing-the-checkout-page).

 To use the eCommerce frontend API, import `wixEcomFrontend` from the `@wix/site-ecom` module:

   ```javascript
   import wixEcomFrontend from '@wix/site-ecom';
   ```

 ## Before you begin

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

 + You need to [add eCommerce functionality to your site](https://dev.wix.com/docs/rest/business-solutions/e-commerce/wix-e-commerce-platform-handbook/get-started/wix-site-creators-velo-developers-add-e-commerce-functionality-to-a-site).

 + Upgrade your site to a premium business plan in order to [accept payments](https://support.wix.com/en/article/accepting-payments-an-overview).

 ## 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.

site-ecom

Whether to hide the ["Continue Browsing"](https://support.wix.com/en/article/customizing-links-on-your-cart-page#customizing-the-continue-browsing-links) button from top-right-hand corner of the Checkout Page.

Default: `false`

hideContinueBrowsingButton

boolean

URL to replace the default "Continue Browsing" URL. For example, if you'd like to redirect the customer to your own custom page.

overrideContinueBrowsingUrl

URL to replace the default [Thank You Page](https://support.wix.com/en/article/customizing-the-thank-you-page) URL.

Pass `{orderId}` (not the order ID itself) as a parameter to the URL to dynamically insert the order ID. See the example on the right for more information.

overrideThankYouPageUrl

Whether to skip the delivery details step in checkout. For example, if the product is for pick-up only.

Default: `false`

refreshCart( )