Skip to content

Latest commit

 

History

History
64 lines (48 loc) · 3.72 KB

CategoriesHighlights.md

File metadata and controls

64 lines (48 loc) · 3.72 KB

Categories Highlights

Description

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.

Table of Contents

Usage

You should follow the usage instruction in the main README.

To import it into your code:

import CategoriesHighlights from 'vtex.store-components/CategoriesHighlights'

You can use it in your code like a React component with the jsx tag: <CategoriesHighlights />.

<CategoriesHighlights
    categoriesHighlighted={ 
        categoryX: { name: 'X', image: 'Image X' }, 
        categoryY: { name: 'Y', image: 'Image Y' } 
    }
/>

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