Need help with AJAX cart item deletion in Shopify
I’m working on a shopping cart feature where users can delete items without reloading the page. Right now I have a basic link that works but it refreshes the whole page which is not what I want.
The current approach uses a simple link like this but it causes page reload. I need a solution that works with AJAX to make the cart update smoothly.
My shopping cart modal structure
<div class="shopping-modal" id="shoppingModal">
<form action="/cart" method="post" novalidate>
<div class="modal-header d-flex flex-row align-items-center justify-content-between">
<h3>Shopping Bag</h3>
<button class="close-modal" role="button" type="button">
<i class="fa fa-close"></i>
</button>
</div>
<div class="modal-content d-flex flex-column">
{% for product in cart.items %}
<div class="cart-item d-flex flex-row">
<div class="item-photo">
<a href="{{ product.url | within: collections.all }}">
<img class="img-responsive" src="{{ product | img_url: 'large' }}" alt="{{ product.title }}">
</a>
</div>
<div class="item-details d-flex flex-column">
<h4><a href="{{ product.url }}">{{ product.product.title }}</a></h4>
<span class="option">{{ product.variant.title }}</span>
<span class="cost">${{ product.price | money }}</span>
<div class="amount-selector d-flex flex-row">
<button class="qty-btn decrease" data-id="{{ product.variant.id }}">-</button>
<input class="qty-field" type="number" value="{{ product.quantity }}" min="1" />
<button class="qty-btn increase" data-id="{{ product.variant.id }}">+</button>
</div>
<div class="actions">
<a class="delete-item" data-id="{{ product.variant.id }}">Delete</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="modal-footer">
<div class="total-amount d-flex justify-content-between">
<span>Grand Total</span>
<span class="amount">${{ cart.total_price | money }}</span>
</div>
<div class="action-buttons d-flex">
<button class="checkout-btn" type="submit">Proceed</button>
<a class="view-cart-btn" href="{{ routes.cart_url }}">View All</a>
</div>
</div>
</form>
</div>
JavaScript for adding products
$('.product-option').on('click', function(){
var element = $(this);
var productId = $(this).attr("data-id");
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
quantity: 1,
id: productId
},
dataType: 'json',
success: function (response) {
updateCartDisplay();
}
});
});
function updateCartDisplay() {
$.ajax({
type: 'GET',
dataType: 'jsonp',
url: '/cart.json',
success: function(cartData){
var itemCount = cartData['item_count'];
var totalCost = cartData['total_price']/100;
if (itemCount > 0) {
$('.cart-counter span').text(itemCount);
$('.modal-footer .amount').text('$' + totalCost.toFixed(2));
var itemsList = [];
for(var i = 0; i < itemCount; i++){
var item = cartData['items'][i];
var itemHtml = buildCartItemHtml(item);
itemsList.push(itemHtml);
}
$('.modal-content').html(itemsList.join(''));
}
}
});
}
Decrease quantity handler
$('.shopping-modal').on('click', '.qty-btn.decrease', function(){
var currentQty = parseInt($(this).next().val());
if (currentQty > 1) {
$(this).next().val(currentQty - 1);
}
var productId = $(this).attr("data-id");
var newQty = $(this).next().val();
updateProductQuantity(productId, newQty);
});
Increase quantity handler
$('.shopping-modal').on('click', '.qty-btn.increase', function(){
var currentQty = parseInt($(this).prev().val());
$(this).prev().val(currentQty + 1);
var productId = $(this).attr("data-id");
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
quantity: 1,
id: productId
},
success: function(){
updateCartTotals();
}
});
});
My attempt at item removal
$('.shopping-modal').on('click', '.delete-item', function(e){
e.preventDefault();
var productId = $(this).attr('data-id');
$.ajax({
type: 'POST',
url: '/cart/update.js',
data: {
quantity: 0,
id: productId
},
success: function(){
updateCartDisplay();
}
});
});
Two main questions I have:
- Why is my AJAX delete function not working properly to remove items from the cart modal?
- Will this same approach work on the main cart page or do I need different code for that?