Deprecated - VTEX Wishlist app

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

Description

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.

Release schedule

Release	Status	Initial Release	Maintenance LTS Start	End-of-life	Store Compatibility
[0.x]	Current Release	2019-04-03			2.x

See our LTS policy for more information.

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

Usage

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.

1. Create Master Data's Entities:

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

Field	Type	Configuration	Description
name	`Varchar 50`	Public to read and public to write	List's name
owner	`Varchar 50`	Allow null, public to read, public to write, public to filter and searchable	The e-mail of the list's owner
isPublic	`Boolean`	Allow null, public to read and public to write	Flag to indicate the list visibility
isEditable	`Boolean`	Allow null, public to read and public to write	Flag to indicate if the list's basic information
items	`Text`	Allow null, public to read and public to write	Set of the DocumentId of the items added to the list

Acronym name: LP

Field	Type	Configuration	Description
productId	`Varchar 50`	Public to read and public to write	Id of the product
skuId	`Varchar 50`	Public to read and public to write	SKU id of the product
quantity	`Integer`	Public to read and public to write	Quantity of the product

2. Install the WishList app in your store:

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.

Blocks API

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"
    ]
  }
}

Configuration

AddProductBtn

Prop name	Type	Description	Default Value
`product`	`Product`	Informations about the product that will be added to lists	`undefined`
`large`	`Boolean`	Flag that indicates if the should be large or not	false
`icon`	`ReactChild`	The icon that should appear in the Add to List button	`IconHeart`

Product

Prop name	Type	Description	Default Value
`productId`	`String`	Id of the product	`undefined`
`skuId`	`String`	SKU id of the product	`undefined`
`quantity`	`Number`	Quantity of the product	`undefined`

Styles API

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.

Add the styles builder to your manifest.json:

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

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

.container {
  margin-top: 1rem;
}

CSS namespaces

Class name	Description	Component Source
`listPageItemsContainer`	List page's container of the products	ListsPage/Content
`listPage`	List page's main container	ListsPage/Content
`confirmSelectedListsBtn`	Container of the button to confirm selected lists to add a product in the mobile mode	AddToList/Footer
`contentContainer`	Container of the `AddToList`'s content	AddToList/Content
`popover`	Container of the `Popover` component	Popover
`formViewDialog`	Dialog content of the FormView component in the desktop mode	FormView
`summaryContainer`	Container of the `ProductSummary` in the list item details	ListDetails/ItemDetails
`summaryContainerLarge`	Container of the `ProductSummary` in the list item details in desktop mode	ListDetails/ItemDetails
`addToListContent`	Main container of the `AddToList` component	AddToList/Content
`addToListListsToSwitch`	Container of the lists to be selected in the `AddToList` component	AddToList/Content
`createList`	Container of the `CreateList`	CreateList
`createListButtonContainer`	Container of the button to create a new list	ListForm
`isPublicLabel`	Label for show the privacy message in the `ListForm`	ListForm
`isPublicHint`	Label for show the privacy hint in the `ListForm`	ListForm
`isPublicContainer`	Container of the privacy information in the `ListForm`	ListForm
`nameInputContainer`	Container of the list's name input	ListForm
`form`	Main container of the `ListForm`	ListForm
`updateList`	Main container of the update list form	UpdateList
`listEmptyContainer`	Container of the empty list message in in the list details	ListDetails/Content
`listEmptyLabel`	Container of the empty message label when a list does not have products added to it	ListDetails/Content
`goToAddProductsButtonContainer`	Container of the button that redirect to the `Galery`	ListDetails/Content
`listDetailsContent`	Main container of the list details	ListDetails/Content
`buySelectedItemsBtnContainer`	Container of the `BuyButton` that add to the cart the selected products of a list	ListDetails/Footer
`totalPriceLabel`	Label of the quantity of products in a list	ListDetails/Footer
`pricesContainer`	Label of the total price of the selected items from a list	ListDetails/Footer
`quantityOfSelectedItemsLabel`	Label for the quantity of selected items in a list	ListDetails/Footer
`ListDetailsFooter`	Container of the list details' footer	ListDetails/Footer

Troubleshooting

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

Contributing

Check it out how to contribute with this project.

Tests

🚧 🚧 Not implemented yet 🚧 🚧

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Matheus Araujo}
📖

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

vtex-apps/wishlist