Hi @marsedo
I have found the solution to this,
I have created a custom script for this.
Got to the Current live theme -> Edit code -> Find theme.liquid and add the below code before </body>
<script>
document.addEventListener("DOMContentLoaded", function() {
$('.product-form__cart-submit').on('click', function(e) {
e.preventDefault();
const $form = $(this).closest('form');
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: $form.serialize(),
dataType: 'json',
success: function(item) {
$('.cart-dropdown').addClass('opened');
// Wait and then update cart drawer
setTimeout(updateCartDrawer, 300);
},
error: function(xhr) {
alert(xhr.responseJSON?.description || 'Ürün sepete eklenemedi.');
}
});
});
function updateCartDrawer() {
$.getJSON('/cart.js', function(cart) {
// Handle case where .products.scrollable doesn't exist yet
if (!$('.products.scrollable').length) {
// Replace the empty cart div with a new container
$('.products.no-cart-items').replaceWith('<div class="products scrollable"></div>');
}
const $drawer = $('.products.scrollable');
let fullHTML = '';
if (cart.items.length === 0) {
$drawer.html('<div class="text-center mt-4">Sepetiniz şu anda boş.</div>');
return;
}
cart.items.forEach(function(item, index) {
const imageUrl = item.image ? (item.image.startsWith('http') ? item.image : 'https:' + item.image) : '';
fullHTML += `
<div class="product product-cart"
data-cart-item
data-cart-item-key="${item.key}"
data-cart-item-url="${item.url}"
data-cart-item-title="${item.product_title} - ${item.variant_title}"
data-cart-item-index="${index + 1}"
data-cart-item-quantity="${item.quantity}">
<figure class="product-media">
<a href="${item.url}">
<img class="cart__image" src="${imageUrl}" alt="${item.product_title}">
</a>
<button class="btn btn-link btn-close cart__remove" data-line="${index + 1}">
<i class="la la-times"></i>
</button>
</figure>
<div class="product-detail">
<a href="${item.url}" class="product-name">${item.product_title} - ${item.variant_title}</a>
<div class="price-box">
<span class="product-quantity">${item.quantity}</span>
<span class="product-price">${(item.final_line_price / 100).toLocaleString('tr-TR')}TL</span>
</div>
</div>
</div>
`;
});
$drawer.html(fullHTML);
$('.cart-count').text(cart.item_count); // Update badge if needed
});
}
// Event listener for cart item removal
$(document).on('click', '.cart__remove', function(e) {
e.preventDefault();
const line = $(this).data('line'); // Gets the line index
$.ajax({
type: 'POST',
url: '/cart/change.js',
data: {
line: line,
quantity: 0
},
dataType: 'json',
success: function(updatedCart) {
updateCartDrawer(); // Refresh the drawer content
},
error: function(xhr) {
console.error('Failed to remove item:', xhr);
}
});
});
});
</script>
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
info@huptechweb.com or Visit our website
Huptech Web.Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
