Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Product in basket is being removed instead of the quantity being updated. #1

Closed
andrew-serrano opened this issue Jul 10, 2019 · 1 comment

Comments

@andrew-serrano
Copy link

commented Jul 10, 2019

Provide a general summary of the issue in the Title above

Expected Behavior

On the basket page. When I input a number into the quantity field it should update the product's quantity.

Current Behavior

On the basket page. When I input a number into the quantity field it should update the product's quantity. But instead removes it from the basket.

Steps to Reproduce (for bugs)

Video of the steps:
https://drive.google.com/file/d/1aHushPOM3o_Xz6u2TrxmrZBYx8zcExmn/view

  1. Add a product to your basket with a quantity of "1". Link to product https://colossus.mivareadythemes.com/y5-iperespresso-espresso-coffee-machine.html
  2. On the BASK page, focus on the quantity input field and enter "2". This should remove the product from the basket.

*Note The hidden field action within the form is using the value of "RGRP" instead of "QTYG". Using "QTYG" should fix the issues.

  • Version used:
  • Chrome 75
  • macOS Mojave 10.14.5

@influxweb influxweb self-assigned this Jul 10, 2019

@influxweb influxweb added this to the v1.0.1 milestone Jul 10, 2019

@influxweb

This comment has been minimized.

Copy link
Contributor

commented Jul 10, 2019

It looks like, in porting Shadows to build Colossus, the quantify.js file was not updated. This issue has been addressed in Shadows mivaecommerce/readytheme-shadows#59 .

I have updated this extension and it will be included in the next maintenance release. To make the update prior to the next release, you will need to update the contents of User Interface -> JavaScript Resources -> quantify with the following:

/**
 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
 |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++) {
		/**
		 * This listener prevents the `enter` key from adjusting the `input` value.
		 */
		adjusters[id].addEventListener('keydown', function (keyEvent) {
			if (keyEvent.target.matches('input')) {
				if (keyEvent.key === 'Enter') {
					keyEvent.preventDefault();
				}
			}
		});

		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');
				var groupForm = document.querySelector('[data-hook="' + input.getAttribute('data-group') + '"]');

				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;
					if (groupForm) {
						groupForm.elements['Action'].value = 'QTYG';
					}
					input.dispatchEvent(changed);
					allowRemoveUpdate();
				}
				else {
					input.value = 0;
					input.dispatchEvent(changed);
				}
			}
		});
	}

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

		function toggleRemove(row, qty) {
			var removeToggle = row.previousElementSibling;
			var groupForm = document.querySelector('[data-hook="' + row.getAttribute('data-group') + '"]');

			if (removeToggle.dataset.hook !== 'remove') {
				if (qty > '1') {
					if (groupForm) {
						groupForm.elements['Action'].value = 'QTYG';
					}
					removeToggle.classList.remove('u-icon-remove');
					removeToggle.classList.add('u-icon-subtract');
					removeToggle.setAttribute('data-action', 'decrement');
				}
				else if (qty === '1') {
					if (groupForm) {
						groupForm.elements['Action'].value = 'QTYG';
					}
					removeToggle.classList.remove('u-icon-subtract');
					removeToggle.classList.add('u-icon-remove');
					removeToggle.setAttribute('data-action', 'remove');
				}
				else {
					if (groupForm) {
						groupForm.elements['Action'].value = 'RGRP';
					}
					removeToggle.classList.remove('u-icon-subtract');
					removeToggle.classList.add('u-icon-remove');
					removeToggle.setAttribute('data-action', 'remove');
				}
			}
		}

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

				toggleRemove(quantityLine, quantityLine.value);

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

				quantityLine.addEventListener('input', function (event) {
					toggleRemove(this, this.value);
					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();
		}
	}
})();

@influxweb influxweb added the v1.0.1 label Jul 10, 2019

influxweb added a commit that referenced this issue Jul 24, 2019

v1.0.1
This maintenance release addresses all issues contained in the v1.0.1 milestone. https://github.com/mivaecommerce/readytheme-colossus/milestone/1?closed=1

This closes #1, closes #2, closes #3, closes #4, closes #5, closes #6, and closes #7
@influxweb influxweb referenced this issue Jul 24, 2019

@influxweb influxweb closed this in #8 Jul 24, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.