The modal "add to cart confirmation" should not displayed on error #41

jf-viguier · 2019-04-10T15:39:46Z

I've juste added a test to disable launching of showModal if the add to cart request (event) return an error.

EDIT: to be tested with PrestaShop/PrestaShop#14033

…uest return an error I've juste added a test to disable launching of showModal if the add to cart request (event) return an error.

matks · 2019-04-11T09:18:54Z

Looks good 👍 do you have examples of errors that still open the modal ? Maybe we should notify the customer that something wrong happened, but it depends of what went wrong.

If the server failed to answer the request, I guess in debug mode we should display the error, else only say something like "an error happened, please try again". If however it's a valid reason like "sorry ! someone else got the last item, this product is now out of stock !" we can always display the error message.

What do you think ?

jf-viguier · 2019-04-11T09:42:38Z

How to reproduce : load product page, put the product out of stock, and add it to the cart without reloading
It a better way to display errors, of course, but I suggest to display the errors in the page (juste like in customer subscription process), not in a modal that has to be closed.
There is a PR that display errors here in a modal :
FO: add error message modal display #24

marionf · 2019-04-11T14:34:33Z

@jf-viguier

Thank you for your issue but it's a duplicate of: PrestaShop/PrestaShop#11631 so I close it.
Please, follow this issue and add a comment on it if you have more details to bring :)

marionf · 2019-04-11T14:36:01Z

Oops, sorry I was a little too fast and didn't see that is a PR :)

jf-viguier · 2019-04-11T15:10:47Z

OK thanks @marionf to keep it open, it's a major issue for me.
My PR is not so good but it's a first step.

marionf · 2019-04-11T16:00:08Z

@jf-viguier

I just tested your PR

The modal isn't displayed anymore if the product is out of stock and the product page is not refreshed.
So, it's like add to cart button didn't do anything, but the product is anyway added to the cart

Video: https://drive.google.com/file/d/1HF5gts5RwANbmQ4zeTWCr38wao0lsSbg/view?usp=sharing

jf-viguier · 2019-04-11T16:22:38Z

It's not what I have but I'm not in 1.7.6. Have you checked that the ajax cart controller call returns an error ?

jf-viguier · 2019-04-11T21:19:38Z

@marionf I've installed the develop branch and tested my pr :
http://creabilis.com/tmp/addtocartok.jpg
It works for me : I have the modal when success = true and no modal when success = false
Please check with the inspector that the add to cart xhr call return false and that out of stock order is refused.

marionf · 2019-04-12T07:35:04Z

@jf-viguier

I well have the error and no modals when the product is out of stock, but it's still added to the cart

We would like, like describe here, display the out of stock message when you click on "add to cart" and the product shouldn't be added to the cart.

Do you think that you could improve your PR this way ?

jf-viguier · 2019-04-12T13:01:10Z

I've posted another issue : the out of stock product shouldn't be added to the cart : PrestaShop/PrestaShop#13374

jf-viguier · 2019-04-12T15:07:07Z

@marionf I'll try to improve it to match @colinegin idea PrestaShop/PrestaShop#11631 (comment)

@colinegin

As suggested by @colinegin the errors are now diplayed under the add to cart button : PrestaShop/PrestaShop#11631 (comment)

jf-viguier · 2019-04-17T21:25:24Z

@marionf I've just commited the improvement.
Can you add it in the next release ?

marionf · 2019-04-18T14:56:20Z

Thank you for this improvement @jf-viguier

Do you think it's possible to display the "label of out of stock products with denied backorders" instead and disable the add to cart button ?

jf-viguier · 2019-04-18T15:57:24Z

