├── README.md ├── Snapshot └── Increase-qty.png ├── etc └── module.xml ├── registration.php └── view └── frontend ├── layout └── catalog_product_view.xml ├── templates └── product │ └── view │ └── addtocart.phtml └── web ├── css └── qty.css ├── js └── view │ └── qty.js └── template └── product └── view └── addtocart.html /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 | -------------------------------------------------------------------------------- /Snapshot/Increase-qty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/php-cuong/magento2-knockoutjs/0626f303531fa60c1db7b1b49864310ba133e0ef/Snapshot/Increase-qty.png -------------------------------------------------------------------------------- /etc/module.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /registration.php: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | PHPCuong_ProductQty::product/view/addtocart.phtml 16 | 17 | 18 | 19 | 20 | PHPCuong_ProductQty::product/view/addtocart.phtml 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /view/frontend/templates/product/view/addtocart.phtml: -------------------------------------------------------------------------------- 1 | 11 | getProduct(); ?> 12 | 13 | isSaleable()): ?> 14 |

15 |

16 | shouldRenderQuantity()): ?> 17 |

18 | 19 |

20 | 21 | 35 |

36 |

37 | 38 |

39 | 45 | getChildHtml('', true) ?> 46 |

47 |

48 |

49 | 50 | 59 | isRedirectToCartEnabled()) : ?> 60 | 69 | 70 | -------------------------------------------------------------------------------- /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/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/web/template/product/view/addtocart.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | --------------------------------------------------------------------------------