Add to cart alert behaviour

[aaronjudd]

Expected behavior

When I rapidly add multiple items to cart, I expect there to be some recurring updates in the "Add to Cart" slideout.

Actual Behavior

Formerly this was implemented using jQuery easing, which provided some queueing, and would display additional updates when additional items were added to the cart. Now using just CSS, we aren't getting additional updates

Steps to Reproduce the Behavior

Add item to cart, see slider. Add to cart again (and again, and again) and slide out will not appear

[abdulsemiu-atanda]

I'll reproduce this behavior and work on solving it over the next couple of days.

[abdulsemiu-atanda]

@aaronjudd reducing the slide out delay time from 4s to 0.4s somehow fixes this. Is there any reason why it was kept at 4s?

[brent-hoover]

The slideout delay is 4s so that the toast remains on the screen long enough for you to read it. You could probably reduce it some, but making it .4s is way too fast.

[aaronjudd]

@andela-aatanda agree with Brent, the goal here is a smooth visual effect that is noticeable and gives time for a user to see the action, this issue is not about the behaviour of adding one item, but the effect that occurs while you add more than one item and it's already slide out once.

[abdulsemiu-atanda]

Gotcha.

[abdulsemiu-atanda]

@zenweasel I was thinking if the Add To Cart button is deactivated pending the time the cart-alert goes back in this behavior will be prevented. Will deactivating the Add To Cart button be a behavior we'll want to have?

[rymorgan]

@zenweasel and I were talking this through and here's what we came up with.
When you click quickly to add to cart multiple times, it should update the original alert and restart the animation. It should count up and if it was starting to slide out it would start the time over again. So it’s always 4 seconds from the last time you clicked the add to cart button.

When it updates the alert, display a spinner. (you can use the same spinner we use on buttons like the complete payment button). Text should quick fade down, display spinner, and fade back up.

See rough mockup.

[abdulsemiu-atanda]

@rymorgan This put things in better perspective. Thanks