Configure your module by creating a module.xml file at app/code/Magemonkeys/QtyIncrement/etc. Add the following code in it:
1 2 3 4 |
<?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="Magemonkeys_QtyIncrement" setup_version="1.0.0"></module> </config> |
Registration of Module
Now, register the module by creating registration.php at app/code/Magemonkeys/QtyIncrement, and add the following code in it:
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Magemonkeys_QtyIncrement', __DIR__ ); |
Copy addtocart.phtml
Go to vendor/magento/module-catalog/view/frontend/templates/product/view from the root directory of your store and copy addtocart.phtml to your own module app/code /Magemonkeys/QtyIncrement/view/frontend/templates/catalog/product/view
Edit addtocart.phtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<?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": { "qty_change": { "component": "Magemonkeys_QtyIncrement/js/view/product/view/qty_change", "defaultQty": <?php echo $block->getProductDefaultQty() * 1 ?> } } } } } </script> <div class="control" data-bind="scope: 'qty_change'"> <button data-bind="click: decreaseQty">-</button> <input data-bind="value: qty()" type="number" name="qty" id="qty" maxlength="12" 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; ?> |
Create qty_change.js
Now, create qty_change.js at app/code/Magemonkeys/QtyIncrement/view/frontend/web/js/view/product/view. Add the following code in it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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); } }); }); |
Lastly, just create catalog_product_view.xml at app/code/Magemonkeys/QtyIncrement/view/frontend/layout. Add the following code in it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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">Magemonkeys_QtyIncrement::catalog/product/view/addtocart.phtml</argument> </action> </referenceBlock> <referenceBlock name="product.info.addtocart.additional"> <action method="setTemplate"> <argument name="template" xsi:type="string">Magemonkeys_QtyIncrement::catalog/product/view/addtocart.phtml</argument> </action> </referenceBlock> </body> </page> |
Go to the root directory of your store by using SSH terminal and run the following commands:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
rm -rf var/di var/generation var/cache/* var/log/* var/page_cache/* php bin/magento module:enable Magemonkeys_QtyIncrement 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 |
Now, go to the product page and you will see the result:
[crayon-63d3d5551d618676506594/] Using above fucntion Images can be imported directly from...
Override view block using di.xml and add the below code...
You can check a list of called layout XML for...
Follow the below steps to install and set up PWA...
If you want to remove all leading zero's from order,...
Let our Magento expert connect to discuss your requirement.
We offer Magento
certified developers.
Our Magento clientele
is 500+.
We sign NDA for the
security of your projects.
We’ve performed 100+
Magento migration projects.
Free quotation
on your project.
Three months warranty on
code developed by us.