Update cart Drawer using Ajax add to card

Store Design
1

Hello,

I am using the Firstbase theme, in which I have a cart drawer instead of a cart page. On the product page, I have a button that works fine; when I add an item to the cart, the cart drawer opens with the updated items.

Now, I am trying to achieve the same functionality on my product archive page. I’ve added an “Add to Cart” button using a form. I’ve also added JavaScript to handle the “Add to Cart” functionality, which is working fine. However, my cart drawer is not updating when a product is added to the cart. I have to refresh the page to see the newly added item.

Here is the JavaScript code:

const form = document.getElementById('AddToCartForm');
form.addEventListener('submit', async(e) => {
    e.preventDefault();

    await fetch("/cart/add", {
      method: "post",
      body: new FormData(form),
    });
})

I tried using the section rendering API to rerender the cart drawer with the updated data, but it’s not working because my drawer is on a snippet.

Here is the JavaScript code for that attempt:

const form = document.getElementById('AddToCartForm');
form.addEventListener('submit', async (e) => {
    e.preventDefault();

    try {
        // Send AJAX request to add item to cart
        await fetch("/cart/add", {
            method: "post",
            body: new FormData(form),
        });

        // Fetch updated cart content
        const res = await fetch('/?section_id=cart-drawer');
        const text = await res.text();
        console.log(text);
        // Update cart content on your page or display success message
        console.log("Item added to cart successfully");

        // Optionally update cart content or display success message
        // Example: document.getElementById('cart-content').innerHTML = text;
    } catch (error) {
        console.error('Error adding item to cart:', error);
        // Handle error (e.g., display error message to user)
    }
});

is any solution Kindly suggest

1 Like
2

I need solution too