Add Quantity Increment And Decrement Button on Shopping Cart
1. Create a checkout_cart_item_renderers.xml file on the path.
Path:
app/code/Esparks/QtyCounter/view/frontend/layout
And paste this code into it:
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/** @var $block \Magento\Catalog\Block\Product\View */
?>
<?php $_product = $block->getProduct(); ?>
<?php $buttonTitle = __('Add to Cart'); ?>
<?php if ($_product->isSaleable()): ?>
<div class="box-tocart">
<div class="fieldset">
<?php if ($block->shouldRenderQuantity()): ?>
<div class="field qty">
<label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"change_qty": {
"component": "Esparksinc_QtyCounterProductPage/js/view/product/view/change_qty",
"defaultQty": <?php echo $block->getProductDefaultQty() * 1 ?>
}
}
}
}
}
</script>
<div class="control" data-bind="scope: 'change_qty'">
<button data-bind="click: decreaseQty">-</button>
<input data-bind="value: qty()"
type="number"
name="qty"
id="qty"
maxlength="10"
title="<?php echo __('Qty') ?>"
class="input-text qty"
data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
/>
<button data-bind="click: increaseQty">+</button>
</div>
</div>
<?php endif; ?>
<div class="actions">
<button type="submit"
title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"
class="action primary tocart"
id="product-addtocart-button">
<span><?php /* @escapeNotVerified */ echo $buttonTitle ?></span>
</button>
<?php echo $block->getChildHtml('', true) ?>
</div>
</div>
</div>
<?php endif; ?>
<script type="text/x-magento-init">
{
"#product_addtocart_form": {
"Magento_Catalog/product/view/validation": {
"radioCheckboxClosest": ".nested"
}
}
}
</script>
<?php if (!$block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
{
"#product_addtocart_form": {
"catalogAddToCart": {
"bindSubmit": false
}
}
}
</script>
<?php endif; ?>
2-Create a default.phtml file on the path.
app/code/Esparks/QtyCounter/view/frontend/templates/cart/item
And paste this code into it:
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/** @var $block \Magento\Checkout\Block\Cart\Item\Renderer */
$_item = $block->getItem();
$product = $_item->getProduct();
$isVisibleProduct = $product->isVisibleInSiteVisibility();
/** @var \Magento\Msrp\Helper\Data $helper */
$helper = $this->helper('Magento\Msrp\Helper\Data');
$canApplyMsrp = $helper->isShowBeforeOrderConfirm($product) && $helper->isMinimalPriceLessMsrp($product);
?>
<tbody class="cart item">
<tr class="item-info">
<td data-th="<?php echo $block->escapeHtml(__('Item')); ?>" class="col item">
<?php if ($block->hasProductUrl()):?>
<a href="<?php /* @escapeNotVerified */ echo $block->getProductUrl() ?>"
title="<?php echo $block->escapeHtml($block->getProductName()) ?>"
tabindex="-1"
class="product-item-photo">
<?php else:?>
<span class="product-item-photo">
<?php endif;?>
<?php eitemcho $block->getImage($block->getProductForThumbnail(), 'cart_page_product_thumbnail')->toHtml(); ?>
<?php if ($block->hasProductUrl()):?>
</a>
<?php else: ?>
</span>
<?php endif; ?>
<div class="product-item-details">
<strong class="product-item-name">
<?php if ($block->hasProductUrl()):?>
<a href="<?php /* @escapeNotVerified */ echo $block->getProductUrl() ?>"><?php echo $block->escapeHtml($block->getProductName()) ?></a>
<?php else: ?>
<?php echo $block->escapeHtml($block->getProductName()) ?>
<?php endif; ?>
</strong>
<?php if ($_options = $block->getOptionList()):?>
<dl class="item-options">
<?php foreach ($_options as $_option) : ?>
<?php $_formatedOptionValue = $block->getFormatedOptionValue($_option) ?>
<dt><?php echo $block->escapeHtml($_option['label']) ?></dt>
<dd>
<?php if (isset($_formatedOptionValue['full_view'])): ?>
<?php /* @escapeNotVerified */ echo $_formatedOptionValue['full_view'] ?>
<?php else: ?>
<?php /* @escapeNotVerified */ echo $_formatedOptionValue['value'] ?>
<?php endif; ?>
</dd>
<?php endforeach; ?>
</dl>
<?php endif;?>
<?php if ($messages = $block->getMessages()): ?>
<?php foreach ($messages as $message): ?>
<div class="cart item message <?php /* @escapeNotVerified */ echo $message['type'] ?>"><div><?php echo $block->escapeHtml($message['text']) ?></div></div>
<?php endforeach; ?>
<?php endif; ?>
<?php $addInfoBlock = $block->getProductAdditionalInformationBlock(); ?>
<?php if ($addInfoBlock): ?>
<?php echo $addInfoBlock->setItem($_item)->toHtml() ?>
<?php endif;?>
</div>
</td>
<?php if ($canApplyMsrp): ?>
<td class="col msrp" data-th="<?php echo $block->escapeHtml(__('Price')); ?>">
<span class="pricing msrp">
<span class="msrp notice"><?php /* @escapeNotVerified */ echo __('See price before order confirmation.'); ?></span>
<?php $helpLinkId = 'cart-msrp-help-' . $_item->getId(); ?>
<a href="#" class="action help map" id="<?php /* @escapeNotVerified */ echo($helpLinkId); ?>" data-mage-init='{"addToCart":{"helpLinkId": "#<?php /* @escapeNotVerified */ echo $helpLinkId;?>","productName": "<?php /* @escapeNotVerified */ echo $product->getName(); ?>","showAddToCart": false}}'>
<span><?php /* @escapeNotVerified */ echo __("What's this?"); ?></span>
</a>
</span>
</td>
<?php else: ?>
<td class="col price" data-th="<?php echo $block->escapeHtml(__('Price')); ?>">
<?php echo $block->getUnitPriceHtml($_item); ?>
</td>
<?php endif; ?>
<td class="col qty" data-th="<?php echo $block->escapeHtml(__('Qty')); ?>">
<div class="field qty">
<label class="label" for="cart-<?php /* @escapeNotVerified */ echo $_item->getId() ?>-qty">
<span><?php /* @escapeNotVerified */ echo __('Qty') ?></span>
</label>
<div class="control qty">
<!-- <form action="<?php /* @escapeNotVerified */ //echo $block->getUrl('checkout/cart/updatePost') ?>"
method="post"
id="form-validate"
data-mage-init='{"validation":{}}'
class="form form-cart"> -->
<button type="button" value="update_qty" name="update_cart_action" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec" class="decreaseQty-<?= /* @escapeNotVerified */ $_item->getId() ?>">-</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" readonly/>
<button type="button" value="update_qty" name="update_cart_action" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty-<?= /* @escapeNotVerified */ $_item->getId() ?>">+</button>
</form>
</div>
</div>
</td>
<td class="col subtotal" data-th="<?php echo $block->escapeHtml(__('Subtotal'));?>">
<?php if ($canApplyMsrp): ?>
<span class="cart msrp subtotal">--</span>
<?php else: ?>
<?php echo $block->getRowTotalHtml($_item); ?>
<?php endif; ?>
</td>
</tr>
<tr class="item-actions">
<td colspan="100">
<div class="actions-toolbar">
<?php /* @escapeNotVerified */ echo $block->getActions($_item) ?>
</div>
</td>
</tr>
</tbody>
<script type="text/javascript">
require(["jquery","Magento_Checkout/js/action/get-totals","Magento_Customer/js/customer-data"],function($, getTotalsAction, customerData){
$(document).ready(function(){
$(document).on('click', 'button.increaseQty-<?= /* @escapeNotVerified */ $_item->getId() ?>,button.decreaseQty-<?= /* @escapeNotVerified */ $_item->getId() ?> ', function(){
var $this = $(this);
var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');
var currentQty = $("#cart-"+ctrl+"-qty").val();
if($this.hasClass('increaseQty-<?= /* @escapeNotVerified */ $_item->getId() ?>')){
var newAdd = parseInt(currentQty)+parseInt(1);
$("#cart-"+ctrl+"-qty").val(newAdd);
}
else if($this.hasClass('decreaseQty-<?= /* @escapeNotVerified */ $_item->getId() ?>')) {
if(currentQty>0){
var newAdd = parseInt(currentQty)-parseInt(1);
$("#cart-"+ctrl+"-qty").val(newAdd);
}
}
var form = $('form#form-validate');
var url="<?php echo $block->getUrl('checkout/cart/updatePost') ?>";
$.ajax({
url: url,
type: "POST",
data: form.serialize(),
showLoader: true,
cache: false,
success: function(res){
var parsedResponse = $.parseHTML(res);
var result = $(parsedResponse).find("#form-validate");
var sections = ['cart'];
$("#form-validate").replaceWith(result);
// The mini cart reloading
customerData.reload(sections, true);
// The totals summary block reloading
var deferred = $.Deferred();
getTotalsAction([], deferred);
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
console.log(err.Message);
}
});
return true;
});
});
});
</script>
- The code begins by retrieving the item and product information associated with the current cart item.
- It checks if the product’s Minimum Sales Retail Price (MSRP) can be applied and if so, it displays the MSRP notice with a help link. Otherwise, it displays the unit price of the item.
- The quantity input field is rendered with buttons to increase and decrease the quantity. JavaScript code is included to handle the quantity updates using AJAX.
- The subtotal of the item is displayed.
- The item actions, such as remove or edit, are rendered.
- A JavaScript block is included to handle the quantity update functionality. When the increase or decrease buttons are clicked, an AJAX request is sent to update the cart and refresh the cart and totals sections.
Run these commands:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy-f
php bin/magento cache:clean
chmod -R 777 var/pub/generated
See the result on the cart page (shopping cart):
