Wishlist by vtex

This page is about version 1.2.0 of the app, which is not the most recent version. The latest stable version is 1.17.0.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl5T7f2c+AAzxA3lptuDWAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}$

The Wishlist app, designed for B2C stores, adds a heart icon to shelves and product detail pages, so users can add the desired products to a Wishlist.

{"base64":" ","img":{"width":611,"height":640,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":159671,"url":"https://user-images.githubusercontent.com/52087100/94687168-40fbe500-0302-11eb-8239-135d773324dd.png"}}

Example of heart icons on a shelf.

{"base64":" ","img":{"width":1051,"height":575,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":223113,"url":"https://user-images.githubusercontent.com/52087100/94687148-393c4080-0302-11eb-8ab4-e5bd44e642ec.png"}}

Example of a heart icon on a product details page.

In addition to that, a brand new route called /wishlist is generated under the My Account menu, creating a page responsible for listing all wishlisted items for your users.

{"base64":" ","img":{"width":968,"height":841,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":267626,"url":"https://user-images.githubusercontent.com/52087100/101348528-87257580-386a-11eb-84e3-0ffda3ce0fb5.png"}}

Example of a wishlist page.

Configuration

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


_10 "peerDependencies": {
_10+  "vtex.wish-list": "1.x"
_10 }

The Wishlist app can export two theme blocks when added as a dependency: add-to-list-btn and list-context.wishlist. They are responsible, respectively, for adding the heart icon to other theme blocks and for providing product data to build the /wishlist page.

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


_10{
_10  "store.product": {
_10    "children": [
_10      "product-name",
_10      "product-reviews",
_10+      "add-to-list-btn"
_10    ]
_10  },

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


_10  "product-summary.shelf": {
_10    "children": [
_10+     "add-to-list-btn",
_10      "product-summary-name",
_10      "product-rating-inline",
_10      "product-summary-price",
_10      "add-to-cart-button"
_10    ]
_10  }

The new route called /wishlist, responsible for creating the Wishlist custom page that displays wishlisted product items, already contains a default template, meaning it is ready to be rendered under the My Account menu and no further actions are required from you. However, you can customize the Wishlist page, overwriting the template by creating a brand new one as you wish. To do so, check the Advanced configurations section below.

Advanced configurations

According to the Wishlist app composition, the /wishlist page can be highly customizable using other blocks. Currently, its default implementation is as follows:


_61{
_61  "my-account-page.wishlist-page": {
_61    "blocks": [
_61      "flex-layout.row#top",
_61      "list-context.wishlist"
_61    ]
_61  },
_61  "store.wishlist": {
_61    "blocks": [
_61      "flex-layout.row#top",
_61      "list-context.wishlist"
_61    ]
_61  },
_61  "flex-layout.row#top": {
_61    "children": [
_61      "flex-layout.col#title"
_61    ]
_61  },
_61  "flex-layout.col#title": {
_61    "children": [
_61      "rich-text#title"
_61    ],
_61    "props": {
_61      "blockClass": "titleWishlist",
_61      "preventVerticalStretch": true
_61    }
_61  },
_61  "rich-text#title":{
_61    "props": {
_61      "text": "### Wishlist"
_61    }
_61  },
_61  "list-context.wishlist": {
_61    "blocks": ["product-summary.shelf#wishlist"],
_61    "children": ["slider-layout#wishlist"]
_61  },
_61  "product-summary.shelf#wishlist": {
_61    "children": [
_61      "add-to-list-btn",
_61      "product-summary-image",
_61      "product-summary-name",
_61      "product-summary-space",
_61      "product-summary-price",
_61      "add-to-cart-button"
_61    ]
_61  },
_61  "slider-layout#wishlist": {
_61    "props": {
_61      "itemsPerPage": {
_61        "desktop": 5,
_61        "tablet": 3,
_61        "phone": 1
_61      },
_61      "showNavigationArrows": "desktopOnly",
_61      "showPaginationDots":"always",
_61      "infinite": false,
_61      "fullWidth": true,
_61      "blockClass": "shelf"
_61    }
_61  }
_61}

By default implementation we mean that by installing the Wishlist app in your store you're actually using the json above behind the scenes to build the new page template (/wishlist), as shown in the third image displayed above.

Therefore, in order to customize the /wishlist page configuration, you should:

Create a wishlist.jsonc file under store/blocks.
Copy the code above, paste it in the new file and change it as you wish.
Deploy your changes.

Customization

In order to apply CSS customizations to this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
`columnText`
`columnThumb`
`linkText`
`linkThumb`
`listItemsContainer`
`listName`
`listTab`
`productDescription`
`productItemRow`
`productTitle`
`thumb`
`wishlistContainer`
`wishlistIcon`
`wishlistIconContainer`