Adding a product to the cart and re-render from a checkbox inside the drawer

Technical Q&A

Topic summary

A developer is customizing the Shopify DAWN theme by adding a checkbox to the cart drawer that adds or removes a specific product based on its checked state.

Current Status:

  • Checkbox successfully reflects whether a specific product is in the cart
  • Product addition/removal functionality works correctly
  • Main Issue: The drawer fails to re-render after cart updates, not displaying updated products and prices

Technical Approach:

  • Using handleCheckboxChange() function triggered by checkbox onchange event
  • Fetching current cart data via /cart.js
  • Adding/removing product through /cart/add.js endpoint
  • Attempting to update cart contents using this.cart.renderContents(cart)

Problem Area:

  • Code includes commented section about appending sections from cart object where developer notes “Here i get lost”
  • The cart drawer component isn’t refreshing to show the modified cart state
  • Code snippet appears partially corrupted/reversed in places, suggesting possible formatting issues

The developer is seeking guidance on properly triggering the drawer re-render after successful cart modifications.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi, i have added a checkbox to the DAWN theme drawer.
<input
type=“checkbox”
id=“specific-product-checkbox”
{% if specific_product_in_cart %} checked {% endif %}
onchange=“handleCheckboxChange(this)”

The checkbox is checked or not, based on if there is an specific product on the cart. All good for now ; )

I managed to add or delete the fixed product from the cart, but the problem is trying to reload the drawer with the new info (products and prices). Right now it’s not reloading and after hours i’m not sure how to proceed…

This is the complete code:

function handleCheckboxChange(checkbox) {
  const variantID = "a fixed variant ID";
  const quantity = checkbox.checked ? 1 : 0;
  this.cart = document.querySelector('cart-drawer');

  // Fetch the current cart data first
  fetch('/cart.js')
   .then(res => res.json())
   .then(cart => {
     fetch(quantity > 0 ? '/cart/add.js' : '/cart.js', {
      method: quantity > 0 ? 'POST' : 'GET',
      credentials: 'same-origin',
      headers: {
       'Content-Type': 'application/json',
       'X-Requested-With': 'xmlhttprequest',
      },
      body: quantity > 0 ? JSON.stringify({
      items: [{
       id: variantID.toString(),
       quantity: quantity
      }]
     }) : undefined
    })
    .then(async (response) => {
      const responseData = await response.json();

      console.log("Raw response data:", responseData.items[0]);

      if (responseData.status) {
       console.error('Error al agregar/eliminar el producto:', responseData.errors || responseData.description);
       return;
      }

      // Append sections from the cart object. Here i get lost
      const responseDataItem = cart.items[0];
      responseDataItem.sections = cart.getSectionsToRender().map((section) => section.section);
      console.log('Producto despues:', responseDataItem);

      // Update the cart content
      if (this.cart) {
       this.cart.renderContents(cart);
      }
    })
    .catch((error) => {
      console.error('Error al actualizar el carrito:', error);
    });
  });
}   

Any help would be really apreciated. Thanks in advance,