Source code

This app is no longer maintained by VTEX. This means support and maintenance are no longer provided.

Designed for B2C stores, the Wishlist app adds a heart icon to digital shelves and product details pages, allowing users to add their desired products to a wishlist.

Example of heart icons on a shelf.

Example of a heart icon on a product details page.

In addition, it generates a new route, /wishlist, under the My Account menu, creating a page that displays the items users added to the wishlist.

Example of a wishlist page.

1. Install the Wishlist app in the desired VTEX account by running vtex install vtex.wish-list in your terminal.
2. Open your Store Theme app directory in the code editor.
3. Add the Wishlist app to your theme's manifest.json file inside peerDependencies as shown below:

The Wishlist app can export two theme blocks when added as a dependency: add-to-list-btn and list-context.wishlist. These are responsible for adding the heart icon to other theme blocks and providing product data to build the /wishlist, which is also shared with the My Account page.

4. Add the add-to-list-btn block in the store.product template's children block list. For example:

5. Declare the add-to-list-btn block as a child of the product-summary.shelf blocks in your theme. For example:

6. Define the layout of the wishlist page

To define the wishlist page layout, add the wishlist.jsonc to your /store/blocks folder.

The wishlist.jsonc is a configuration file that defines how the store.wishlist interface for the /wishlist route is composed. See the example below:

You can use the example above in your project or customize it using other blocks.

7. Display the wishlist in My Account

To display the wishlist in My Account, add the plugins.json file to your theme's /store folder as follows:

8. Deploy your changes by following the instructions in the guide [Deploying a new app version]https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available).

If you want to configure the layout without the slider-layout dependency, you can use the list-context-renderer to wrap the product-summary.shelf. Learn more here.

Prop name	Type	Description	Default value
label	string	Changes the section menu label on the My Account page	Wishlist

There are a couple of URLs to read, search, and change data for the app:

To read the schema of the Wishlist app:

To GET all the wishlist data:

To search for a wishlist by user email:

To PATCH a wishlist to Master Data:

To DELETE a wishlist from Master Data:

To change the link of the toast message:

Prop name	Type	Description	Default value
toastURL	string	Changes the link of the toast message	/account/#wishlist'

To show a custom view if no product has been added to the wishlist:

Prop name	Type	Description	Default value
showViewEmptyList	boolean	Shows a custom view if no product has been added to the wishlist	false

To apply CSS customizations to this and other blocks, follow the instructions in Using CSS handles for store customization.

CSS handles
columnText
columnThumb
linkText
linkThumb
listItemsContainer
listName
listTab
productDescription
productItemRow
productTitle
thumb
wishlistContainer
wishlistIcon
wishlistIconContainer
emptyMessage

This app can be used in a Personal Identifiable Information (PII) compliant account. In this case, shopperId is the Profile ID.

If you are changing the type of the account from regular to PII, you must replace the email values with profile ID values in the WishList data entity.