Search⌘ K
AI Features
Home
Courses
Building Real-time Applications with Phoenix & Elixir

Add Items to Our Cart

Explore how to implement real-time item addition to a shopping cart using Phoenix channels and JavaScript. Learn to handle events, update cart state, and troubleshoot basic errors, enhancing your skills in building synchronized real-time applications.

We'll cover the following...

Add items

We have a front-end that connects to our ShoppingCartChannel with an empty shopping cart—this is not very exciting. To see the cart on-screen, we have to place an item in it. Let’s set up the front-end to add an item to our cart when we click on it. We’ll start with what we want our app.js to look like, then we’ll implement the functions we need.

Add this function after the call to Cart.setupCartChannel.

JavaScript (JSX)
// sneakers_23_cart/assets/js/app.js
dom.onItemClick((itemId) => {
  Cart.addCartItem(cartChannel, itemId)
})

These functions don’t exist yet, but our code’s intent is clear. Next, we will implement onItemClick in dom.js.

JavaScript (JSX)
// sneakers_23_cart/assets/js/dom.js
dom.onItemClick = (fn) => {
  document.addEventListener('click', (event) => {
    if (!event.target.matches('.size-container__entry')) { return }
    event.preventDefault()
    fn(event.target.value)
  })
}

We bind an event handler on the document. This allows our click ...