It's already like this if you load the page without stock. My PR simply display the error returned by the add to stock ajax request (it was like that in 1.6).
The error is here an out of stock error but it can be many more other errors : disabled product, personalization uncomplete, ...
Modules can add errors too (it's my concern)

matks · 2019-04-18T20:44:38Z

@marionf This PR will display the error message returned by prestashop when the "add to cart" fails. So if we want to display the label of "out of stock products with denied backorders", we need prestashop to return this label in the error message, and this should do the job. I think this needs a modification in the Core 🤔, doesn't it @jf-viguier ?

About disable the add to cart button : it's doable indeed. However this requires to modify the page content using Javascript. I'm wondering if this code is not doing things outside of the module's scope 🤔...

This topic is borderline anyways 😅

matks · 2019-04-19T08:08:23Z

ps_shoppingcart.js

+          });
+        }
+        if (event && event.resp && event.resp.hasError) {
+          $('#product-availability').html('<i class="material-icons product-unavailable">&#xE14B;</i>' + event.resp.errors.join('<br/>'));


It's not good to inject this HTML here as

it mixes JS and HTML, that can make the code hard to debug and maintain

if the product page styling is modified, this code will need to be modified accordingly (and I'm sure we will forget)

However I understand that this is the only way because there is not better way available.

What about we provide a better way in the Core ? Maybe a JS function displayErrorMessageUnderAddToCartButton(errorMessage) ? This would be an available function in Classic Theme, and it could be called by modules (here, by ps_shoppingcart).

Any feedback @Quetzacoalt91 @eternoendless ?

I agree, it's the only way without impact on PS core,
The html part just add a material icon, it's not dependant on the product page styling.

Please notice that the add to cart ajax call can return more than one error.

Disabling the add to cart button is releveant in out of stock product but what about adding extra stok quantity ? The button souldn'nt not be desabled if asked quantity is above stock.

marionf · 2019-04-19T08:14:22Z

This error message is too long for the product page, that's why we would like to display the out of stock message and disable the add to cart button.
I tested with disabled product and personalization uncomplete, it's all good in this 2 cases 👍

If a PR on the core is needed, I can validate this one but we should do the other PR before releasing the new version of ps_shoppingcart

Check that event.resp exists before testing event.resp.hasError. This fix is required for deletint product in cart

matks · 2019-05-15T15:51:57Z

Sorry for the wait @jf-viguier @marionf, we got very busy with the 1.7.6 beta 😄

So, in order to sum it up, here's what I suggest:

I'll make a PR on the Core, it will do 2 things:

send the right error message using "label of out of stock products with denied backorders" when someone tries to add an out-of-stock product in order to comply with @marionf request
provide a new JS function displayErrorMessageUnderAddToCartButton(errorMessage) that modules will be able to use to insert their error message in the right place*

When this PR is done and merged, we can update @jf-viguier PR to use displayErrorMessageUnderAddToCartButton, @marionf can validate the behavior and the bug will be fixed nicely 😄.

*To do so I have to check how current JS functions provided by the theme work. It might require to create a new custom prestashop event to be emitted by module.

I'd like a confirmation that this looks suitable indeed @Quetzacoalt91 (as I have never updated the Core theme before) ?

jf-viguier · 2019-05-16T18:21:07Z

It's sound good to be, thanks

matks · 2019-05-30T21:07:43Z

I made PR PrestaShop/PrestaShop#14033 to provide a new FO prestashop event "showErrorNextToAddtoCartButton" that you use to display an error message next to "add to cart" button:

prestashop.emit('showErrorNextToAddtoCartButton', { errorMessage: event.resp.errors.join('<br/>')});

So we can avoid modifying html directly

@marionf I'm wondering if we should really use "label of out of stock products with denied backorders" message here. This message is intended to be displayed to say something like "out of stock, sorry come back later". Right now the message being returned is "The item %product% in your cart is no longer available in this quantity. You cannot proceed with your order until the quantity is adjusted."
(used in CartController) and I'm thinking it explains better what happened IMO 🤔

matks · 2019-05-30T21:08:58Z

Another thing: if we introduce and use this new JS event, then next version of ps_shoppingcart will only work with PS latest versions. People wont be able to use it on an old 1.7 version. Is that an issue ?

ping @Quetzacoalt91 @PierreRambaud

Quetzacoalt91 · 2019-05-31T08:15:49Z

From my understanding, that would be an improvement available from PS 1.7.y.x

On older versions the module will still work as before, which is fine for me.

marionf · 2019-06-03T15:20:14Z

We can modify the message with something better.

@matks Just to be sure, it will be a new message ? That will not changed the message displayed in the cart ?

We can have 2 cases:

Enter 5 in quantity field, change product quantity in BO for 3, return on the product page and click on add to cart. In this case, we can:

Add 3 products to the cart and display a message like "Only 3 products have been added to the cart because there isn't enough quantity in stock"
Add 0 products to the cart and display a message like "The product is no longer available in this quantity. Please adjust quantity"

Enter 5 in quantity field, change product quantity in BO for 0, return on the product page and click on add to cart. In this case, 0 products should be added to the cart and we can display a message like "This product is out of stock"

matks · 2019-06-03T16:01:02Z

We can modify the message with something better.

@matks Just to be sure, it will be a new message ? That will not changed the message displayed in the cart ?

We can have 2 cases:

Enter 5 in quantity field, change product quantity in BO for 3, return on the product page and click on add to cart. In this case, we can:

Add 3 products to the cart and display a message like "Only 3 products have been added to the cart because there isn't enough quantity in stock"

Add 0 products to the cart and display a message like "The product is no longer available in this quantity. Please adjust quantity"

Enter 5 in quantity field, change product quantity in BO for 0, return on the product page and click on add to cart. In this case, 0 products should be added to the cart and we can display a message like "This product is out of stock"

According to the code (but it would be better to check), for case 1 message is currently:
"The item %product% in your cart is no longer available in this quantity. You cannot proceed with your order until the quantity is adjusted."
while for case 2 message is "The minimum purchase order quantity for the product %product% is %quantity%."

That will not changed the message displayed in the cart

Do you mean in the modal ?

marionf · 2019-06-05T12:38:06Z

@matks

So, we can change "The item %product% in your cart is no longer available in this quantity. You cannot proceed with your order until the quantity is adjusted." for "The product is no longer available in this quantity." on the product page.

And keep "The item %product% in your cart is no longer available in this quantity. You cannot proceed with your order until the quantity is adjusted." in the cart like currently.

…tml directly

matks · 2019-06-06T12:04:38Z

I updated both this PR and the one from the Core:

this PR was updated to use the new JS event from the Core
the PR on the Core was updated to follow @marionf requirements

marionf · 2019-06-06T13:25:58Z

@matks

By testing the 2 PRs at the same time, I have the message below

matks · 2019-06-06T13:38:31Z

@marionf It's strange, it's the old message o_O
I have the new one

marionf · 2019-06-06T14:59:01Z

That's weird, I deleted all the caches and I'm in private navigation

@sarahdib has "The product is no longer available in this quantity." in EN-US and "L'article de votre panier (Mug Today is a good day) n'est plus disponible dans cette quantité. Vous ne pouvez pas continuer votre commande avant d'avoir ajusté la quantité." in FR

sarahdib · 2019-06-06T17:26:28Z

@marionf can you try to upgrade the language ?

sarahdib · 2019-06-07T08:33:27Z

@matks we found a wired case with @marionf
if the product with 0 quantity is already in the cart -> new message is displayed
if the product with 0 quantity isn't in the cart -> old message is displayed

matks · 2019-06-07T08:33:52Z

@matks we found a wired case with @marionf
if the product with 0 quantity is already in the cart -> new message is displayed
if the product with 0 quantity isn't in the cart -> old message is displayed

Tricky 😄 I'll handle it

matks · 2019-06-11T15:11:07Z

@sarahdib Cant reproduce 😐 I have the new message in both usecases

Are you sure it depends on the product being already in the cart ? I think there's another condition, somehow related to how much there is in the cart, how much is available, an also the "out of stock mode"

Tested:

prestashop on develop (because PR on Core has been merged)
this module, using this branch

matks · 2019-06-11T15:15:31Z

But I see the old error message on the Cart page

matks · 2019-06-11T16:03:19Z

Found the reason behind this behavior with @marionf : I was testing on a product with combinations, she was testing with a product without combinations

marionf · 2019-06-11T16:09:29Z

And there is the same probem with a virtual product

matks · 2019-06-14T13:19:08Z

New PR on the core: PrestaShop/PrestaShop#14214

matks · 2019-07-18T09:04:47Z

@marionf Can we validate this PR now that PrestaShop/PrestaShop#14214 has been approved ?

marionf · 2019-07-18T09:54:40Z

All good @matks

matks · 2019-07-18T10:06:43Z

Thanks @jf-viguier that's one more major bug down the road !

The modal "add to cart confirmation" is not displayed if the ajax req…

579c18b

…uest return an error I've juste added a test to disable launching of showModal if the add to cart request (event) return an error.

marionf closed this Apr 11, 2019

marionf reopened this Apr 11, 2019

jf-viguier mentioned this pull request Apr 11, 2019

Bug : Add to cart success without stock PrestaShop/PrestaShop#11631

Closed

Display add to cart errors

b1170a2

As suggested by @colinegin the errors are now diplayed under the add to cart button : PrestaShop/PrestaShop#11631 (comment)

matks reviewed Apr 19, 2019

View reviewed changes

Bug fix in delete product in cart

6ec0d64

Check that event.resp exists before testing event.resp.hasError. This fix is required for deletint product in cart

matks mentioned this pull request May 15, 2019

Out of stock product is still added to the cart PrestaShop/PrestaShop#13374

Closed

matks mentioned this pull request May 30, 2019

Introduce FO JS event showErrorNextToAddtoCartButton to handle shoppingcart error returns PrestaShop/PrestaShop#14033

Merged

Quetzacoalt91 changed the base branch from master to dev June 5, 2019 12:15

Use showErrorNextToAddtoCartButton PS JS event instead of modifying h…

d930483

…tml directly

matks approved these changes Jun 6, 2019

View reviewed changes

matks mentioned this pull request Jun 14, 2019

Handle shoppingcart error returns properly - part 2 PrestaShop/PrestaShop#14214

Merged

marionf added QA ✔️ and removed QA ✔️ labels Jul 18, 2019

matks merged commit 6389511 into PrestaShop:dev Jul 18, 2019

jf-viguier deleted the patch-1 branch July 18, 2019 15:42

matks mentioned this pull request Aug 30, 2019

No carrier available in checkout with free shipping cart rule PrestaShop/PrestaShop#11172

Closed

matks mentioned this pull request Oct 7, 2019

FO: add error message modal display #24

Closed

matks mentioned this pull request Oct 16, 2019

Release 2.0.3 #51

Merged

matks changed the title ~~The modal "add to cart confirmation" is not displayed on error~~ The modal "add to cart confirmation" should not displayed on error Nov 4, 2019

The modal "add to cart confirmation" should not displayed on error #41

The modal "add to cart confirmation" should not displayed on error #41

Conversation

jf-viguier commented Apr 10, 2019 • edited by matks

matks commented Apr 11, 2019

jf-viguier commented Apr 11, 2019

marionf commented Apr 11, 2019

marionf commented Apr 11, 2019

jf-viguier commented Apr 11, 2019

marionf commented Apr 11, 2019 • edited

jf-viguier commented Apr 11, 2019

jf-viguier commented Apr 11, 2019

marionf commented Apr 12, 2019

jf-viguier commented Apr 12, 2019

jf-viguier commented Apr 12, 2019

jf-viguier commented Apr 17, 2019 • edited

marionf commented Apr 18, 2019

jf-viguier commented Apr 18, 2019

matks commented Apr 18, 2019 • edited

matks Apr 19, 2019

Choose a reason for hiding this comment

jf-viguier Apr 19, 2019

Choose a reason for hiding this comment

marionf commented Apr 19, 2019 • edited

matks commented May 15, 2019

jf-viguier commented May 16, 2019

matks commented May 30, 2019

matks commented May 30, 2019

Quetzacoalt91 commented May 31, 2019

marionf commented Jun 3, 2019 • edited

matks commented Jun 3, 2019

marionf commented Jun 5, 2019

matks commented Jun 6, 2019

marionf commented Jun 6, 2019

matks commented Jun 6, 2019

marionf commented Jun 6, 2019

sarahdib commented Jun 6, 2019

sarahdib commented Jun 7, 2019

matks commented Jun 7, 2019

matks commented Jun 11, 2019 • edited

matks commented Jun 11, 2019

matks commented Jun 11, 2019

marionf commented Jun 11, 2019

matks commented Jun 14, 2019

matks commented Jul 18, 2019

marionf commented Jul 18, 2019

matks commented Jul 18, 2019

jf-viguier commented Apr 10, 2019 •

edited by matks

marionf commented Apr 11, 2019 •

edited

jf-viguier commented Apr 17, 2019 •

edited

matks commented Apr 18, 2019 •

edited

marionf commented Apr 19, 2019 •

edited

marionf commented Jun 3, 2019 •

edited

matks commented Jun 11, 2019 •

edited