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

Update qty #1338

Merged
merged 2 commits into from Sep 13, 2018
Merged

Update qty #1338

merged 2 commits into from Sep 13, 2018

Conversation

ghost
Copy link

@ghost ghost commented Aug 28, 2018

What?

Currently if user change manually (write a number) the qty of item, the cart is not updated and the only way to update the qty it is using the inc and dec arrows. This change added "focusout" event on the qty field, which allow the user to change manually the number of the qty., and the cart will be updated once focus leaves the field.

Test

screen shot 2018-09-12 at 4 51 21 pm

@bigbot
Copy link

bigbot commented Aug 28, 2018

Autotagging @bigcommerce/storefront-team @davidchin

@@ -110,6 +110,9 @@ <h4 class="cart-item-name"><a href="{{url}}">{{name}}</a></h4>
data-quantity-max-error="{{lang 'products.quantity_max' quantity=max_purchase_quantity}}"
min="1"
pattern="[0-9]*"
data-cart-itemid="{{id}}"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we have this twice ?

const itemId = $target.data('cartItemid');
const $el = $(`#qty-${itemId}`);
const oldQty = parseInt($el.val(), 10);
const oldQty = preVal !== null ? preVal : parseInt($el.val(), 10);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't we be running parseInt on preVal as well ?

const maxQty = parseInt($el.data('quantityMax'), 10);
const minQty = parseInt($el.data('quantityMin'), 10);
const minError = $el.data('quantityMinError');
const maxError = $el.data('quantityMaxError');
const newQty = $target.data('action') === 'inc' ? oldQty + 1 : oldQty - 1;
let qty = null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not initialize the qty value with the default value.

Copy link
Contributor

@junedkazi junedkazi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR needs a rebase as well.

text: "Not a valid entry",
type: 'error',
});
} else if(newQty < minQty) {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@junedkazi I changed that to display error if there is an invalid input, however that will change the current logic that fallback in case of invalid input to the min min_purchase_quantity. If we choose to keep it, I would like to write a test for this case

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this logic because I (and users) can now enter trash into the quantity field. Maybe the text should be "Not a valid number?" Because other errors will show up in the case of out of stock.

@junedkazi
Copy link
Contributor

@Ubersmake can we test this PR before we merge it.

@Ubersmake
Copy link
Contributor

@junedkazi @bc-zoharmuzafi Taking a look.

@Ubersmake
Copy link
Contributor

There are a lot of corner cases here.

Using the current arrow-only behavior for comparison:

  • Reducing a line item's quantity to 0 will remove that line item from the cart.
  • If that line item was the only line item in the cart, the cart will be refreshed with a "Your cart is empty" message.

With the addition of the item quantity feature:

  • Reducing the only/last/remaining line item's quantity to 0 will remove that line item from the cart, but will show a cart page without line items, as opposed to a "Your cart is empty" message.
  • Using a negative quantity will cause an error modal to appear. The form value of the line item remains as it was before the error, but the display value is the negative quantity. This display should be updated, similar to what happens with non-integer inputs.

Copy link
Contributor

@junedkazi junedkazi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

@Ubersmake
Copy link
Contributor

💚

@Ubersmake Ubersmake merged commit ff97615 into bigcommerce:master Sep 13, 2018
Ubersmake added a commit that referenced this pull request Sep 14, 2018
Fix eslint warning in cart.js focus event from #1338
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants