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:
