Actions

Actions let you control Elements programmatically after the SDK initializes. All actions live under window.LiquidCommerce.elements.actions.*.

Quick start

window.addEventListener('lce:actions.client_ready', () => {
  window.LiquidCommerce.elements.actions.cart.openCart();
});

Product actions

actions.product.getDetails(identifier)

Returns the current loaded product data (price, size, fulfillment, retailer, quantity, images, and more). The product must already be injected and loaded.

Example

const product = window.LiquidCommerce.elements.actions.product.getDetails('00619947000020');
console.log(product.name, product.price / 100);

Cart actions

actions.cart.openCart()

Opens the cart drawer.

Example

window.LiquidCommerce.elements.actions.cart.openCart();

actions.cart.closeCart()

Closes the cart drawer.

Example

window.LiquidCommerce.elements.actions.cart.closeCart();

actions.cart.toggleCart()

Toggles the cart drawer open/closed.

Example

document.getElementById('cart-btn').addEventListener('click', () => {
  window.LiquidCommerce.elements.actions.cart.toggleCart();
});

actions.cart.addProduct(params[], openCart?)

Adds one or more products to the cart. If no address is set, the SDK prompts for one and retries automatically.

Example

await window.LiquidCommerce.elements.actions.cart.addProduct([
  { identifier: '00619947000020', fulfillmentType: 'shipping', quantity: 1 },
  { identifier: '08504405135', fulfillmentType: 'onDemand', quantity: 2 }
], true);

actions.cart.applyPromoCode(promoCode)

Applies a promo code to the cart (replaces any existing code).

Example

try {
  await window.LiquidCommerce.elements.actions.cart.applyPromoCode('SUMMER20');
} catch (error) {
  console.error('Promo code invalid:', error);
}

actions.cart.removePromoCode()

Removes the active promo code.

Example

await window.LiquidCommerce.elements.actions.cart.removePromoCode();

actions.cart.resetCart()

Clears all cart items (no undo).

Example

await window.LiquidCommerce.elements.actions.cart.resetCart();

actions.cart.getDetails()

Returns current cart data (items, totals, promo, retailers, location, etc.).

Example

const cart = window.LiquidCommerce.elements.actions.cart.getDetails();
console.log(cart.cartId, cart.itemCount, cart.subtotal / 100);

Checkout actions

actions.checkout.openCheckout()

Opens the checkout drawer or navigates to checkout.

Example

window.LiquidCommerce.elements.actions.checkout.openCheckout();

actions.checkout.closeCheckout()

Closes the checkout drawer.

Example

window.LiquidCommerce.elements.actions.checkout.closeCheckout();

actions.checkout.toggleCheckout()

Toggles the checkout drawer open/closed.

Example

window.LiquidCommerce.elements.actions.checkout.toggleCheckout();

actions.checkout.exitCheckout()

Navigates away from checkout (requires exitUrl configuration).

Example

window.LiquidCommerce.elements.actions.checkout.exitCheckout();

actions.checkout.addProduct(params[], openCheckout?)

Adds products directly to checkout (bypasses cart).

Example

await window.LiquidCommerce.elements.actions.checkout.addProduct([
  { identifier: '00619947000020', fulfillmentType: 'shipping', quantity: 1 }
], true);

actions.checkout.applyPromoCode(promoCode)

Applies a promo code in checkout.

Example

await window.LiquidCommerce.elements.actions.checkout.applyPromoCode('WELCOME10');

actions.checkout.removePromoCode()

Removes the active promo code in checkout.

Example

await window.LiquidCommerce.elements.actions.checkout.removePromoCode();

actions.checkout.applyGiftCard(code)

Applies a gift card.

Example

await window.LiquidCommerce.elements.actions.checkout.applyGiftCard('GIFT-1234-5678-9012');

actions.checkout.removeGiftCard(code)

Removes a gift card.

Example

await window.LiquidCommerce.elements.actions.checkout.removeGiftCard('GIFT-1234-5678-9012');

actions.checkout.toggleIsGift(active?)

Enables/disables gift mode (toggles when omitted).

Example

await window.LiquidCommerce.elements.actions.checkout.toggleIsGift(true);

actions.checkout.toggleBillingSameAsShipping(active?)

Sets whether billing address matches shipping.

Example

await window.LiquidCommerce.elements.actions.checkout.toggleBillingSameAsShipping(false);

actions.checkout.toggleMarketingPreferences(field, active)

Sets marketing opt-in (canEmail or canSms).

Example

await window.LiquidCommerce.elements.actions.checkout.toggleMarketingPreferences('canEmail', true);

actions.checkout.updateCustomerInfo(fields)

Prefills customer info (name, email, phone, birthdate, etc.).

Example

window.LiquidCommerce.elements.actions.checkout.updateCustomerInfo({
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '[phone]'
});

actions.checkout.updateBillingInfo(fields)

Prefills billing address fields.

Example

window.LiquidCommerce.elements.actions.checkout.updateBillingInfo({
  firstName: 'John',
  lastName: 'Doe',
  addressOne: '789 Elm St',
  city: 'Chicago',
  state: 'IL',
  zipCode: '60601'
});

actions.checkout.updateGiftInfo(fields)

Prefills gift recipient information.

Example

window.LiquidCommerce.elements.actions.checkout.updateGiftInfo({
  firstName: 'Jane',
  lastName: 'Smith',
  message: 'Happy Birthday!'
});

actions.checkout.getDetails()

Returns current checkout data (amounts, items, preferences, addresses, gift info, etc.).

Example

const checkout = window.LiquidCommerce.elements.actions.checkout.getDetails();
console.log(checkout.cartId, checkout.amounts.total / 100);

Address actions

actions.address.setAddressByPlacesId(placesId)

Sets address using a Google Places ID (recommended).

Example

await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId('ChIJOwg_06VPwokRYv534QaPC8g');

actions.address.setAddressManually(address, coordinates)

Sets address with your own address + lat/long data.

Example

await window.LiquidCommerce.elements.actions.address.setAddressManually(
  { one: '123 Main Street', city: 'New York', state: 'NY', zip: '10001' },
  { latitude: 40.7128, longitude: -74.0060 }
);

actions.address.getDetails()

Returns the current address (or null if not set).

Example

const address = window.LiquidCommerce.elements.actions.address.getDetails();
console.log(address?.formattedAddress);

actions.address.clear()

Removes the stored address and resets availability.

Example

await window.LiquidCommerce.elements.actions.address.clear();

UI helpers (non-actions)

These helpers live under window.LiquidCommerce.elements.ui.* and are commonly used with actions.

• ui.cartButton(containerId, showItemsCount?) - Renders a cart button inside the given container.

• ui.floatingCartButton(showItemsCount?) - Renders a floating cart button (bottom-right).

• ui.cartSubtotal(elementId) - Keeps an element updated with cart subtotal.

• ui.cartItemsCount(elementId, { hideZero }) - Keeps an element updated with cart item count.

window.LiquidCommerce.elements.ui.cartButton('header-cart', true);
window.LiquidCommerce.elements.ui.floatingCartButton(true);
window.LiquidCommerce.elements.ui.cartSubtotal('cart-total');
window.LiquidCommerce.elements.ui.cartItemsCount('items-count', { hideZero: true });