Managing Cart Items with Ajax

1. The Core Challenge: Keeping a Dynamic Cart Updated

When we use the Ajax API to change the cart (e.g., update a quantity from 2 to 3), the change happens on Shopify's servers. However, the HTML for the cart drawer or mini-cart visible to the user is now out of date. It still shows a quantity of 2.

We need a strategy to refresh our cart's HTML. There are two main approaches:

1. Manual DOM Manipulation: We could parse the JSON response from the API and use JavaScript to find and update every single element: the line item's quantity, its subtotal, the cart's overall subtotal, the cart's item count, etc. This is complex and brittle. If you change the Liquid template later, you must also update the JavaScript, and it's easy to miss something.

2. Re-rendering with the Section Rendering API: Shopify provides a powerful and elegant solution. We can ask Shopify to re-render just our cart drawer section with the updated cart data and send us the fresh HTML. We then simply replace the old HTML in our drawer with the new HTML.

For components like a cart drawer, the second approach is almost always superior. It's more robust, easier to maintain, and leverages Shopify's own rendering engine. It keeps your Liquid template as the single source of truth for the structure of your cart.

Let's see this pattern in action.

This /?section_id= endpoint is a key technique in modern Shopify theme development, and we will use it as the final step in our update process.

2. The API Endpoints for Cart Modification

Before we write the code, let's consult the official documentation to understand our tools. The Ajax API offers two primary endpoints for changing line items.

From the documentation, we learn:

• POST /cart/update.js: This is a powerful endpoint that lets you update multiple line items in a single request. You send an updates object where keys are the line_item.key and values are the new quantities.
• POST /cart/change.js: This endpoint is designed to change a single line item. You identify the item using its id (variant ID or key) or line (its 1-based index in the cart) and provide the new quantity.

Crucially, for both endpoints, you can remove an item by setting its quantity to 0.

While change.js is fine, update.js is often more versatile. We will focus our implementation on update.js, following the example in our main video resource.

3. Implementing Quantity Updates

Let's build the functionality for the "+" and "-" buttons in our cart drawer.

The process involves four steps: gathering the required data, attaching event listeners, making the API call, and refreshing the UI.

Step 1: Pass the Line Item Key from Liquid to JavaScript

To tell Shopify which item to update, we need its unique key. The best way to make this available to our JavaScript is to add it as a data- attribute in our Liquid template for the cart drawer.

As shown in the "Coding with Robby" video (at 24:35), you would find the element that wraps each line item in your cart drawer's Liquid file and add the attribute:

{% comment %} Inside your cart drawer's for-loop over cart.items {% endcomment %}
<div class="cart-item" data-line-item-key="{{ item.key }}">
  ...
  <input type="number" value="{{ item.quantity }}">
  ...
</div>

Now, when a user clicks a button within this div, we can use JavaScript to find this parent element and read its data-line-item-key.

Step 2: Handle Events and State

When a user clicks a "+" or "-" button:

1. We need to attach a click event listener to these buttons.
2. Inside the listener, we'll find the closest parent line item element to get the key.
3. We'll find the quantity input to get the current quantity.
4. We'll calculate the new quantity (current + 1 or current - 1).

A significant challenge arises here. Because we replace the entire cart drawer's HTML after each update, any event listeners we attached to the original buttons are destroyed.

The solution is to wrap our event listener attachments in a function. We'll call this function once on page load, and then call it again every time we successfully re-render the cart drawer.

The "Coding with Robby" video addresses this exact problem between 26:15 and 28:10, creating a function named addCartDrawerListeners to solve it. This is a critical pattern for dynamic applications.

Step 3 & 4: Make the API Call and Update the UI

Now we have the lineItemKey and the newQuantity. We can make our fetch request.

Putting it all together, the core JavaScript for an update looks like this:

// This function would be inside your event listener for the +/- buttons
async function handleQuantityChange(lineItemKey, newQuantity) {
  try {
    // Show a loading indicator if you have one

    // Step 3: Make the API call
    await fetch('/cart/update.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        updates: {
          [lineItemKey]: newQuantity // Using computed property names to set the key
        }
      })
    });

    // Step 4: Re-render the cart drawer section
    await updateCartDrawer(); // This function fetches and replaces the HTML

  } catch (error) {
    console.error('Error updating cart:', error);
    // Handle errors for the user
  } finally {
    // Hide the loading indicator
  }
}

4. Removing an Item from the Cart

With the logic we've just built, removing an item is incredibly simple. As we learned from the documentation, setting a line item's quantity to 0 removes it from the cart.

If a user clicks the "-" button when the quantity is 1, our newQuantity will be 0. Our handleQuantityChange function will send this to the API, Shopify will remove the item, and our updateCartDrawer function will re-render the drawer without the removed item. It works automatically!

If you wanted a separate "Remove" button, its event listener would simply call handleQuantityChange(lineItemKey, 0).

Conclusion

Excellent work! You have now mastered the complete, fundamental lifecycle of cart management in a Shopify theme using the Ajax API.

Key Takeaways:

• API Endpoints: The /cart/update.js endpoint is a versatile way to change quantities of one or more line items.
• Removal via Quantity: Setting a line item's quantity to 0 is the standard method for removing it from the cart via the API.
• Targeting Items: Using the line_item.key passed via a data- attribute is the most robust way to identify which item to modify.
• UI Synchronization: The Section Rendering API (/?section_id=...) is a powerful pattern for keeping your UI in sync with server state without complex manual DOM manipulation.
• Event Listener Persistence: When you dynamically replace HTML content, you must re-attach any event listeners to the new elements.

In our last two lessons, we've focused on the Ajax API, which is designed for client-side interactions within a traditional, Liquid-based theme. In our next lesson, we'll shift gears to explore a different and more powerful API: the Storefront API. We'll learn its purpose, see how it enables "headless commerce," and understand how it differs from the Ajax API we've been using.