Skip to main content
shoppy.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

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

​
Update UI on changes

shoppy.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 = shoppy.cart.subscribe((cart) => {
    updateMiniCart(cart)
})

// Later, stop listening
unsubscribe()

​
Subscribe before init

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

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

​
Multiple subscribers

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

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

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

​
Conditional logic

shoppy.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)