¶ Feature Description
The Wishlist is an own-managed list of desired products per customer that can be administrated in the Store by a right-side drawer similar to the Cart UI. It can also be managed via API for headless models.
¶ Spec Details
- Feature available only for logged in customers, which includes employees for B2B and B2B2C business schemas.
- Not available for other kind of Streto users (guests, operators, roots).
- By default, each customer user has an empty wishlist.
- Each wishlist can be managed by the owner, through the Store UI (besides the API access which gives availability for headless clients).
- The available operations over a wishlist are:
- Get the own wishlist (with support for pagination and sorting)
- Add an item to the wishlist
- Remove an item from the wishlist
¶ UI/UX
The idea is to reuse the existing wishlist UI components provided by default by Vue Storefront Next.
There are two set of changes to perform for the UI:
¶ Update Existing UI
- Change "My wishlist" to "My Wishlist" so it matches the cart writing style.
- Remove the total of items element.
- Remove the total price element.
- Show empty wishlist message
¶ Behavior
-
Header Wishlist Icon
- The Wishlist icon in the header has two states:
Empty Wishilist (empty icon):
Wishlist with items (filled icon with items count):
- Guest users will always see the Empty Wishilist state.
- When clicked, the Wishlist Panel is opened
- The Wishlist icon in the header has two states:
-
Wishlist Panel
- The Wishlist Panel show the content of the wishlist with the default sorting.
- If it is empty, it displays the message shown in Update Existing UI section.
- If not empty, show the list of items returned by the API.
- If the user is a guest, the Wishlist will look always empty.
- When not all the items can't be seen in the screen, the list is scrollable.
- The items in the list has the same information as in the Cart, expcept the configurable options. Configurable items added to the Wishlist doesn't specify variants.
-
Add-to/Remove-from Wishlist
- Items can be added to or removed from the wishlist using the icon present in:
- Products in Category PLP in grid view mode
- Products in Search PLP (search results page) in grid view mode
- Products in Search suggestions
- Items can also be removed by using the "x" button in the wishlist item itself.
- The icon on each product will have two possible states:
- Item not in Wishlist
When clicked, if the user is logged in, the item is added. If the user is a guest, the login/sing-up form is opened.
- Item already in Wishlist
When clicked, if the user is logged in, the item is removed. If the user is a guest, the login/sing-up form is opened.
- Item not in Wishlist
- Items can be added to or removed from the wishlist using the icon present in:
¶ API
¶ Services
The wishlists will have a global maximum number of items "max_wishlist_length", configurable via environment variable, defaulting to 100.
Some API specs details are subject to changes on implementation.
¶ Get Wishlist
Returns the customer's wishlist items including product information.
- The items are returned by default sorted by position first, and then by date of addition, both in ascending order.
- The list will have a maximum of
max_wishlist_lengthitems. - The items on each wishlist are unique (no repeated products are permitted).
- If for any reason the available items in the wishlist are more than
max_wishlist_length, only the firstmax_wishlist_lengthitems are returned, ignoring the rest.
Spec
- Endpoint:
GET /wishlists/mine/items - Responses:
200Array of wishlist items with product information.
[ { "id": "Unique id of the item", "productId": "The id of the product", "createdAt": "The addition date and time", "companyId": "The company id", "customerId": "The customer Id of the wishlist owner", "additionalInformation": { "product": { "name": "The product name", "sku": "The product SKU", "imageUrl": "Full image URL", "price": { "price": 1000, "currency": "usd" } } } }, ... ]
¶ Get Count
Returns the quantity of items in the customer's wishlist.
- If for any reason the available items in the wishlist are more than
max_wishlist_length, the valuemax_wishlist_lengthwill be returned.
Spec
- Endpoint:
GET /wishlists/mine/items/count - Responses:
200An object with the quantity of items.
{ "count": 10 }
¶ Add to Wishlist
Adds the specified product to the customer's wishlist.
- If the item was already in the wishlist, the service can either throw an error, or ignore it (depending on the parameter
ignoreIfExists). - If the wishlist had already reached the maximum permited (
max_wishlist_length), a descriptive error is returned.
Spec
- Endpoint:
POST /wishlists/mine/items - Parameters:
ignoreIfExists: In query string.booleandefaulting tofalse. Specified if the service should return success (200) or error response (400) when the product is already in the wishlist.
- Request body:
{ "productId": "The Id of a product" } - Responses:
201Item added OK.
{ "id": "Unique id of the item", "productId": "The id of the product", "createdAt": "The addition date and time", "companyId": "The company id", "customerId": "The customer Id of the wishlist owner", "additionalInformation": { "product": { "name": "The product name", "sku": "The product SKU", "imageUrl": "Full image URL", "price": { "price": 1000, "currency": "usd" } } } }200The item was already in the list and the parameterignoreIfExistswas specified astrue. The response body is the existig item, in the same format as in the201response.400Item could not be added. The reason could be that the product was already in the list and the parameterignoreIfExistsis false, or because the wishlist reached the maximum lengthmax_wishlist_length. Response body has the standard Streto API Response Error format.
¶ Remove from Wishlist
Removes the specified product from the customer Wishlist.
- If the item was not in the wishlist, the service can either throw an error, or ignore it (depending on the parameter
ignoreIfNotExists).
Spec
- Endpoint:
DELETE /wishlists/mine/items/{itemId} - Parameters:
ignoreIfNotExists: In query string.booleandefaulting tofalse. Specified if the service should return success (200) or error response (404) when the product is not in the wishlist.
- Responses:
204Item deleted OK or there was no item owned by the user with the specified id andignoreIfNotExistswas specified astrue.404Having the parameterignoreIfNotExistsasfalse, the item was not found with the specified id or it is not owned by the user making the request.
¶ Toggle Wishlist Item
Toggles the state of a product in the wishlist: If the product was already in the list, it is removed from it, otherwise it is added.
- If the toggling operation results in a potencial addition, but the wishlist had already reached the maximum permited (
max_wishlist_length), a descriptive error is returned.
Spec
- Endpoint:
POST /wishlists/mine/items/by-product-id/{productId}/toggle - Request body: None
- Responses:
201Item added OK.
{ "id": "Unique id of the item", "productId": "The id of the product", "createdAt": "The addition date and time", "companyId": "The company id", "customerId": "The customer Id of the wishlist owner", "additionalInformation": { "product": { "name": "The product name", "sku": "The product SKU", "imageUrl": "Full image URL", "price": { "price": 1000, "currency": "usd" } } } }204Item deleted OK (no body).400Item could not be added because the wishlist reached the maximum lengthmax_wishlist_length. Response body has the standard Streto API Response Error format.
¶ Links
- JIRA ticket to track this feature discovery: LEC-1402