Hello @KPSLuke , Please replace the below script with the script I provided Yesterday!
<script>
document.addEventListener('DOMContentLoaded', function () {
function updateCartItemCount() {
$.ajax({
type: 'GET',
url: '/cart.js',
dataType: 'json',
success: function(cart) {
var cartCount = document.getElementById('cart-icon-bubble');
var cartCountBubbleHtml = '<div class="cart-count-bubble"><span aria-hidden="true">' + cart.item_count + '</span><span class="visually-hidden">' + cart.item_count + (cart.item_count === 1 ? ' item' : ' items') +'</span></div>';
var cartCountBubbleElement = document.createElement('div');
cartCountBubbleElement.innerHTML = cartCountBubbleHtml;
cartCount.appendChild(cartCountBubbleElement);
},
error: function(XMLHttpRequest, textStatus) {
console.log('Error getting cart count:', textStatus);
}
});
}
const addToCart = document.querySelectorAll('.addToCartForm');
addToCart.forEach(function(atc) {
atc.addEventListener('click', function(e){
e.preventDefault(); // Prevent the default form submission
var productId = this.querySelector('input[name="id"]').value;
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
quantity: 1,
id: productId
},
dataType: 'json',
success: function(response) {
var cartMessage = document.createElement('div');
cartMessage.classList.add('cart-message');
cartMessage.textContent = 'Item added to cart';
// Append the created div element to the atc element
atc.appendChild(cartMessage);
// Fade in the cart message
cartMessage.style.display = 'none';
cartMessage.style.display = 'block';
cartMessage.style.transition = 'opacity 0.2s';
setTimeout(function() {
cartMessage.style.opacity = '0';
setTimeout(function() {
atc.removeChild(cartMessage);
}, 200);
}, 3000);
updateCartItemCount();
$.ajax({
type: 'GET',
url: window.Shopify.routes.root + "?sections=cart-drawer",
dataType: 'json',
success: function(cart) {
const parser = new DOMParser();
// Parse the HTML string
const htmlObject = parser.parseFromString(cart['cart-drawer'], 'text/html');
const cartHtml=htmlObject.querySelector("cart-drawer");
const maincart=document.querySelector("cart-drawer");
maincart.innerHTML=cartHtml.innerHTML;
maincart.classList.add("active");
maincart.classList.remove('is-empty');
document.querySelector('body').classList.add('overflow-hidden');
function attachEventListeners() {
const closeCartDrawer = document.getElementById('CartDrawer-Overlay');
if(closeCartDrawer){
closeCartDrawer.addEventListener('click', function(event) {
document.querySelector("cart-drawer").classList.remove('active');
document.querySelector('body').classList.remove('overflow-hidden');
});
}
}
attachEventListeners()
},
error: function(XMLHttpRequest, textStatus) {
console.log('Error getting cart count:', textStatus);
}
});
},
error: function(XMLHttpRequest, textStatus) {
console.log('Error occurred: ' + textStatus);
}
});
});
});
});
</script>
Also, please add the "addToCartForm" class to your add-to-cart form.
<form action="/cart/add" method="post" class="addToCartForm">
<input type="hidden" name="id" value="{{ product.variants.first.id }}">
<button type="submit" class="add-to-cart-btn">Add to Cart</button>
</form>
If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at
[email protected] or Visit our website
Huptech Web.Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
