Latest news

How To Add Quantity Increment Buttons To Product Page In Magento 2?

No comments

By default, in the product page of Magento 2, there are no quantity increment buttons (or decrement buttons). Therefore, in the today blog post, we will show you 7 simple steps to add these buttons on your website in order to improve your user experience as a result.

magento 2 quantity
After we customize to display the quantity increment buttons in Magento 2 product page:

magento 2 increment button

Step 1: Create a module.xml file in app/code/Tigren/AddQuantity/etc/

<?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="Tigren_AddQuantity" setup_version="1.0.0"></module>
</config>


Step 2: Create Registration file of Module

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::MODULE,
   'Tigren_AddQuantity',
   __DIR__
);


Step 3: Create file addtocart.phtml in app/code/Tigren/AddQuantity/view/frontend/templates/catalog/product/view/
– Copy the file addtocart.phtml to vendor/magento/module-catalog/view/frontend/templates/product/view
– Edit the file addtocart.phtml we’ve just copied:
– Add the following code before quantity field. It would help you create a UI component and initialize it:

<script type="text/x-magento-init">	
{	
   "*": {	
	   "Magento_Ui/js/core/app": {
	       "components": {
	           "change_qty": {
	               "component": "Tigren_AddQuantity/js/view/product/view/change_qty",
	               "defaultQty": <?php echo $block->getProductDefaultQty() * 1 ?>
	           }
	       }
	   }
   }	
}	
</script>	


Step 4: Connect change_qty with its HTML

<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>	

*data-bind=”scope: ‘change_qty'” to connect HTML with Javascript function.
The two increment and decrement buttons have been added on the above code.
The final addtocart.phtml file will look like the following:

<?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": "Tigren_AddQuantity/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; ?>

Step 5: Create file change_qty.js in qpp/code/Tigren/AddQuantity/view/frontend/web/js/view/product/view

define([	
   'ko',	
   'uiComponent'	
], function (ko, Component) {	
   'use strict';	
   return Component.extend({	
       initialize: function () {	
	   //initialize parent Component
	   this._super();
	   this.qty = ko.observable(this.defaultQty);
       },	
       decreaseQty: function() {	
	   var newQty = this.qty() - 1;
	   if (newQty < 1) 
	   {
	       newQty = 1;
	   }
	   this.qty(newQty);
       },	
       increaseQty: function() {	
	   var newQty = this.qty() + 1;
	   this.qty(newQty);
       }	
   });	
});	


Step 6: Create file catalog_product_view.xml in app/code/Magenticians/Mymodule/view/frontend/layout

<?xml version="1.0"?>	
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">	
   <body>	
       <referenceBlock name="product.info.addtocart">	
	   <action method="setTemplate">
	       <argument name="template" xsi:type="string">Tigren_AddQuantity::catalog/product/view/addtocart.phtml</argument>
	   </action>
       </referenceBlock>	
       <referenceBlock name="product.info.addtocart.additional">	
	   <action method="setTemplate">
	       <argument name="template" xsi:type="string">Tigren_AddQuantity::catalog/product/view/addtocart.phtml</argument>
	   </action>
       </referenceBlock>	
   </body>	
</page>	
	


Step 7: Run the following commands

php bin/magento setup:upgrade		
 		
php bin/magento setup:di:compile		
 		
php bin/magento indexer:reindex		
 		
php bin/magento cache:clean		
 		
php bin/magento cache:flush		


We have given you a detailed instruction to add the quantity increment buttons to your Magento 2 storefront. If you have any problems following the guide, please leave a comment below.
1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 5.00 out of 5)

Loading...
Read More:

Quick Solutions To Your Magento 2 Migration Issues

How To Add Custom Validate Field In Magento 2 Form?

A Brief History Of Magento From 2007-2018 [Infographic]

How To Display Order Information In Checkout Success Page In Magento 2?

How To Add Contact Form To CMS Page In Magento 2?

April LeeHow To Add Quantity Increment Buttons To Product Page In Magento 2?

Leave a Reply

Your email address will not be published. Required fields are marked *