Skip to main content
openbridge.cart.subscribe(callback)
Subscribes to cart state changes. The callback is called whenever the cart is updated.

Parameters

ParamTypeRequiredDescription
callbackCartSubscriberYesFunction called on cart changes
The callback receives the current cart state (or null if not initialized).

Returns

() => void Returns an unsubscribe function to stop listening.

Examples

Basic subscription

openbridge.cart.subscribe((cart) => {
    console.log('Cart updated:', cart)
})

Update UI on changes

openbridge.cart.subscribe((cart) => {
    // Update cart badge
    document.querySelector('.cart-count').textContent = cart?.totalQuantity ?? 0

    // Update cart total
    if (cart) {
        document.querySelector('.cart-total').textContent =
            `${cart.cost.totalAmount.currencyCode} ${cart.cost.totalAmount.amount}`
    }
})

Unsubscribe when done

const unsubscribe = openbridge.cart.subscribe((cart) => {
    updateMiniCart(cart)
})

// Later, stop listening
unsubscribe()

Subscribe before init

// Subscribe first to catch the initial state
openbridge.cart.subscribe((cart) => {
    renderCart(cart)
})

// Then initialize
await openbridge.cart.init()

Multiple subscribers

// Badge update
openbridge.cart.subscribe((cart) => {
    updateBadge(cart?.totalQuantity ?? 0)
})

// Mini cart
openbridge.cart.subscribe((cart) => {
    updateMiniCart(cart)
})

// Analytics
openbridge.cart.subscribe((cart) => {
    trackCartState(cart)
})

Conditional logic

openbridge.cart.subscribe((cart) => {
    const isEmpty = !cart || cart.totalQuantity === 0

    document.querySelector('.empty-cart-message').hidden = !isEmpty
    document.querySelector('.cart-contents').hidden = isEmpty
    document.querySelector('.checkout-button').disabled = isEmpty
})

Behavior

  • Callback is invoked immediately if cart is already initialized
  • Callback is invoked after every cart mutation (add, update, remove, clear)
  • Multiple subscribers can be active simultaneously
  • Subscribers are stored in a Set (no duplicate callbacks)