Skip to content

mica-acct/category-menu

 
 

Repository files navigation

VTEX Category Menu

Description

The VTEX Category Menu app is a store component that shows a department list of the store on an customizable menu, and this app is used by store theme.

📢 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
[2.x] Current Release 2018-11-20 2.x
[1.x] Maintenance LTS 2018-08-24 2018-11-20 March 2019 1.x

See our LTS policy for more information.

Table of Contents

Usage

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

We add the category-menu as a block in our Store Header.

To configure or customize this app, you need to import it in your dependencies in manifest.json.

  dependencies: {
    "vtex.category-menu": "2.x"
  }

Then, add category-menu block into your app theme, like we do in our Store theme app.

Now, you can change the behavior of the category-menu block that is in the store header. See an example of how to configure:

"category-menu": {
    "props": {
      "showPromotionCategory": true,
      "showGiftCategory": true,
      "showAllDepartments": true,
      "showSubcategories": true,
      "menuDisposition": "center",
      "departments": []
    }
  }

Blocks API

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

  "category-menu": {
    "component": "index"
  }
}

Configuration

Through the Storefront you can change the behavior and interface of CategoryMenu. But, you can also make adjusts in your theme app, like Store does.

Prop name Type Description Default Value
showPromotionCategory Boolean Shows the promotion category in menu false
showGiftCategory Boolean Shows the gift category in menu false
showAllDepartments Boolean Shows all departments category in menu true
menuDisposition Enum Indicates the disposition of the menu on the screen. Possible values: left, center, right center
showSubcategories Boolean Decides if the subcategories will be displayed true
departments Array(items) List of departments items to be displayed on the menu []

Items:

Prop name Type Description
id Number The department Id to be displayed on the menu

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.

  1. Add the styles builder to your manifest.json:
  "builders": {
    "styles": "1.x"
  }
  1. Create a file called vtex.category-menu.css inside the styles/css folder. Add your custom styles:
.container {
  margin-top: 10px;
}

CSS namespaces

Below, we describe the namespaces that are define in the CategoryMenu.

Class name Description Component Source
container The main container of Category Menu for all sizes index
mobile The main container of Category Menu for mobile size index
animation Category menu mobile sidebar animation SideBar
sidebarOpen Active when the sidebar is opened SideBar
sidebarScrim the sidebar shadow backdrop content SideBar
sidebar The main container of sidebar SideBar
sidebarHeader The sidebar header container SideBar
sidebarContent The sidebar content container SideBar
firstLevelLink First level of the Category Menu, the main categories links ItemContainer
secondLevelLink Second level of the Category Menu, the subcategories links ItemContainer
itemContainer Main container of a category item/department CategoryItem
sidebarItem The container of a sidebar category item/department SideBarItem

Troubleshooting

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

Tests

To execute our tests go to react/ folder and run yarn test

About

VTEX Category Menu app

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 98.6%
  • CSS 1.4%