Cart Page: Inconsistent error messaging for low item stock

[clyde-baker]

Bug description:

When a buyer attempts to increase the quantity of a line item on the cart page, to a number that exceeds the limit of inventory available, it will reset to max quantity available with no explanation as to what just happened. Only after trying to increase the quantity a second time does an error message display.

The error message should display every time a buyer tries to enter a quantity that exceeds the available limit

https://screenshot.click/21-43-1vk8m-krbl2.mp4

---

Original Comment from @clyde-baker:

I haven't seen a fix for this yet but it's a UX disaster that will surely lead to a large number of abandonments.

Users are able to add an unlimited number of items to their cart from the product page, even if there is only 1 in stock.

Only once the user initiates checkout does an error appear stating "Out of stock. Some items are no longer available. Your cart has been updated." Unfortunately, waiting until a user has already committed to checking is way too late. And even if you click "Return to cart", the quantity doesn't actually update and remains at the impossible number.

In addition, if the user attempts to increase the impossible quantity from the cart page, it will reset to lowest quantity available with no explanation as to what just happened. Only after trying to increase the quantity a second time does an error display.

Like with the Debut theme, users should be prevented from adding the impossible quantity to cart and immediately given an error message.

• Dawn Version: 1.1.0
• Chrome Version 92.0.4515.131

[nicklepine]

Thanks for spotting this @clyde-baker. Given there are 2 different bugs listed in this ticket - I've created a separate ticket for the Product Page issue, and will edit your initial description to be focused on the Cart page bug.

[ludoboludo]

Here is what I'm observing to add some details to this issue: video

[ludoboludo]

There is also an odd issue in Safari brought up here by @Binthout: #582 (comment)

Here is some early observations:

Interesting, from what I'm seeing it's working properly when navigation/updating the quantity via keyboard navigation. But when it's using the mouse, it doesn't detect anything for document.activeElement.getAttribute('name') from the onChange(event) function.

So if (lineItem) lineItem.querySelector([name="${name}"]).focus(); ends up failing and throwing an error which shows up in the video 🤔

[ludoboludo]

Looks like it's specific to Mac. activeElement will only return the input if it's a type="text" otherwise, focus will be set to the Body or null.

Note: For iOS, elements that are not , will not get focus assigned to them. The property will then return BODY or null.

There was some useful information in that thread of comments: https://bugzilla.mozilla.org/show_bug.cgi?id=1547926

So I think a quick fix would be to change this:

if (lineItem) lineItem.querySelector(`[name="${name}"]`).focus();

to this

if (lineItem && lineItem.querySelector(`[name="${name}"]`)) lineItem.querySelector(`[name="${name}"]`).focus();

[Binthout]

Looks like it's specific to Mac. activeElement will only return the input if it's a type="text" otherwise, focus will be set to the Body or null.

Note: For iOS, elements that are not , will not get focus assigned to them. The property will then return BODY or null.

There was some useful information in that thread of comments: https://bugzilla.mozilla.org/show_bug.cgi?id=1547926

So I think a quick fix would be to change this:

if (lineItem) lineItem.querySelector(`[name="${name}"]`).focus();

to this

if (lineItem && lineItem.querySelector(`[name="${name}"]`)) lineItem.querySelector(`[name="${name}"]`).focus();

This seems to be working fine with the mentioned fix!