3 Tags added
| link
2 added 112 characters in body
source | link

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

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

1
source | link

Mageto 2.3. How add Qty & 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>