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

Fix: when you edit the product qty to zero, the product won't be removed from the cart #542

Merged
merged 4 commits into from
Sep 7, 2023

Conversation

tblivet
Copy link
Contributor

@tblivet tblivet commented Aug 10, 2023

Questions Answers
Description? Correct the issue 536
Type? bug fix
BC breaks? no
Deprecations? no
Fixed ticket? Fixes #536
Sponsor company @PrestaShopCorp
How to test? You can refer to the issue

@matks matks changed the title fix: when you edit the product qty to zero, the product won't be removed from the cart Fix: when you edit the product qty to zero, the product won't be removed from the cart Aug 14, 2023
matks
matks previously approved these changes Aug 14, 2023
Copy link
Contributor

@matks matks left a comment

Choose a reason for hiding this comment

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

Looks good to me 👍

ping @ga-devfront for 2nd opinion

@SharakPL
Copy link
Contributor

SharakPL commented Aug 15, 2023

IMO it would be better to simply disallow changing quantity to 0. This can be done by mistake and then the product would have to be searched again. If a user wants to remove the product from the cart then the Remove button should be clicked.

@Hlavtox
Copy link
Contributor

Hlavtox commented Aug 15, 2023

@SharakPL That was how it was before. It should throw an error message "Minimal quantity for sale is 1".

Also, it's a bit incosistent. What does it do if minimum quantity for sale is higher than 1? 🤔

I am a bit torn apart for the expected behavior here.

@sallemiines sallemiines self-assigned this Aug 15, 2023
sallemiines

This comment was marked as outdated.

sallemiines
sallemiines previously approved these changes Aug 15, 2023
Copy link

@sallemiines sallemiines left a comment

Choose a reason for hiding this comment

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

Hello @tblivet

Thanx for the PR ! LGTM QA ✔️

develop_prs.mp4

Thank you 🚀

@SharakPL
Copy link
Contributor

@sallemiines could you please check again with product that has minimum order quantity higher than 1? It doesn't look like it's covered.

Copy link
Member

@FabienPapet FabienPapet left a comment

Choose a reason for hiding this comment

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

blocking as we need to check before merge

@nicosomb nicosomb added this to the Beta milestone Aug 15, 2023
Copy link

@MhiriFaten MhiriFaten left a comment

Choose a reason for hiding this comment

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

Merging is blocked, I will remove the waiting for QA label until the changes requests are resolved.

Copy link
Contributor

@kpodemski kpodemski left a comment

Choose a reason for hiding this comment

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

I wanted to agree with @Hlavtox and @SharakPL, but I've just tested it on PS 8.1 with Classic, and it works like this:

The behavior should be as follows:

  1. If you change from 1 to 0 using arrows, the product is deleted.
  2. If you change from 1 to 0 using the input value, the product is deleted.
  3. If you have a product with a minimal quantity set to 2 and you change it to 1, you have an error.

Why does it work in Classic, and it doesn't work with Hummingbird?
What's the difference between Classic and Humminbird?

If you have 1 unit in your shopping cart and you change it to 0 (either by using arrows or input), the request goes to delete action. In Hummingbird, it always goes to the update action, which is wrong.

This PR almost fixes the issue but there's a problem with getting a minimal quantity which could be different than 1.

@kpodemski
Copy link
Contributor

@tblivet Related function in Classic is inside:

themes/classic/_dev/js/cart.js in updateProductQuantityInCart function.

if (targetValue === '0') {
      $target.closest('.product-line-actions').find('[data-link-action="delete-from-cart"]').click();
    } else {
      $target.attr('value', targetValue);
      sendUpdateQuantityInCartRequest(updateQuantityInCartUrl, getRequestData(qty), $target);
    }

It looks that instead of checking minimal quantity you should only check whether the target value is equal to 0.

@SharakPL
Copy link
Contributor

Is there a place for improvements or does it have to be done like in Classic?

@kpodemski
Copy link
Contributor

@SharakPL what would be an improvement in your opinion?

@SharakPL
Copy link
Contributor

SharakPL commented Aug 23, 2023

To be more clear on what each action does. Decreasing the amount shouldn't delete the product from the cart.
If the requested amount is lower than the minimum required for order then it should throw an error:

The minimum amount required for order of this product is X. If you want to remove the product completely from your cart then use the Remove button

Or at least change [ - ] to [ X ] or [ trash_icon ] to indicate that next use of this button will remove it completely instead of just decreasing the amount. Especially useful if the minimum required amount is higher than 1.

@kpodemski
Copy link
Contributor

kpodemski commented Aug 23, 2023

The one improvement I see in this change is that if one makes a mistake and changes the value below 1, it could save the cart. I've checked a few stores, and when there are arrows, changing below 1 is forbidden. There's no request, which could also be a good thing.

Something to be decided by @PrestaShop/product-council :)

To summarize:

  • If you change the value below 1, it should inform about minimal quantity or doesn't do anything.

@SharakPL
Copy link
Contributor

I've checked a few stores, and when there are arrows, changing below 0 is forbidden.

