Cart drawer (0) products not showing when added

[manucurette]

Hi everyone,

So, since I bought the header 10 from section store, I've been having a few issues. Current one is the following: my cart drawer in the header, always shows (0), regardless of how many products have been added. 

However, when I click "add to card", it says next to the button "1 added to cart", but icon remains (0). Then, when I click on the cart icon, it shows its content and when I leave the cart page, then the icon finally displays (1).

What should I do? 

I tried maaaany things in the code but couldn't fix it 

Website: https://manucurette.com 

Thank you for your help

[Moeed]

Hey @manucurette 

I'm guessing the cart quantity isn't getting updated live and you need to refresh the page to see the updated cart quantity, you probably will have to make some code changes in your header file where your cart quantity is located at so that the quantity gets updated live, since it's not only possible with CSS only so if you're not familiar with coding then I would highly recommend you to hire a Shopify developer who can help you out with that.

Feel free to connect with me and I would be more than happy to fix that for you,

Best,

Moeed

[Guleria]

Hello @manucurette ,

Well I think you should ask the section store about it.

btw if you are good with code then try to find the theme atc button ajax code. Once found go to its success function  and trigger the header cart icon with ajax so it displays the correct count at the same time.

Regards
Guleria

[Robert_Kanaan]

They need to be coupled using AJAX. Implementation will vary based on theme being used. If it was working before the new section was purchased, you can likely recycle the native theme functionality to achieve it.

https://community.shopify.com/c/shopify-scripts/add-to-cart-function-how-to-update-ajax-cart-without...

https://shopify.dev/docs/api/ajax/reference/cart#bundled-section-rendering

Contact the Section developer for support. If not an option, seek a developer to assist.

[tim · Accepted solution]

When you add items to cart, theme Javascript communicates with Shopify server and update information on the page.

However, because your header structure has changed with new section, theme JS can't find elements it expects to update and fails.

I guess, Sections Store has something like "change your cart type to Page when installing this section" in description to alleviate this.

This, however would make customer experience worse.

It is possible to work this problem around.

Create a "Custom liquid" section in the Footer section group. Paste this code:

<script>
document.addEventListener('click', (evt)=>{
  let el = evt.target.closest('[name=add], quantity-popover ');
  if (!el) return;
  setTimeout(()=>{
    fetch(Shopify.routes.root+'cart.js')
    .then(response => response.json())
    .then(response => {
      console.log('Cart count: ' + response.item_count);
      document.querySelectorAll('.cart-count-bubble span').forEach(e=>{
        e.innerHTML = `(${response.item_count})`;
      });
    })
    .catch(e => {
      console.error(e)
    });
  }, 1000);  
}, {capture:true, passive:true});
</script>

[TheUntechnickle]

Hi,

Your cart count issue is a common Shopify problem where the header cart icon doesn't update when items are added via AJAX. The count only refreshes when you actually visit the cart page.

The fix involves adding a small JavaScript function that updates the cart count element after items are added. We need to find your cart count element in the header code and make sure it gets updated when the add to cart event fires.

We'd love to fix this for you completely free. It's a quick 5-minute fix once we locate the specific code in your theme files. Just send us access and we'll get it working properly right away.

Let us know if you'd like us to handle this for you.

Best regards

Shubham | Untechnickle