2

I'm using custom modules to show quantity increment/decrement in quantity box using KnockoutJS.

Making custom modules for every folder is correct.but it nothing happpend, after click on increment/decrement button on product details page in magentov2.1.9.

I followed this link during this task:

https://magenticians.com/quantity-increment-decrement-magento-2/

what are missing from my side.

enter image description here

3
  • How can we help you? Can you post what kind of error you receive or code you have written? Nov 15, 2017 at 7:11
  • @BartoszHerba, I mentioned above link to follows.but in my case script not work in this task.hope you understand. Nov 15, 2017 at 7:17
  • Great to have documentation of module but how i am suppose to guess what is wrong with YOUR code if you are not sharing it nor the error logs? Nov 15, 2017 at 7:22

2 Answers 2

3

=> 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>
2
  • After apply above code its not working in my case.only shows default box not increnment/decrement section. Nov 27, 2017 at 6:57
  • any error in console ? Can you please share your code Nov 29, 2017 at 4:47
0

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 foldet costume theme > web > js > inc_dec.js and call it to default_head_blocks.xml <link src="js/inc_dec.js"/>

<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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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