├── Snapshot
    └── Increase-qty.png
├── etc
    └── module.xml
├── README.md
├── registration.php
└── view
    └── frontend
        ├── web
            ├── template
            │   └── product
            │   │   └── view
            │   │       └── addtocart.html
            ├── css
            │   └── qty.css
            └── js
            │   └── view
            │       └── qty.js
        ├── layout
            └── catalog_product_view.xml
        └── templates
            └── product
                └── view
                    └── addtocart.phtml


/Snapshot/Increase-qty.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/php-cuong/magento2-knockoutjs/HEAD/Snapshot/Increase-qty.png


--------------------------------------------------------------------------------
/etc/module.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0"?>
2 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
3 |     <module name="PHPCuong_ProductQty" setup_version="2.1.0"/>
4 | </config>
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # magento2-knockoutjs
2 | Using Knockout JS in Magento 2 to Decrease and the Increase Qty of the product on the product detail page.
3 | 
4 | ## Snapshot
5 | ![ScreenShot](https://raw.githubusercontent.com/php-cuong/magento2-knockoutjs/master/Snapshot/Increase-qty.png)
6 | 
7 | ## See the video how I can create this extension
8 | https://www.youtube.com/watch?v=3mGfCqLvSvA
9 | 


--------------------------------------------------------------------------------
/registration.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * @Author: Ngo Quang Cuong
 5 |  * @Date:   2017-07-11 14:35:21
 6 |  * @Last Modified by:   nquangcuong
 7 |  * @Last Modified time: 2017-07-11 14:35:41
 8 |  * @website: http://giaphugroup.com
 9 |  */
10 | 
11 | \Magento\Framework\Component\ComponentRegistrar::register(
12 |     \Magento\Framework\Component\ComponentRegistrar::MODULE,
13 |     'PHPCuong_ProductQty',
14 |     __DIR__
15 | );
16 | 


--------------------------------------------------------------------------------
/view/frontend/web/template/product/view/addtocart.html:
--------------------------------------------------------------------------------
 1 | <button data-bind="attr: {title: $t('Decrease')}, click: decreaseQty" class="decreaseQty">-</button>
 2 | <input data-bind="attr: {value: qty, title: $t('Qty')}, event:{change: qtyChanged}"
 3 |     type="number"
 4 |     name="qty"
 5 |     id="qty"
 6 |     maxlength="12"
 7 |     class="input-text qty"
 8 |     data-validate="{'required-number':true, digits:true}"
 9 | />
10 | <button data-bind="attr: {title: $t('Increase')}, click: increaseQty" class="increaseQty">+</button>
11 | 


--------------------------------------------------------------------------------
/view/frontend/web/css/qty.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | * @Author: Ngo Quang Cuong
 3 | * @Date:   2017-07-11 20:53:01
 4 | * @Last Modified by:   nquangcuong
 5 | * @Last Modified time: 2017-07-11 21:28:22
 6 | */
 7 | .qty_change {
 8 |     position: relative;
 9 | }
10 | .qty_change .decreaseQty {
11 |     border-right: 0px;
12 |     border-radius: 4px 0 0 4px;
13 |     border: 1px solid #c2c2c2;
14 |     padding: 7px 0px;
15 |     position: absolute;
16 |     z-index: 55;
17 |     width: 25px;
18 | }
19 | .qty_change .increaseQty {
20 |     border-left: 0px;
21 |     border-radius: 0px 4px 4px 0;
22 |     border: 1px solid #c2c2c2;
23 |     padding: 7px 0px;
24 |     position: absolute;
25 |     left: 63px;
26 |     top: 0px;
27 |     width: 25px;
28 | }
29 | .box-tocart .qty_change input.input-text.qty {
30 |     margin-left: 24px;
31 |     width: 40px;
32 |     padding: 0px;
33 | }
34 | 


--------------------------------------------------------------------------------
/view/frontend/layout/catalog_product_view.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | -->
 8 | <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 9 |     <head>
10 |         <css src="PHPCuong_ProductQty::css/qty.css"/>
11 |     </head>
12 |     <body>
13 |         <referenceBlock name="product.info.addtocart.additional">
14 |             <action method="setTemplate">
15 |                 <argument name="template" xsi:type="string">PHPCuong_ProductQty::product/view/addtocart.phtml</argument>
16 |             </action>
17 |         </referenceBlock>
18 |         <referenceBlock name="product.info.addtocart">
19 |             <action method="setTemplate">
20 |                 <argument name="template" xsi:type="string">PHPCuong_ProductQty::product/view/addtocart.phtml</argument>
21 |             </action>
22 |         </referenceBlock>
23 |     </body>
24 | </page>
25 | 


--------------------------------------------------------------------------------
/view/frontend/web/js/view/qty.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | * @Author: Ngo Quang Cuong
 3 | * @Date:   2017-07-11 15:14:29
 4 | * @Last Modified by:   nquangcuong
 5 | * @Last Modified time: 2017-07-11 20:52:12
 6 | */
 7 | 
 8 | define(
 9 |     [
10 |         'jquery',
11 |         'ko',
12 |         'uiComponent'
13 |     ],
14 |     function($, ko, Component) {
15 |         'use strict';
16 | 
17 |         return Component.extend({
18 | 
19 |             defaults: {
20 |                 template: 'PHPCuong_ProductQty/product/view/addtocart'
21 |             },
22 | 
23 |             initialize: function() {
24 |                 this._super();
25 |                 this.qty = ko.observable(this.defaultQty);
26 |             },
27 | 
28 |             decreaseQty: function() {
29 |                 var newQty = parseInt(this.qty()) - 1;
30 |                 if (newQty < 1) {
31 |                     newQty = 1;
32 |                 }
33 |                 this.qty(newQty);
34 |                 $('input[name="qty"]').val(newQty);
35 |             },
36 | 
37 |             increaseQty: function() {
38 |                 var newQty = parseInt(this.qty()) + 1;
39 |                 if (newQty > 100) {
40 |                     newQty = 100;
41 |                 }
42 |                 this.qty(newQty);
43 |                 $('input[name="qty"]').val(newQty);
44 |             },
45 | 
46 |             qtyChanged: function() {
47 |                 var newQty = parseInt($('input[name="qty"]').val());
48 |                 if (isNaN(newQty)) {
49 |                     $('input[name="qty"]').val('1');
50 |                     newQty = 1;
51 |                 }
52 |                 if (newQty > 100) {
53 |                     newQty = 100;
54 |                 }
55 |                 this.qty(parseInt(newQty));
56 |                 $('input[name="qty"]').val(newQty);
57 |             }
58 | 
59 |         });
60 |     }
61 | );
62 | 


--------------------------------------------------------------------------------
/view/frontend/templates/product/view/addtocart.phtml:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 4 |  * See COPYING.txt for license details.
 5 |  */
 6 | 
 7 | // @codingStandardsIgnoreFile
 8 | 
 9 | /** @var $block \Magento\Catalog\Block\Product\View */
10 | ?>
11 | <?php $_product = $block->getProduct(); ?>
12 | <?php $buttonTitle = __('Add to Cart'); ?>
13 | <?php if ($_product->isSaleable()): ?>
14 | <div class="box-tocart">
15 |     <div class="fieldset">
16 |         <?php if ($block->shouldRenderQuantity()): ?>
17 |         <div class="field qty">
18 |             <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
19 |             <div class="control qty_change" id="qty_change" data-bind="scope:'qty_change'">
20 |                 <!-- ko template: getTemplate() --><!-- /ko -->
21 |                 <script type="text/x-magento-init">
22 |                     {
23 |                         "#qty_change": {
24 |                            "Magento_Ui/js/core/app": {
25 |                                 "components" : {
26 |                                     "qty_change": {
27 |                                         "component": "PHPCuong_ProductQty/js/view/qty",
28 |                                         "defaultQty": "<?php echo $block->getProductDefaultQty() * 1; ?>"
29 |                                     }
30 |                                 }
31 |                             }
32 |                         }
33 |                     }
34 |                 </script>
35 |             </div>
36 |         </div>
37 |         <?php endif; ?>
38 |         <div class="actions">
39 |             <button type="submit"
40 |                     title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"
41 |                     class="action primary tocart"
42 |                     id="product-addtocart-button">
43 |                 <span><?php /* @escapeNotVerified */ echo $buttonTitle ?></span>
44 |             </button>
45 |             <?php echo $block->getChildHtml('', true) ?>
46 |         </div>
47 |     </div>
48 | </div>
49 | <?php endif; ?>
50 | <script type="text/x-magento-init">
51 |     {
52 |         "#product_addtocart_form": {
53 |             "Magento_Catalog/product/view/validation": {
54 |                 "radioCheckboxClosest": ".nested"
55 |             }
56 |         }
57 |     }
58 | </script>
59 | <?php if (!$block->isRedirectToCartEnabled()) : ?>
60 | <script type="text/x-magento-init">
61 |     {
62 |         "#product_addtocart_form": {
63 |             "catalogAddToCart": {
64 |                 "bindSubmit": false
65 |             }
66 |         }
67 |     }
68 | </script>
69 | <?php endif; ?>
70 | 


--------------------------------------------------------------------------------