Did you mean "below 1"?

@kpodemski
Copy link
Contributor

@SharakPL yes, I edited the message

@RosaBenouamer
Copy link

Hello,
On Amazon :
image
You have a text next to 0 which precise that by clicking on 0 you will suppress the article
image
I find it's quite a good idea.
Concerning the case where you have a minimum of quantity to order to validate it. I imagine for instance, if you have to order minimum of 30. The list in the arrow will be 0 to let to suppress then directly 30,31,32...

@Hlavtox
Copy link
Contributor

Hlavtox commented Aug 24, 2023

@RosaBenouamer There needs to be a number input, dropdown for selecting count is not good UX. :-)

const targetItem = eventTarget.closest('.cart__item');
const targetValue = targetItem?.querySelector('.js-cart-line-product-quantity') as HTMLElement | null;

if (targetValue && targetValue.getAttribute('value') === '1' && targetValue.getAttribute('min') === '1') {
Copy link
Contributor

Choose a reason for hiding this comment

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

Be careful the min quantity can also be 0 which should be handled like 1, meaning the feature is disabled there is no minimum
Except that I think the original behaviour from classic is consistent and should be used as a base as it's a common way to handle this in many e-commerce shops

tldr; let's stay iso functional

Copy link
Contributor

Choose a reason for hiding this comment

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

Ah and one other comment you seem to be listening to the click event, so only the arrows clicking but the value can also be edited via keyboard, so you should either listen to the keydown event as well or maybe easier simply the change event?

Unless you need to listen to the specific event to cancel it when the value is not the minimum one?

@tblivet tblivet dismissed stale reviews from sallemiines and matks via fd55b60 August 31, 2023 16:07
@tblivet
Copy link
Contributor Author

tblivet commented Aug 31, 2023

Hello 👋 With @ga-devfront we have update the PR we now have this behavior :

  • When we click on decrement to go from 1 to 0 -> product is deleted
  • When we click on decrement to go from 5 to 4 when product has minimum qty of 5 -> product is not deleted error message appear and qty remain the same.
  • When we change the quantity manually (without + or - ) to 0 -> product is deleted
  • When we change the quantity manually (without + or - ) to 0 and the product have minimum qty -> product is not deleted error message appear and qty remain the same.

@ga-devfront
Copy link
Collaborator

No response from the people who blocked the PR, additions were made and the behavior seems to be the most common to web standards:
Impossible to go below the minimum orderable unless it is 0 in which case the product is deleted.
I pass the PR to Waiting for QA

Comment on lines +45 to +61
if (targetValue) {
if (eventTarget.classList.contains('js-increment-button')) {
if (targetValue.dataset.mode === 'confirmation' && Number(targetValue.value) < 1) {
if (removeButton) {
removeButton.click();
}
}
}

if (eventTarget.classList.contains('js-decrement-button')) {
if (targetValue.getAttribute('value') === '1' && targetValue.getAttribute('min') === '1') {
if (removeButton) {
removeButton.click();
}
}
}
}
Copy link
Contributor

@davidglezz davidglezz Sep 6, 2023

Choose a reason for hiding this comment

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

Suggested change
if (targetValue) {
if (eventTarget.classList.contains('js-increment-button')) {
if (targetValue.dataset.mode === 'confirmation' && Number(targetValue.value) < 1) {
if (removeButton) {
removeButton.click();
}
}
}
if (eventTarget.classList.contains('js-decrement-button')) {
if (targetValue.getAttribute('value') === '1' && targetValue.getAttribute('min') === '1') {
if (removeButton) {
removeButton.click();
}
}
}
}
if (targetValue && removeButton) {
if (eventTarget.classList.contains('js-increment-button')) {
if (targetValue.dataset.mode === 'confirmation' && Number(targetValue.value) < 1) {
removeButton.click();
}
}
if (eventTarget.classList.contains('js-decrement-button')) {
if (targetValue.getAttribute('value') === '1' && targetValue.getAttribute('min') === '1') {
removeButton.click();
}
}
}

The code can be simplified, the first if avoid 2 ifs.

All could go in an single if but I wouldn't know how readable it would be.

@djoelleuch djoelleuch self-assigned this Sep 6, 2023
Copy link

@djoelleuch djoelleuch left a comment

Choose a reason for hiding this comment

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

Hello @tblivet ,
LGTM ,
If you change from 1 to 0 using arrows, the product is deleted. ✔️
If you change from 1 to 0 using the input value, the product is deleted. ✔️
If you have a product with a minimal quantity set to 2 and you change it to 1, you have an error.
✔️
[but i think that the error message disappear too fast ]

Dashboard.Prestashopdev.mp4

It's QA approved ✔️
thank you !

@MatShir MatShir dismissed stale reviews from FabienPapet and kpodemski September 7, 2023 10:08

I'm dismissing Fabien. His alert was listened

@nicosomb nicosomb merged commit e669588 into PrestaShop:develop Sep 7, 2023
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

[Shopping Cart] when you edit the product qty to zero, the product won't be removed from the cart