How to update the cart drawer (Dawn Theme) with javascript code?

[Sulyhcu]

I could find the function open() and close(), but there is no function to update the cart. 
I have an event where I would like to update the cart drawer and open it. 

I tried other ways like to fetch the data, but without success

// Send an AJAX request to the Shopify API to retrieve the latest cart information
fetch('/cart.js')
.then((response) => response.json())
.then((cart) => {
// Update the cart drawer with the latest cart information
updateCartDrawer(cart);
});

function updateCartDrawer(cart) {
// Update the cart drawer with the latest cart information
}

I hope someone can help me out to update the cart drawer with javascript code.

[Gabe]

Hey @Sulyhcu 

You have reached the German community here but we can chat in English too, that's no problem!

The following is general info taken from our developer docs and other resources. Shopify allows you to interact with the cart through AJAX, providing a series of endpoints and data structures that can be used to manage cart state. However, there isn't a direct JavaScript API method provided to update the cart drawer UI. You would need to manage this yourself by using the DOM instead.

Fetching the cart data: You're already doing this correctly with the fetch('/cart.js') API call. Updating the UI: You need to manually update the cart drawer UI by selecting relevant DOM elements and updating them with the new cart data. If you're using a modern JavaScript framework like React, etc., you'll manage this state more declaratively by updating your component's local state and re-rendering. Opening the cart drawer: This typically involves adding a specific class to a DOM element to make it visible or transitioning it into view:

fetch('/cart.js')
.then(response => response.json())
.then(cart => {
  updateCartDrawer(cart);
  openCartDrawer();
});

function updateCartDrawer(cart) {
  // Update the cart item count (example)
  document.querySelector('.cart-count').textContent = cart.item_count;

  // Example: Updating a cart item list. Note: This is a simplification. You may need to dynamically create DOM elements based on the cart's contents, or use a templating approach.
  const cartItemList = document.querySelector('.cart-items-list');
  cartItemList.innerHTML = ''; // Clear the current cart items
  cart.items.forEach(item => {
    cartItemList.innerHTML += `
      <li>${item.product_title} - ${item.quantity} x ${item.price}</li>
    `;
  });
}

function openCartDrawer() {
  // Example: Your method for opening the cart might look something like this, depending on your CSS and HTML structure.
  document.querySelector('.cart-drawer').classList.add('open');
}

function closeCartDrawer() {
  document.querySelector('.cart-drawer').classList.remove('open');
}

This code assumes specific CSS class names for your HTML elements. You'll need to adjust these selectors to match your theme's HTML and CSS. Remember that all of the UI updates must be done client-side if you're using AJAX to update the cart; Shopify won’t re-render Liquid templates with the new cart state when you modify the cart via AJAX.

Hope that can help you find a solution! 😉