> For the complete documentation index, see [llms.txt](https://docs.ecwid.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ecwid.com/site-themes/develop-site-themes/headless-api/storefront-js.md).

# Storefront JS

The Storefront JS API provides typed wrappers around the [Ecwid Storefront JS API](https://docs.ecwid.com/storefronts) (`window.Ecwid`). It turns the callback-based Ecwid API into **async/await-friendly** functions with full TypeScript support.

{% hint style="warning" %}
These functions only work in the **browser**. They require the Ecwid storefront widget to be loaded on the page. The wrappers automatically wait for the Ecwid API to be ready before executing. 
{% endhint %}

### Cart

The `Cart` namespace wraps the [Ecwid Cart JS API](https://docs.ecwid.com/storefronts/manage-cart-and-checkout/get-cart-details). Import it as a namespace:

```typescript
import { Cart } from '@lightspeed/ecom-headless'
```

Many Cart methods accept an optional callback and also return a promise, but these are not always two equivalent ways to receive data. 

For methods such as `Cart.get()` and `Cart.calculateTotal()`, data is provided only through the callback — the returned promise resolves to `void`. In those cases, `await` is useful for sequencing (waiting for Ecwid to be ready and for the operation to complete), not for receiving data. Other methods, such as `Cart.canGotoCheckout()`, return a non-void promise and do not accept a callback:

```typescript
// Data is received through the callback
Cart.get((cart) => console.log(cart.productsQuantity))

// await sequences the call (waits for Ecwid readiness + completion)
// but does NOT return cart data — the callback still provides it
await Cart.get((cart) => console.log(cart.productsQuantity))

// canGotoCheckout returns data via the promise (no callback)
const canCheckout = await Cart.canGotoCheckout()
```

#### `Cart.get`

Get full information about the current shopping cart. [Ecwid docs →](https://docs.ecwid.com/storefronts/manage-cart-and-checkout/get-cart-details)

```typescript
Cart.get((cart) => {
  console.log(`Cart has ${cart.productsQuantity} products`)
  cart.items.forEach(item => {
    console.log(`${item.product.name} - Qty: ${item.quantity}`)
  })
})
```

Callback:

```ts
(cart: CartData) => void
```

#### `Cart.addProduct`

Add a product to the cart by ID or with extended options. [Ecwid docs →](https://docs.ecwid.com/storefronts/manage-cart-and-checkout/add-product-to-the-cart)

```typescript
// Simple — by product ID
Cart.addProduct(10)

// With options
Cart.addProduct({
  id: 10,
  quantity: 3,
  options: { Size: 'L' },
})

// With completion callback
Cart.addProduct(10, (success, product, cart, error) => {
  if (success) console.log(`Added ${product.name}`)
})
```

Callback:

```ts
(success: boolean, product: CartProduct, cart: CartData, error?: string) => void
```

#### `Cart.removeProduct`

Remove a product from the cart by its index in the cart items array. [Ecwid docs →](https://docs.ecwid.com/storefronts/manage-cart-and-checkout/remove-products-from-the-cart)

```typescript
Cart.removeProduct(0) // removes first item

Cart.removeProduct(0, (success, removedCount, product, cart) => {
  if (success) console.log(`Removed ${removedCount} item(s)`)
})
```

Callback:

```ts
(success: boolean, itemsRemovedQuantity: number, product: CartProduct, cart: CartData, error?: string) => void
```

#### `Cart.removeProducts`

Remove multiple products at once by their indices. [Ecwid docs →](https://docs.ecwid.com/storefronts/manage-cart-and-checkout/remove-products-from-the-cart)

```typescript
Cart.removeProducts([0, 2, 3])
```

Callback (same as `Cart.removeProduct()`):

```ts
(success: boolean, itemsRemovedQuantity: number, product: CartProduct, cart: CartData, error?: string) => void
```

#### `Cart.clear`

Clear all items from the cart. [Ecwid docs →](https://docs.ecwid.com/storefronts/manage-cart-and-checkout/fully-clear-the-cart)

```typescript
Cart.clear((success, error) => {
  if (success) console.log('Cart cleared')
})
```

Callback:

```ts
(success: boolean, error?: string) => void
```

#### `Cart.calculateTotal`

Calculate the current cart total and get an order snapshot. [Ecwid docs →](https://docs.ecwid.com/storefronts/manage-cart-and-checkout/calculate-cart-details)

```typescript
Cart.calculateTotal((order) => {
  console.log(`Total: ${order.total}`)
  console.log(`Tax: ${order.tax}`)
})
```

Callback:

```ts
(order: Order) => void
```

#### `Cart.canGotoCheckout`

Check if the cart is ready for checkout. Returns a `Promise<boolean>`.

```typescript
const canCheckout = await Cart.canGotoCheckout()
```

#### `Cart.gotoCheckout`

Send the customer to the checkout page. [Ecwid docs →](https://docs.ecwid.com/storefronts/manage-cart-and-checkout/send-customer-to-the-checkout)

```typescript
Cart.gotoCheckout()

// With callback
Cart.gotoCheckout(() => {
  console.log('Navigated to checkout')
})
```

Callback:

```ts
() => void
```

### Customer

The `Customer` namespace wraps the [Ecwid Customer JS API](https://docs.ecwid.com/storefronts/manage-customers-on-the-storefront/get-logged-in-customers-details). Import it as a namespace:

```typescript
import { Customer } from '@lightspeed/ecom-headless'
```

#### `Customer.get`

Get details of the currently logged-in customer. Returns `null` if no customer is logged in. [Ecwid docs →](https://docs.ecwid.com/storefronts/manage-customers-on-the-storefront/get-logged-in-customers-details)

```typescript
Customer.get((customer) => {
  if (customer === null) {
    console.log('No customer logged in')
  } else {
    console.log(customer.email)
  }
})
```

#### `Customer.signOut`

Sign out the current customer. [Ecwid docs →](https://docs.ecwid.com/storefronts/manage-customers-on-the-storefront/log-out-customer)

```typescript
Customer.signOut((success, error) => {
  if (success) console.log('Signed out')
})
```

### Callbacks

Callbacks let you listen to storefront events. They all follow the same pattern:

```typescript
CallbackName.add((data) => { /* handle event */ })
```

Import directly from the package:

```typescript
import { OnCartChanged, OnPageLoaded } from '@lightspeed/ecom-headless'
```

#### `OnCartChanged`

Fires on any cart change — product added/removed, coupon applied, shipping updated, etc. [Ecwid docs →](https://docs.ecwid.com/storefronts/track-storefront-events/cart-details-are-changed-event)

```typescript
OnCartChanged.add((cart) => {
  console.log(`Items: ${cart.productsQuantity}, Total: ${cart.total}`)
})
```

#### `OnPageLoaded`

Fires when a storefront page is fully loaded (DOM + product browser ready). [Ecwid docs →](https://docs.ecwid.com/storefronts/track-storefront-events/page-is-loaded-events)

```typescript
import { OnPageLoaded, JsApiPageValues } from '@lightspeed/ecom-headless'

OnPageLoaded.add((page) => {
  if (page.type === JsApiPageValues.PRODUCT) {
    console.log(`Product page: ${page.name}`)
  }
})
```

#### `OnPageLoad`

Fires when a storefront page **starts** loading (before DOM is ready). [Ecwid docs →](https://docs.ecwid.com/storefronts/track-storefront-events/page-is-loaded-events)

```typescript
OnPageLoad.add(() => {
  console.log('Page loading...')
})
```

**Callback:** none (`void`)

#### `OnPageSwitch`

Fires on storefront page navigation. Same `JsApiPage` data as `OnPageLoaded`.

```typescript
import { OnPageSwitch } from '@lightspeed/ecom-headless'

OnPageSwitch.add((page) => {
  console.log(`Navigating to: ${page.type}`)
})
```

Callback:

```ts
JsApiPage
```

#### `OnConsentChanged`

Fires when the customer changes their cookie consent. [Ecwid docs →](https://docs.ecwid.com/storefronts/manage-customers-on-the-storefront/manage-customers-cookie-consent)

```typescript
import { OnConsentChanged } from '@lightspeed/ecom-headless'

OnConsentChanged.add((consent) => {
  console.log(`Consent: ${consent}`)
})
```

Callback:

```ts
CustomerCookieConsentType
```

#### `OnSetProfile`

Fires when the store profile is set. Returns `null` if no customer is logged in.

```typescript
import { OnSetProfile } from '@lightspeed/ecom-headless'

OnSetProfile.add((customer) => {
  if (customer) console.log(`Profile set: ${customer.email}`)
})
```

Callback:

```ts
CustomerData | null
```

### Utility Methods

These are standalone async functions. Import them directly:

```typescript
import { getStoreId, formatCurrency, openPage } from '@lightspeed/ecom-headless'
```

#### `getStoreId` / `getOwnerId`

Get the store ID. [Ecwid docs →](https://docs.ecwid.com/storefronts/get-storefront-details/get-ecwid-store-id)

```typescript
const storeId = await getStoreId()
// 1003
```

#### `getStorefrontLang`

Get the current storefront language (ISO 639-1). [Ecwid docs →](https://docs.ecwid.com/storefronts/get-storefront-details/get-storefront-language-and-currency)

```typescript
const lang = await getStorefrontLang()
// "en"
```

#### `formatCurrency`

Format a number as a price using the store's currency settings. [Ecwid docs →](https://docs.ecwid.com/storefronts/get-storefront-details/get-storefront-language-and-currency)

```typescript
const price = await formatCurrency(12.99)
// "$12.99"
```

#### `openPage`

Navigate to a storefront page. [Ecwid docs →](https://docs.ecwid.com/storefronts/open-page-on-the-storefront/overview-of-open-page-options)

```typescript
openPage('cart')

openPage('search', { keyword: 'shoes', attribute_Brand: 'Nike' })
```

#### `getAppPublicToken`

Get a public token for an app by its client ID. [Ecwid docs →](https://docs.ecwid.com/storefronts/get-storefront-details/get-public-app-details)

```typescript
const token = await getAppPublicToken('client_id')
```

#### `getAppPublicConfig`

Get the public config for an app by its client ID. [Ecwid docs →](https://docs.ecwid.com/storefronts/get-storefront-details/get-public-app-details)

```typescript
const config = await getAppPublicConfig('client_id')
```

#### `getVisitorLocation`

Get the visitor's location based on shipping/billing address or IP. [Ecwid docs →](https://docs.ecwid.com/storefronts/get-storefront-details/get-visitor-location)

```typescript
const location = await getVisitorLocation()
// { countryCode: "US", stateCode: "NE", source: "IP_ADDRESS" }
```

#### `getTrackingConsent`

Get the customer's cookie consent status. [Ecwid docs →](https://docs.ecwid.com/storefronts/manage-customers-on-the-storefront/manage-customers-cookie-consent)

```typescript
const consent = await getTrackingConsent()
// { userResponse: "ACCEPTED", askConsent: true }
```

#### `setTrackingConsent`

Set the customer's cookie consent. [Ecwid docs →](https://docs.ecwid.com/storefronts/manage-customers-on-the-storefront/manage-customers-cookie-consent)

```typescript
import { setTrackingConsent, CustomerCookieConsentValues } from '@lightspeed/ecom-headless'

await setTrackingConsent(CustomerCookieConsentValues.DECLINED)
```

#### `getInitializedWidgets`

Get a list of Ecwid widgets currently loaded on the page.

```typescript
const widgets = await getInitializedWidgets()
// ["Minicart", "SearchPanel", "ProductBrowser"]
```

#### `isStorefrontV3`

Check if the store uses the V3 storefront. Useful for apps supporting pre-2024 stores.

```typescript
const isV3 = await isStorefrontV3()
```

### Constants

| Constant                      | Description                                                                   |
| ----------------------------- | ----------------------------------------------------------------------------- |
| `CustomerCookieConsentValues` | `UNDEFINED`, `ACCEPTED`, `DECLINED`, `ANALYTICS_ONLY`, `PERSONALIZATION_ONLY` |
| `EcwidWidgetValues`           | `Minicart`, `SearchPanel`, `ProductBrowser`, `Categories`, `Product`          |
| `JsApiPageValues`             | `CART`, `PRODUCT`, `CATEGORY`, `SEARCH`, `ACCOUNT_REGISTRATION`, etc.         |
| `LegalPageTypeValues`         | `about`, `privacy-policy`, `returns`, `shipping-payment`, `terms`             |
| `VisitorLocationSourceValues` | `SHIPPING_ADDRESS`, `BILLING_ADDRESS`, `IP_ADDRESS`                           |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.ecwid.com/site-themes/develop-site-themes/headless-api/storefront-js.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.