@lightspeed/crane

Appearance

Storefront JS API ​

The Storefront JS API provides typed wrappers around the Ecwid Storefront JS API (window.Ecwid). It turns the callback-based Ecwid API into async/await-friendly functions with full TypeScript support.

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.

Cart ​

The Cart namespace wraps the Ecwid Cart JS API. 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 →

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

Cart.addProduct ​

Add a product to the cart by ID or with extended options. Ecwid docs →

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}`)
})
ts
// Callback
(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 →

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

Cart.removeProduct(0, (success, removedCount, product, cart) => {
  if (success) console.log(`Removed ${removedCount} item(s)`)
})
ts
// Callback
(success: boolean, itemsRemovedQuantity: number, product: CartProduct, cart: CartData, error?: string) => void

Cart.removeProducts ​

Remove multiple products at once by their indices. Ecwid docs →

typescript
Cart.removeProducts([0, 2, 3])
ts
// Callback — same as Cart.removeProduct
(success: boolean, itemsRemovedQuantity: number, product: CartProduct, cart: CartData, error?: string) => void

Cart.clear ​

Clear all items from the cart. Ecwid docs →

typescript
Cart.clear((success, error) => {
  if (success) console.log('Cart cleared')
})
ts
// Callback
(success: boolean, error?: string) => void

Cart.calculateTotal ​

Calculate the current cart total and get an order snapshot. Ecwid docs →

typescript
Cart.calculateTotal((order) => {
  console.log(`Total: ${order.total}`)
  console.log(`Tax: ${order.tax}`)
})
ts
// Callback
(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 →

typescript
Cart.gotoCheckout()

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

Customer ​

The Customer namespace wraps the Ecwid Customer JS API. 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 →

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 →

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 →

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 →

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 →

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

Callback data: 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}`)
})
ts
// Callback data
JsApiPage

OnConsentChanged ​

Fires when the customer changes their cookie consent. Ecwid docs →

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

OnConsentChanged.add((consent) => {
  console.log(`Consent: ${consent}`)
})
ts
// Callback data
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}`)
})
ts
// Callback data
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 →

typescript
const storeId = await getStoreId()
// 1003

getStorefrontLang ​

Get the current storefront language (ISO 639-1). Ecwid docs →

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

formatCurrency ​

Format a number as a price using the store's currency settings. Ecwid docs →

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

openPage ​

Navigate to a storefront page. Ecwid docs →

typescript
openPage('cart')

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

getAppPublicToken ​

Get a public token for an app by its client ID. Ecwid docs →

typescript
const token = await getAppPublicToken('client_id')

getAppPublicConfig ​

Get the public config for an app by its client ID. Ecwid docs →

typescript
const config = await getAppPublicConfig('client_id')

getVisitorLocation ​

Get the visitor's location based on shipping/billing address or IP. Ecwid docs →

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

getTrackingConsent ​

Get the customer's cookie consent status. Ecwid docs →

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

setTrackingConsent ​

Set the customer's cookie consent. Ecwid docs →

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 ​

ConstantDescription
CustomerCookieConsentValuesUNDEFINED, ACCEPTED, DECLINED, ANALYTICS_ONLY, PERSONALIZATION_ONLY
EcwidWidgetValuesMinicart, SearchPanel, ProductBrowser, Categories, Product
JsApiPageValuesCART, PRODUCT, CATEGORY, SEARCH, ACCOUNT_REGISTRATION, etc.
LegalPageTypeValuesabout, privacy-policy, returns, shipping-payment, terms
VisitorLocationSourceValuesSHIPPING_ADDRESS, BILLING_ADDRESS, IP_ADDRESS

Copyright © 2024-present Lightspeed