Update Custom Cart Count Bubble Automatically

Update Custom Cart Count Bubble Automatically

Chirag_Joshi
Shopify Partner
14 0 0

I added a custom floating cart counter with this code : 

<div class="cart-floating">
    <div class="cart-count-bubble" id="cart-count-bubble">
        <span aria-hidden="true">{{ cart.item_count }}</span>
        <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
    </div>
    
</div>

<style>
.cart-floating{
    position: fixed;
    bottom: 0;
    right: 30px;
    background-color: green !important;
    color: white !important;
    padding: 10px 20px;
    border-radius: 50px;
}
.cart-floating svg{
    display: none;
}
</style>


I got the cart count code from header.liquid from the default cart counter in the header. But my counter is not updating when I add or remove products in cart. I have to refresh the page to see the updated count.

 

I tried these scripts but it also not working as expected. I want it behave exactly like the default counter in the header.

// Get all elements with the classes "product-form__submit" and "quantity__button" with name "plus"
const addToCartButtons = document.querySelectorAll('.product-form__submit, .cart-remove-button, .quantity__button, #btn-sticky-cart');

// Loop through each add to cart button and plus quantity button, and add a click event listener
addToCartButtons.forEach(button => {
button.addEventListener('click', () => {
// After adding to cart or increasing quantity, update cart count with a delay
setTimeout(updateCartCount, 500);
});
});

// Function to update cart count
function updateCartCount() {
// Make a fetch request to get updated cart data
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
// Update cart count on page
const cartCountBubble = document.querySelector('#cart-count-bubble');
if (cartCountBubble) {
  cartCountBubble.textContent = cart.item_count;
}
})
.catch(error => {
console.error('Error fetching cart data:', error);
});
}

Please help.

Replies 8 (8)

CodingFifty
Shopify Partner
613 97 116

Hi @Chirag_Joshi,

 

 

<!-- Floating Cart Counter -->
<div class="cart-floating">
  <div class="cart-count-bubble" id="cart-count-bubble">
    <span aria-hidden="true">0</span>
    <span class="visually-hidden">Cart count</span>
  </div>
</div>

<style>
.cart-floating {
  position: fixed;
  bottom: 0;
  right: 30px;
  background-color: green !important;
  color: white !important;
  padding: 10px 20px;
  border-radius: 50px;
  z-index: 1000;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.cart-floating:hover {
  background-color: darkgreen;
}
.cart-floating svg {
  display: none;
}
</style>

<script>
function updateCartCount() {
  fetch('/cart.js')
    .then(response => response.json())
    .then(cart => {
      const cartCountBubble = document.querySelector('#cart-count-bubble span');
      if (cartCountBubble) {
        cartCountBubble.textContent = cart.item_count;
      }
    });
}

document.addEventListener('shopify:section:load', updateCartCount);
document.addEventListener('shopify:cart:change', updateCartCount);

const addToCartButtons = document.querySelectorAll('.product-form__submit, .cart-remove-button, .quantity__button, #btn-sticky-cart');
addToCartButtons.forEach(button => {
  button.addEventListener('click', () => {
    setTimeout(updateCartCount, 500);
  });
});

updateCartCount();
</script>

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Chirag_Joshi
Shopify Partner
14 0 0

@CodingFifty thanks for answering, but its still not working when I add or remove quantity from the cart, or remove all items from cart.  

CodingFifty
Shopify Partner
613 97 116

Hi @Chirag_Joshi,

 

Here are some Shopify apps for managing a floating cart counter:

  1. Sticky Cart by Uplinkly – Adds a sticky cart with cart count tracking.
  2. Cart Counter by Digital Product Lab – Displays a simple cart counter with customization options.
  3. Boost Sales – Upsell & Cross-sell – Tracks cart count and suggests products.
  4. Smart Cart by Globo – Offers a customizable floating cart and real-time updates.
  5. Cart Drawer by Qikify – Displays a floating cart and real-time updates.

These apps can simplify your cart management without custom code.

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Chirag_Joshi
Shopify Partner
14 0 0

Thanks for the suggestions but I don't want to use the app.

PaulNewton
Shopify Partner
7721 678 1620

@Chirag_Joshi If you fix this for this to even work properly it needs to update when ANYTHING in the cart changes not just when products AtCs are clicked.

 

Simpler approaches are:

  • completely copy the original cart count , disable the original , and let the themes javascript use the copy wherever you put it.
  • just make the original cart count an absolutely positioned element
  • or just  actually integrate with the themes update code.
  • otherwise you need to just debug this deeper as your not asking a singular technical question without a minimal inspectable example your asking someone to setup and go through it all to do your work for you.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


Chirag_Joshi
Shopify Partner
14 0 0

Thanks for the suggestion. I tried the above approch, I disabled the default bubble but still didn't work.

Actually I thought It would be easy for someone who understand shopify codes because I search all the files which are related to the default cart counter like header.liquid, cart.js, global.js, cart-notification.js etc and thought there are not much required to achieve the same functionality.
But I must be wrong, it may require some serious scripts to replicate the default feature.

PaulNewton
Shopify Partner
7721 678 1620

If you are a web developer just step through it with a debugger til you understand how it's structured.

Depending on theme it could just be a specific event that can be listened for, or a pub/sub function.

Otherwise hire someone to get unstuck.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


Chirag_Joshi
Shopify Partner
14 0 0

I am not developer. I am using the Dawn theme and I tried most of the things to understand the code responsible for the feature but no luck.

So I thought someone from the community might have the idea about the same.