Shopify themes, liquid, logos, and UX
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.
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>
@CodingFifty thanks for answering, but its still not working when I add or remove quantity from the cart, or remove all items from cart.
Hi @Chirag_Joshi,
Here are some Shopify apps for managing a floating cart counter:
These apps can simplify your cart management without custom code.
Thanks for the suggestions but I don't want to use the app.
@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:
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
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.
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
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025