I am trying to update cart without refreshing when someone clicks on-increment or decrement button by creating custom module.
I override the cart/item/default.xml and add button, script to send formkey
& qty
of the updated cart to updateItemQty
controller, I am trying to achieve the same functionality of update shopping cart
button with my increment/decrement button
Here is File path which I override:
Module-checkout/view/frontend/templates/cart/item/default.phtml
File: default.xml
<label for="cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty">
<span class="label"><?= $block->escapeHtml(__('Qty')) ?></span>
<button type="button" id="increaseQty">+</button>
<input id="cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty"
name="cart[<?= $block->escapeHtmlAttr($_item->getId()) ?>][qty]"
data-cart-item-id="<?= $block->escapeHtmlAttr($_item->getSku()) ?>"
value="<?= $block->escapeHtmlAttr($block->getQty()) ?>"
type="number"
size="4"
title="<?= $block->escapeHtmlAttr(__('Qty')) ?>"
class="input-text qty"
data-validate="{required:true,'validate-greater-than-zero':true}"
data-role="cart-item-qty"/>
<button type="button" id="decreaseQty">-</button>
<input name="form_key" id="form_key" type="hidden" value="<?php echo $block->getFormKey();?>">
</label>
and here is the script:
<?php
//-- form key load
echo $this->getBlockHtml('formkey');
?>
<?php echo $this->getBlockHtml('formkey'); ?>
<script type="text/javascript">
require(["jquery"],function($){
var formKey = jQuery("[name='form_key']").val();
$("#increaseQty").on("click",function(){
var currentQty = $("#cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty").val();
var newAdd = parseInt(currentQty)+parseInt(1);
$("#cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty").val(newAdd);
var updateQty = $("#cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty").val();
var url = "<?php echo $block->getBaseUrl().'checkout/cart/updateItemQty' ?>";
$.ajax({
url: url,
method: "POST",
data: { form_key:formKey,"cart[<?= $block->escapeHtmlAttr($_item->getId()) ?>][qty]": updateQty},
dataType: 'json',
showLoader:true,
cache: false,
success: function(data){
}
});
});
});
currently I just added a script for increment button, I check that its send data perfectly to updateItemQty
controller similar to update shopping cart
button (formkey + qty) but it's not sending data to updatePost
controller.
What did I do wrong??