2 min read

Wishlist

The Wishlist is an optional feature, that most apps include, to presents a paged list of items that the user has wishlisted. The Wishlist API supports wishlisting using any combination of product, variant and listing identifiers, and multiple wishlists (by id).

overview

The Wishlist can be cleared which first prompts the user to confirm.

# Wishlist
wishlist
wishlist?is_modal=true

The deeplink will attempt to switch to the Wishlist tab, unless modal, before pushing the screen.

Set Up

The Wishlist is set to listing level by default. It should be configured to the level matching the BE capability as part of its initial set up.

The product catalogue image ratio should be set as part of app set up to preserve the right UI area for images.

Dynamic Content

The Wishlist supports the following Dynamic Content slots:

SlotVersionWhere?
scroll-topSS24Before all other scroll content.

Adding additional slots to the table view is fairly easy but may not work well with pagination.

Levels

Wishlist level refers to the information of a product that is stored in the user's wishlist. It affects where the WishlistWidget can show in the app and what features are available.

The level can be set to any combination of:

  • The master .product identifier to identify a product such as 'Floral Dress'. This does not identify a SKU.
  • The .listing identifier to identify a style of a product as listed on the PLP such as 'Red Floral Dress'. This does not identify a SKU.
  • The .variant identifier to identify a SKU such as 'Size 8 Red Floral Dress'.

Variants

When wishlisting only at variant level the user must select a SKU to add to the Wishlist. This limits where we can show the WishlistWidget as listings (that we present on the PLP, Swipe to Like, and Carousels) do not have variant information. This also requires that the PDP uses the 'Inline Forms' template allowing the user to select a SKU upfront.

When used in combination with another wishlist level the other level takes precedent unless the UI specifies a variant.

Products and Listings

When wishlisting at either product or listing level the user does not need to select a variant. There are no limits to where we can present the WishlistWidget with these levels.

When set to product level items in the Wishlist present swatch selection. Changing swatches does not update the wishlist item but does affect the CartWidget by narrowing the variant selection.

Wishlist State

To maintain wishlist icons throughout the catalogue for the WishlistWidget and badge, the app uses local storage to cache the wishlist item identifiers. These are updated whenever the wishlist is retrieved or when the user changes the wishlist status of an item.

History

  • SS24: Added support and slot for Dynamic Content.