📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

The My Wishlists app handles the favorite products of users. Users can create multiple lists and add the products they like to those lists. They can manage them and Add them to the cart and buy.

To configure the My Wishlists app, check the sections below.

In your theme's manifest.json, add the Search Result app as a dependency:

"dependencies": {
    "vtex.my-wishlists": "3.x"
}

Now, you can use all the blocks exported by the my-wishlists app.

Add the wishlist-button to Product Details page. In the example below, the wishlist-button is added to the flex-layout.row block from the store.product template, which uses the product context:

  "store.product": {
    "children": [
      "flex-layout.row#wishlist-button-pdp",
    ]
  },
  "flex-layout.row#wishlist-button-pdp": {
    "children": [
      "button-wishlist-pdp"
    ]
  }

Add the wishlist-button to Search page. In the example below, the wishlist-button is added to the product-summary.shelf block under the gallery in store.search template:

  "product-summary.shelf": {
    "children": ["responsive-layout.desktop#productSummary"]
  },
  "responsive-layout.desktop#productSummary": {
    "children": [
      "flex-layout.row#wishlist-button-plp"
    ]
  },
  "flex-layout.row#wishlist-button-plp": {
    "children": [
      "button-wishlist-pdp"
    ]
  }

Data in the wishlist are stored in VTEX masterdata entity named myWishlists.

This entity is created automatically when first time accessing the wishlist.

If masterdata schema is updated during the development (if any changes added to schema), schema version needs to be updated. On each schema version update new schema is created automatically with following format {versionNumber}-mywishlists (i.e. 0.0.2-mywishlists).

Here is the latest masterdata schema.

Data Entity Name: myWishlists Schema Name: 0.0.4-mywishlists

{
  "properties": {
    "email": {
      "type": "string",
      "format": "email"
    },
    "wishlistType": {
      "type": "string"
    },
    "products": {
      "type": "array"
    },
    "isPublic": {
      "type": "boolean"
    },
    "fieldsConfig": {
      "type": "array"
    }
  },
  "required": ["email", "wishlistType", "products", "isPublic"],
  "v-indexed": [
    "email",
    "wishlistType",
    "products",
    "isPublic",
    "fieldsConfig"
  ],
  "v-default-fields": [
    "email",
    "wishlistType",
    "products",
    "isPublic",
    "fieldsConfig"
  ],
  "v-cache": false,
  "v-immediate-indexing": true,
  "v-security": {
    "allowGetAll": true,
    "publicRead": [
      "id",
      "email",
      "wishlistType",
      "products",
      "isPublic",
      "fieldsConfig"
    ],
    "publicWrite": [
      "email",
      "wishlistType",
      "products",
      "isPublic",
      "fieldsConfig"
    ],
    "publicFilter": [
      "email",
      "wishlistType",
      "products",
      "isPublic",
      "fieldsConfig"
    ]
  }
}

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

Thanks goes to these wonderful people:

This project follows the all-contributors specification. Contributions of any kind are welcome!

Check out some documentation models that are already live:

• Breadcrumb
• Image
• Condition Layout
• Add To Cart Button
• Store Form