⚠️ This app is no longer maintained and shouldn't be used by any store.

The Wishlist is a native app that any VTEX store can use. This app is responsible for managing the customer's lists of products.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

See our LTS policy for more information.

• Usage
  • Blocks API
    • Configuration
  • Styles API
• Troubleshooting
• Contributing
• Tests

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

To use this app, you need to add it in your dependencies in the manifest.json file.

  dependencies: {
    "vtex.wishlist": "0.x"
  }

Then, if you want to add the Add to List button in your app, you just need to add the add-to-list-btn block into our app theme. You also can add a menu item with a link to redirect to the lists page. To do that, you should use the Menu Builder by including list item block, as the example bellow.

"unstable--menu-item#lists": {
    "props": {
      "id": "unstable--menu-item-lists",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "store/lists",
        "noFollow": true,
        "tagTitle": "lists",
        "text": "My Lists"
      }
    }
  },

In order to use this app, you should follow the steps bellow.

The lists' information are submitted to Master Data on two entities. One entity with the acronym WL to store list's basic informations and another, acronym LP, to store the lists' items. Bellow we have the configuration that these entetities should follow.

Acronym name: WL

Acronym name: LP

Use this command to install this app: vtex install vtex.wishlist.

After that, Wishlist's Add to List button will be displayed on ProductSummary and ProductDetails.

This app has an interface that describes what rules must be implemented by a block when you want to use the WishList app.

{
  "addon-summary-btn.add-to-list": {
    "component": "AddProductBtn",
    "required": ["lists", "product-summary"]
  },
  "addon-details-btn.add-to-list": {
    "component": "AddProductBtn",
    "required": ["lists", "product-summary"]
  },
  "add-to-list-btn": {
    "component": "AddProductBtn",
    "required": ["lists", "product-summary"]
  },
  "lists": {
    "component": "ListsPage",
    "required": ["product-summary"]
  },
  "store.lists": {
    "component": "ContainerWrapper",
    "required": [
      "lists"
    ],
    "before": [
      "header.full"
    ],
    "after": [
      "footer"
    ]
  }
}

AddProductBtn

Product

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

1. Add the styles builder to your manifest.json:

  "builders": {
    "styles": "1.x"
  }

2. Create a file called vtex.wishList.css inside the styles/css folder. Add your custom styles:

.container {
  margin-top: 1rem;
}

You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.

Check it out how to contribute with this project.

🚧 🚧 Not implemented yet 🚧 🚧

Thanks goes to these wonderful people (emoji key):

Matheus Araujo 📖

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