Magento – Magento 2 product list quantity increment buttons

qty-increment

I have implemented the quantity increment buttons from https://magenticians.com/quantity-increment-decrement-magento-2/ and is working fine on product page. So I decided to implement it to list.phtml and buttons are displayed correctly but when I update quantity from a product all other quantities are updated too. Anyone knows how to update quantity for the item from I clicked the increment button?

I'm using the same code as Magenticians.
Thank you!

Best Answer

Magento 2 product listing page add quantity increase and decrease buttons

Add below HTML code in form of add to cart section

<div class="field qty">
    <div class="control qty-change">
      <button class="decreaseqty">-</button>
        <input type="hidden"
               name="qty"
               id="qty"
               value="<?= /* @escapeNotVerified */ $block->getProductDefaultQty() * 1 ?>"
               title="<?= /* @escapeNotVerified */ __('Qty') ?>"
               class="input-text qty"
               data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
               />

        <span class="qty-label"> 1 ITEMS </span>
      <button class="increaseqty">+</button>
    </div>
</div>

Add below jQuery in listing page

<script type="text/javascript">
    require(["jquery"],function($){
    jQuery(".increaseqty").click(function(e){
        e.preventDefault();
        var qty = jQuery(this).closest("div.control").find("input");
        var newqty = parseInt(qty.val())+parseInt(1);
        qty.val(newqty);
        var val = qty.val();
        var label = jQuery.mage.__('ITEMS');
        var changeQty = parseInt(val) + label;
        qtyLabel = jQuery(this).closest("div.control").find("span");
        jQuery(qtyLabel).text(changeQty);
        return false;
    });

    jQuery(".decreaseqty").click(function(){
        var qty = jQuery(this).closest("div.control").find("input");
        var newqty = parseInt(qty.val())-parseInt(1);
        if(newqty < 1){
            return false;
        }
        qty.val(newqty);
        var val = qty.val();
        var label = jQuery.mage.__('ITEMS');
        var changeQty = parseInt(val) + label;
        qtyLabel = jQuery(this).closest("div.control").find("span");
        jQuery(qtyLabel).text(changeQty);
        return false;

    });
});
</script>

Related Solutions

Magento – Product QTY Increment Magento 1.8

Peter, you're trying to use wrong functionality. Quantity increments are meant to be used in cases where you absolutely have to sell something that can't be sold separately, such as six beers in a special package, as doing otherwise decreases its value. This means that you can only choose following quantities: 6, 12, 18, 24 and so on. What YOU want to do is to use bundles: create a new Bundle Product, add associated products as REQUIRED check-box (quantity 100). This way you can choose put one bundle to shopping cart while decreasing stock status of original product by 100 (or in my case by 6). If you need more information search the internet for how to create bundled products, there're TONS of excellent tutorials for scores of languages.

Magento – Quantity Increment and Decrement Button not work in Magento 2

=> Go to your theme Folder and create file called addtocart.phtml and past below code.

Quantity Increment and Decrement Button working fine by using below code

E.g :

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/addtocart.phtml

<?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>
            <?php /*Add Plus Button */ ?>
             <input type='button' value='+' class='qtyplus' field='qty' />
            <div class="control">
                <input type="number"
                       name="qty"
                       id="qty"
                       maxlength="12"
                       value="<?php /* @escapeNotVerified */ echo $block->getProductDefaultQty() * 1 ?>"
                       title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty"
                       data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                       />
                <?php /*Add Minus Button */ ?>
            <input type='button' value='-' class='qtyminus' field='qty' />
            </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; ?>
<?php /*JS FOR +-*/ ?>
<script type="text/javascript">
        //&lt;![CDATA[
        require(['jquery'], function ($) {
            setTimeout(function () {
                // This button will increment the value
                jQuery('.qtyplus').click(function (e) {
                    // Stop acting like a button
                    e.preventDefault();
                    // Get the field name
                    fieldName = jQuery(this).attr('field');
                    // Get its current value
                    var currentVal = parseInt(jQuery('input[name=' + fieldName + ']').val());
                    // If is not undefined
                    if (!isNaN(currentVal)) {
                        // Increment
                        jQuery('input[name=' + fieldName + ']').val(currentVal + 1);
                    } else {
                        // Otherwise put a 0 there
                        jQuery('input[name=' + fieldName + ']').val(0);
                    }
                });
                // This button will decrement the value till 0
                jQuery(".qtyminus").click(function (e) {
                    // Stop acting like a button
                    e.preventDefault();
                    // Get the field name
                    fieldName = jQuery(this).attr('field');
                    // Get its current value
                    var currentVal = parseInt(jQuery('input[name=' + fieldName + ']').val());
                    // If it isn't undefined or its greater than 0
                    if (!isNaN(currentVal) && currentVal > 0) {
                        // Decrement one
                        jQuery('input[name=' + fieldName + ']').val(currentVal - 1);
                    } else {
                        // Otherwise put a 0 there
                        jQuery('input[name=' + fieldName + ']').val(0);
                    }
                });
            }, 100);
        });
        //]]&gt;
    </script>

Best Answer

Related Solutions

Magento – Product QTY Increment Magento 1.8

Magento – Quantity Increment and Decrement Button not work in Magento 2

Related Topic