$(document).ready(function() {
function updateQuantity(variantId, newQuantity) {
const basePrice = parseFloat($('#quantity-' + variantId).data('base-price'));
//const totalPrice = newQuantity * basePrice;
$.ajax({
url: '/updateCartItem',
method: 'POST',
data: {
variantId: variantId,
quantity: newQuantity
},
success: function(response) {
$('#stock-error-' + variantId).remove();
$('#quantity-' + variantId).text(newQuantity);
$('#productquantity-' + variantId).text(newQuantity);
$('#total-price-' + variantId).text(response.prodtotalPrice.toFixed(2));
$('#total-price-of-all-products').text(response.totalPriceOfAllProducts.toFixed(2));
$('.total-quantity').text(response.totalQuantity);
$('.total-price-of-all-products').text(response.totalPriceOfAllProducts.toFixed(2));
const availableStock = response.stock;
if (newQuantity >= 5) {
console.log('Disabling button for variant: ' + variantId);
//Disables the button
$('.quantity-increase[data-variant-id="' + variantId + '"]').prop('disabled', true);
} else {
console.log('Enabling button for variant: ' + variantId);
//Enables the button
$('.quantity-increase[data-variant-id="' + variantId + '"]').prop('disabled', false);
}
if (response.error === 'Insufficient stock available.') {
showErrorMessage(variantId, 'Insufficient stock available. Please reduce the quantity.');
$('.quantity-increase[data-variant-id="' + variantId + '"]').prop('disabled', true);
}
},
error: function(xhr, status, error) {
const response = JSON.parse(xhr.responseText);
if (response.error === 'Insufficient stock available.') {
const errorMessage = '<span id="stock-error-' + variantId + '" class="text-danger">Insufficient stock available. Please reduce the quantity.</span>';
$('#quantity-' + variantId).closest('td').append(errorMessage);
$('.quantity-increase[data-variant-id="' + variantId + '"]').prop('disabled', true);
} else {
console.error('Error updating cart item:', error);
$('.quantity-increase[data-variant-id="' + variantId + '"]').prop('disabled', false);
}
}
});
}
$('.quantity-increase').click(function() {
const variantId = $(this).closest('.quantity-controls').data('variant-id');
let quantity = parseInt($(this).siblings('.quantity-input').val());
if (quantity < 5) {
quantity += 1;
$(this).siblings('.quantity-input').val(quantity);
updateQuantity(variantId, quantity);
$(this).prop('disabled', false);
} else {
showErrorMessage(variantId, 'Cannot purchase more than 5 items.');
$(this).prop('disabled', true);
}
});
$('.quantity-decrease').click(function() {
const variantId = $(this).closest('.quantity-controls').data('variant-id');
let quantity = parseInt($(this).siblings('.quantity-input').val());
if (quantity > 1) {
quantity -= 1;
$(this).siblings('.quantity-input').val(quantity);
updateQuantity(variantId, quantity);
} else {
$(this).siblings('.quantity-input').val(1);
showErrorMessage(variantId, 'Cannot purchase less than 1 item.');
$(this).prop('disabled', true);
}
$('#stock-error-' + variantId).remove();
});
function showErrorMessage(variantId, message) {
const errorMessage = '<span id="stock-error-' + variantId + '" class="text-danger">' + message + '</span>';
$('#quantity-' + variantId).closest('td').append(errorMessage);
}
when I increase my quantities in my cart after reaching a limit here 5, then the quantity increase button (+) is disabling and I want to enable that button when the quantity is reduced by using quantity-decrease button. I have given the code to enable and disable based on the quantity, but the button is disabling and when I reduce the quantity it is not enabling the button, it is in the disabled state only