How to add increment(plus +) and decrements(minus -) qty button on product detail page?
Magento – Magento 2 : How to Add quantity increment & decrements button on product details page
catalogmagento2
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>
@Lalit Kaushik You can try in this way.
app/code/Custom/ShoppingCart/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Custom_ShoppingCart',
__DIR__
);
app/code/Custom/ShoppingCart/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Custom_ShoppingCart" setup_version="1.0.0">
</module>
</config>
app/code/Custom/ShoppingCart/view/frontend/layout/checkout_cart_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.cart.form">
<block class="Magento\Framework\View\Element\RendererList" name="checkout.cart.item.renderers.override" as="renderer.list.custom"/>
<arguments>
<argument name="renderer_list_name" xsi:type="string">checkout.cart.item.renderers.override</argument>
</arguments>
</referenceBlock>
</body>
</page>
app/code/Custom/ShoppingCart/view/frontend/layout/checkout_cart_item_renderers.xml
<body>
<referenceBlock name="checkout.cart.item.renderers.override">
<block class="Magento\Checkout\Block\Cart\Item\Renderer" as="default" template="Custom_ShoppingCart::cart/item/default.phtml" />
<block class="Magento\Checkout\Block\Cart\Item\Renderer" as="simple" template="Custom_ShoppingCart::cart/item/default.phtml" />
</referenceBlock>
<referenceBlock name="checkout.cart.item.renderers.default.actions.edit" remove="true" />
<referenceBlock name="checkout.cart.item.renderers.simple.actions.edit" remove="true" />
</body>
app/code/Custom/ShoppingCart/view/frontend/templates/cart/item/default.phtml
<?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 echo $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>
Best Answer
You can implement this with
UI Components
1) Configure your
requirejs-config.js
to define yourjs
module: (app/design/frontend/<vendor>/<theme>/Magento_Catalog/
).2) Copy and change
template
fromvendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml
to your themeapp/design/frontend/<vendor>/<theme>/Magento_Catalog/templates/product/view/
3) Add your
js
module4) Add
html
template