Allow Adding to Wishlist from the Product List Page #2
Conversation
bendvc
changed the title
There was a problem hiding this comment.
Wishlist product quantity not being updated after adding a product that already existed on the wishlist.
If the shopper has a product already added to the wishlist, the shopper navigates as a Guest shopper and adds the same product. After going through the login flow, the notification "1 item added to wishlist" is displayed, but the quantity of the product in the wishlist is not updated.
(Same happens when the shopper clicks the PDP "Add to wishlist button" of a product already added to the Wishlist)
Hey @adamraya, Thanks for the feedback. We are currently allowing adding the same item to wishlist, this will make the quantity increase for that item, which can be seen in the wishlist page. I will have a look at the wishlist page to make sure the number is shown correctly |
|
UX/UI Review
|
There was a problem hiding this comment.
- Error when the user tries to add products to the Wishlist from the PDP:
{
"title": "Product List Product Id Missing",
"type": "https://api.commercecloud.salesforce.com/documentation/error/v1/errors/product-list-product-id-missing",
"detail": "The product ID is missing."
}
Steps to reproduce:
- Navigate to any PDP. e.g. http://localhost:3000/en/product/25518837M?color=JJ908XX&size=9LG&pid=701642873334M
- Choose the variant of the product.
- Click the "Add to wishlist" button.
- Adding multiple products to the Wishlist from the PLP shows a warning in the browser console:
Warning: Encountered two children with the same key, `something went wrong. try again!-error`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
- Clicking quickly (before the last Toast disappers) the heart icon on the product tile in the PLP to add/remove the product from the Wishlist shows Toasts not disappearing:
The Wishlist page http://localhost:3000/en/account/wishlist doesn't load when the Wishlist has more than 25 items, showing the network error:
{
"title": "Bad Request",
"type": "https://api.commercecloud.salesforce.com/documentation/error/v1/errors/validation",
"detail": "Maximum number of products you can request in one call is 25."
}
packages/pwa/app/hooks/use-toast.js
Outdated
| @@ -33,7 +36,7 @@ export function useToast() { | |||
| variant = 'subtle', | |||
| isClosable = true | |||
| }) => { | |||
| const toastId = `${title}-${status}`.toLowerCase() | |||
| const toastId = `${title}-${status}-${id}`.toLowerCase() | |||
There was a problem hiding this comment.
The id has always the value undefined when clicking the "Add to wishlist" button on the PDP.
| * Callback function to be invoked when the user removes item to wishlist | ||
| */ | ||
| onRemoveWishlistClick: PropTypes.func, | ||
| isWishlistLoading: PropTypes.func |
There was a problem hiding this comment.
Small warning: react_devtools_backend.js:2842 Warning: Failed prop type: Invalid prop isWishlistLoading of type boolean supplied to ProductTile, expected function.
There was a problem hiding this comment.
Looks good @alexvuong, thanks for dealing with those async Toast events!
|
@alexvuong @adamraya @bendvc I'm surprised how much complexity we added to individual pages just to enable wishlist, I'd imagine it will be very very hard for developers to ramp up and make changes on these wishlist related code, as a result, devs will have a very high chance of just ripping all the code and start fresh, as Mobify we've made that mistake in the past. We should think about modularize the code, or making architecture/ pattern changes to avoid having to add hundreds of lines of code to individual pages (PDP, PLP, cart, etc...). :( IMO, it is really important to keep those main pages clean and simple.
Again, wishlist related logic should be encapsulated in a single module like |
During the story I worked on, the duplicate code path because of sometimes using the queue and sometimes not stuck out to me. I think the biggest, quickest win would be to talk through either eliminating it or I think more likely, always using it. |
JIRA:
Linked PRs: (links to corresponding PRs, optional)
How to test-drive this PR
Changes
Todos
General
Backwards Compatibility
Accessibility Compliance
You must check off all items in one of the follow two lists:
or...
Documentation