Problem with quantity input on BASK

[RTHOMASDESIGN]

Noticed a couple issues with the BASK page, namely that when a customer manually wants to change a quantity by typing in their desired amount, the form submits. I think it would be best if it was only submitted on a "return / enter / go" keypress or tap. Because as it stands, if you hit backspace to remove the existing quantity the form submits and the product is removed entirely from the cart – haha potentially huge issues and I can just hear it now. Anyone know of an easy fix for this?

Not sure how I haven't noticed this before, but other themes have the same issue.

You can try it here:
http://dts3366.mivamerchantdev.com/b...ct_Code=HH6941

[Matt Zimmermann]

Nice catch, thank you!

It appears there was some incorrect checking being performed in the Quantify extension. In the administration portal, go to User Interface -> JavaScript Resources -> quantity, and edit the source. Replace the existing JavaScript with this code to correct the issue. This fix will be included in the next maintenance release.

/**
 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
 |q|u|a|n|t|i|f|y|
 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
 *
 * This extension allows for the use of buttons to increase/decrease item
 * quantities on the product and basket pages. When used on the basket page,
 * the decrease button becomes a remove button if the quantity is 1.
 */

(function () {
    'use strict';

    var adjusters = document.querySelectorAll('[data-hook="quantify"]');

    for (var id = 0; id < adjusters.length; id++) {
        adjusters[id].addEventListener('click', function (event) {
            if (event.target.matches('button')) {
                var button = event.target;
                var inputs = [].filter.call(this.children, function (sibling) {
                    return sibling !== button && sibling.matches('input');
                });
                var input = inputs[0];
                var value = parseInt(input.value);
                var action = button.getAttribute('data-action');
                var changed = document.createEvent('HTMLEvents');

                changed.initEvent('change', true, false);
                event.stopPropagation();
                event.preventDefault();

                if (action === 'decrement') {
                    /**
                     * THIS CAN BE USED TO SET A MINIMUM QUANTITY
                     * value = value > 5 ? value - 1 : 5;
                     */
                    value = value > 1 ? value - 1 : 1;

                    input.value = value;
                    input.dispatchEvent(changed);
                    allowRemoveUpdate();
                }
                else if (action === 'increment') {
                    /**
                     * THIS CAN BE USED TO SET A MAXIMUM QUANTITY
                     * value = value < 100 ? value + 1 : 100;
                     */
                    value = value + 1;

                    input.value = value;
                    input.dispatchEvent(changed);
                    allowRemoveUpdate();
                }
                else {
                    input.value = 0;
                    input.dispatchEvent(changed);
                }
            }
        });
    }

    function allowRemoveUpdate() {
        var quantities = document.querySelectorAll('[data-hook="group-quantity"]');

        if (quantities) {
            for (var id = 0; id < quantities.length; id++) {
                var quantityLine = quantities[id];
                var removeToggle = quantityLine.previousElementSibling;

                if (removeToggle.dataset.hook !== 'remove') {
                    if (quantityLine.value > '1') {
                        removeToggle.classList.remove('u-icon-remove');
                        removeToggle.classList.add('u-icon-subtract');
                        removeToggle.setAttribute('data-action', 'decrement');
                    }
                    else {
                        removeToggle.classList.remove('u-icon-subtract');
                        removeToggle.classList.add('u-icon-remove');
                        removeToggle.setAttribute('data-action', 'remove');
                    }
                }

                quantityLine.addEventListener('change', function (event) {
                    groupSubmit(event, this);
                });

                quantityLine.addEventListener('input', function (event) {
                    groupSubmit(event, this);
                });
            }
        }
    }

    allowRemoveUpdate();

    function groupSubmit(event, quantity) {
        if (event.key !== 8 && event.key !== 37 && event.key !== 38 && event.key !== 39 && event.key !== 40 && event.key !== 46 && quantity.value !== '') {
            document.querySelector('[data-hook="' + event.target.getAttribute('data-group') + '"]').submit();
        }
    }
})();

[Bruce - PhosphorMedia]

yea, that's kind of odd behaviour. you should be able to change/override it an use an actual Button to update though.

[RTHOMASDESIGN]

Thanks Matt, that definitely improves it quite a bit! We have a lot of customers that order specific items in large quantities -- constantly pressing the + - buttons would be frustrating.

Side note ~ Luxe has the same problem.