Warning
The Categories Highlights has been deprecated. Despite this, support for it is still granted.
Categories Highlights is a banner which shows two or four categories in a highlighted position in the store. This Component can be imported and used by any VTEX App.
📢 Disclaimer
Don't fork this project, use, contribute, or open issue with your feature request.
Usage
You should follow the usage instruction in the main README.
To import it into your code:
_10import CategoriesHighlights from 'vtex.store-components/CategoriesHighlights'
You can use it in your code like a React component with the jsx tag: <CategoriesHighlights />.
_10<CategoriesHighlights_10 categoriesHighlighted={ _10 categoryX: { name: 'X', image: 'Image X' }, _10 categoryY: { name: 'Y', image: 'Image Y' } _10 }_10/>
Configuration
| Prop name | Type | Description | Default value |
|---|---|---|---|
categoriesHighlighted | Object! | Categories highlighted in the department | {} |
showCategoriesHighlighted | Boolean! | Flag which indicates if the categories highlighted should be displayed or not | false |
quantityOfItems | Number! | Number of categories highlighted to be displayed (it should be 2 or 4) | 2 |
boxShape | String! | Shape of the card box which wraps each category (it should be 'squared' or 'rectangular') | squared |
Category Highlight:
| Prop name | Type | Description |
|---|---|---|
name | String! | Name of the category |
image | String | Image of the category |
Styles API
This app provides some CSS classes as an API for style customization. You should follow the Styles API instruction in the main README.
CSS namespaces
Below, we describe the namespaces that are defined in the categories highlights.
| Class name | Description | Component Source |
|---|---|---|
squaredCategoriesHighlights | The properties to be applied to a squared container | index |
rectangularCategoriesHighlights | The properties to be applied to a rectangular container | index |
rectangularCard | The properties to be applied to a rectangular card container | CategoryCard |
squaredCard | The properties to be applied to a squared card container | CategoryCard |
squaredCardImage | The properties to be applied to the image inside a squared card | CategoryCard |
rectangularCardImage | The properties to be applied to the image inside a rectangular card | CategoryCard |