I want to implement Ajax Quantity Increment and Decrement Button functionality on cart items on Cart page (not on Product detail and Minicart). I didn't find any article or any module to achieve this. Could anyone help me with it?
Magento – Add Ajax Quantity Increment and Decrement Button on cart page in Magento 2
magento2magento2.2magento2.2.4
Related Solutions
app/code/Amsi/UserManagement/view/frontend/templates/cart/item/default.phtml
I have added For both increment and decrementing quantity.
You can add the button near Quantiy using below code.
<div class="control qty">
<input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
type="number"
size="4"
title="<?= $block->escapeHtml(__('Qty')) ?>"
class="input-text qty"
data-validate="{required:true,'validate-greater-than-zero':true}"
data-role="cart-item-qty"/>
/*Code to add increment and decrement button*/
<div class="qty_control">
<button type="button" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty"></button>
<button type="button" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec" class="decreaseQty"></button>
</div>
</div>
<script type="text/javascript">
require(["jquery"],function($){
$('#<?php echo $_item->getId();?>-upt, #<?php echo $_item->getId();?>-dec').on("click",function(){
var $this = $(this);
var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');
var currentQty = $("#cart-"+ctrl+"-qty").val();
if($this.hasClass('increaseQty')){
var newAdd = parseInt(currentQty)+parseInt(1);
$("#cart-"+ctrl+"-qty").val(newAdd);
}else{
if(currentQty>1){
var newAdd = parseInt(currentQty)-parseInt(1);
$("#cart-"+ctrl+"-qty").val(newAdd);
}
}
});
});
</script>
Finally I got the solution.
I have added below code in app/degign/frontend/Theme Vendor/Theme/Magento_checkout/templates/cart/item/default.phtml to add +/- buttons
<div class="control qty">
<button type="button" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec" class="decreaseQty"></button>
<input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
type="number"
size="4"
title="<?= $block->escapeHtml(__('Qty')) ?>"
class="input-text qty"
data-validate="{required:true,'validate-greater-than-zero':true}"
data-role="cart-item-qty"/>
<button type="button" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty"></button>
</div>
Then I overrides shopping-cart.js to app/design/frontend/Theme Vendor/Theme/Magento_Checkout/web/js/shopping-cart.js and added my javascript code there.
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'jquery/ui',
'Magento_Checkout/js/action/get-totals' //additionally added
], function ($, jQueryUi, getTotalsAction) {
'use strict';
//code to update quantity starts
$(document).ready(function(){
$('.increaseQty, .decreaseQty').on("click",function(){
var $this = $(this);
var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');
var currentQty = $("#cart-"+ctrl+"-qty").val();
if($this.hasClass('increaseQty')){
var newAdd = parseInt(currentQty)+parseInt(1);
$("#cart-"+ctrl+"-qty").val(newAdd);
$('input.qty').trigger('change');
}else{
if(currentQty>1){
var newAdd = parseInt(currentQty)-parseInt(1);
$("#cart-"+ctrl+"-qty").val(newAdd);
$('input.qty').trigger('change');
}
}
});
var form = $('form#form-validate');
var qtyfields = $('input.qty');
$('.page.messages').each(function () {
var thismessage = $(this);
thismessage.attr('id', 'messages');
});
form.find(qtyfields).each(function (e) {
var thisfield = $(this);
$(this).change(function () {
console.log('change detected');
form.submit();
});
});
form.on('submit', function (e) {
e.preventDefault();
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: 'post',
success: function (res) {
var parsedResponse = $.parseHTML(res);
var result = $(parsedResponse).find("#form-validate");
$("#form-validate").replaceWith(result);
var deferred = $.Deferred();
getTotalsAction([], deferred);
},
error: function () {
console.log('error');
}
});
console.log('form submitted');
});
});
//code to update quantity ends
$.widget('mage.shoppingCart', {
/** @inheritdoc */
_create: function () {
var items, i;
$(this.options.emptyCartButton).on('click', $.proxy(function () {
$(this.options.emptyCartButton).attr('name', 'update_cart_action_temp');
$(this.options.updateCartActionContainer)
.attr('name', 'update_cart_action').attr('value', 'empty_cart');
}, this));
items = $.find('[data-role="cart-item-qty"]');
for (i = 0; i < items.length; i++) {
$(items[i]).on('keypress', $.proxy(function (event) { //eslint-disable-line no-loop-func
var keyCode = event.keyCode ? event.keyCode : event.which;
if (keyCode == 13) { //eslint-disable-line eqeqeq
$(this.options.emptyCartButton).attr('name', 'update_cart_action_temp');
$(this.options.updateCartActionContainer)
.attr('name', 'update_cart_action').attr('value', 'update_qty');
}
}, this));
}
$(this.options.continueShoppingButton).on('click', $.proxy(function () {
location.href = this.options.continueShoppingUrl;
}, this));
}
});
return $.mage.shoppingCart;
});
Hope this will help others :)
Best Answer
@Lalit Kaushik You can try in this way.
app/code/Custom/ShoppingCart/registration.php
app/code/Custom/ShoppingCart/etc/module.xml
app/code/Custom/ShoppingCart/view/frontend/layout/checkout_cart_index.xml
app/code/Custom/ShoppingCart/view/frontend/layout/checkout_cart_item_renderers.xml
app/code/Custom/ShoppingCart/view/frontend/templates/cart/item/default.phtml