1

I am just sharing variant how i added increment and decrement for Product page and category page and widget

I have created it in my custom theme into module Magento_Catalog.

You should create file:

app/design/frontend/CustomTheme/default/Magento_Catalog/web/js/view/product/qty.js

define(['jquery'], function ($) {'use strict';

return function (config, element) {
    $(element).on('click', function (event) {
        event.preventDefault();
        var productId, input, currentQty, currentOperation;
         productId = $(element).data();
         input = $("input[data-product-item='" + productId.productItem + "']");
         currentQty  = input.val();
         currentOperation = this.className;
         if(currentOperation == 'increaseQty') {
             input.val( +currentQty + 1 );
         }else {
             var newQty = +currentQty - 1;
             if (newQty < 1)
             {
                 newQty = 1;
             }
             input.val(newQty);
         }
    });

}});

For product page:

public/app/design/frontend/CustomTheme/default/Magento_Catalog/templates/product/view/addtocart.phtml

I insert this code inside <div class="field qty">

<div class="field qty">
        <label class="label" for="qty"><span><?= /* @escapeNotVerified */ __('Qty') ?></span></label>
        <script type="text/x-magento-init">
            {
                ".control button": {
                    "Magento_Catalog/js/view/product/qty": {}
                }
            }
        </script>
        <div class="control">
            <button class="decreaseQty" data-product-item="<?= /* @escapeNotVerified */ $_product->getId() ?>">-</button>
            <input type="number"
                   name="qty"
                   id="qty"
                   value="<?= /* @escapeNotVerified */ $block->getProductDefaultQty() * 1 ?>"
                   title="<?= /* @escapeNotVerified */ __('Qty') ?>"
                   class="input-text qty"
                   data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                   data-product-item="<?= /* @escapeNotVerified */ $_product->getId() ?>"
                   />
            <button class="increaseQty" data-product-item="<?= /* @escapeNotVerified */ $_product->getId() ?>">+</button>
        </div>
    </div>

For products on category page:

public/app/design/frontend/CustomTheme/default/Magento_Catalog/templates/product/list.phtml

I inserted it into <form data-role="tocart-form" after <?= $block->getBlockHtml('formkey') ?>

      <script type="text/x-magento-init">
                                            {
                                                ".control button": {
                                                    "Magento_Catalog/js/view/product/qty": {}
                                                }
                                            }
                                        </script>

                                        <div class="control" >
                                            <button class="decreaseQty" data-product-item="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>">-</button>
                                            <input type="number"
                                                    name="qty"
                                                    value="<?= /* @escapeNotVerified */ 1 ?>"
                                                    title="<?= /* @escapeNotVerified */ __('Qty') ?>"
                                                    class="input-text qty"
                                                    data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                                                    data-product-item="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>"
                                            />
                                            <button class="increaseQty" data-product-item="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>">+</button>
                                        </div>

For widget New Product:

public/app/design/frontend/CustomTheme/default/Magento_Catalog/templates/product/widget/new/content/new_grid.phtml

add it on the top page use Magento\Framework\App\Action\Action;

add this code enter image description here

$postParams = json_decode($postData, true);

<form data-role="tocart-form" data-product-sku="<?= $block->escapeHtml($_item->getSku()) ?>" action="<?=  $postParams['action'] ?>" method="post">
<input type="hidden" name="product" value="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>">
<input type="hidden" name="<?= /* @escapeNotVerified */ Action::PARAM_NAME_URL_ENCODED ?>" value="<?= /* @escapeNotVerified */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>">
<?= $block->getBlockHtml('formkey') ?>
<script type="text/x-magento-init">
    {
        ".control button": {
            "Magento_Catalog/js/view/product/qty": {}
        }
    }
</script>

<div class="control" >
    <button class="decreaseQty" data-product-item="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>">-</button>
    <input type="number"
           name="qty"
           value="<?= /* @escapeNotVerified */ 1 ?>"
           title="<?= /* @escapeNotVerified */ __('Qty') ?>"
           class="input-text qty"
           data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
           data-product-item="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>"
    />
    <button class="increaseQty" data-product-item="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>">+</button>
</div>
<button type="submit"
        title="<?= $block->escapeHtml(__('Add to Cart')) ?>"
        class="action tocart primary">
    <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
</button></form>
  • It's works for me – Oleg Usik May 23 at 14:03
  • It's works for me as magic. Thanks a lot!! – Galina Jun 5 at 9:15
0

Also I have found this article with using Ui component https://www.cloudways.com/blog/knockoutjs-in-magento-2/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.