This documentation outlines the custom events dispatched by the Llama Cart system. These events allow developers to track and respond to various cart actions.
On cart toggle
Triggered when the cart drawer is opened or closed.
lcu:cart:toggle
document.addEventListener('lcu:cart:toggle', function(event) { const isOpen = event.detail.open; console.log('Cart is now ' + (isOpen ? 'open' : 'closed')); });On cart update
Triggered after any modification to the cart, providing the current cart state.
lcu:smart-cart:updated
document.addEventListener('lcu:smart-cart:updated', function(event) { const cartState = event.detail.cart; console.log('Updated cart state:', cartState); });On line item added
Fired when an item is added to the cart.
lcu:cart:item_added
document.addEventListener('lcu:cart:item_added', function(event) { const addedItems = event.detail.items_added; const shortAddedItems = event.detail.short_items_added; console.log('Items added:', addedItems); console.log('Short items added:', shortAddedItems); });On line item removed
Dispatched when an item is removed from the cart.
lcu:cart:item_removed
document.addEventListener('lcu:cart:item_removed', function(event) { const removedItems = event.detail.items_removed; const removedItemKeys = event.detail.removed_items_keys; console.log('Items removed:', removedItems); console.log('Removed item keys:', removedItemKeys); });
Event Flow
Adding an item: lcu:cart:item_added → lcu:smart-cart:updated
Removing an item: lcu:cart:item_removed → lcu:smart-cart:updated
Toggling cart visibility: lcu:cart:toggle
Updating item quantity: lcu:smart-cart:updated
These events provide developers with the tools to create dynamic, responsive interfaces and integrations that react to cart changes in real-time.