Notification by vtex

The notification component displays text content in a bar style (notification.bar) or inline (notification.inline). This Component can be imported and used by any VTEX app.

{"base64":" ","img":{"width":1888,"height":733,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1082858,"url":"https://user-images.githubusercontent.com/67270558/147773765-0a7f00d6-69ce-44fa-98fc-4b1824faa2bf.png"}}

Configuration

Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:


_10  "dependencies": {
_10    "vtex.store-components": "3.x"
_10  }

Add the notification block to any template of your choice. For example:


_10  "store.home": {
_10      "blocks": [
_10+       "notification.bar",
_10        "carousel#home",
_10        "shelf#home"
_10      ]
_10    },

Then, declare the notification block using the props stated in the Props table.

Props

Prop name	Type	Description	Default value
`content`	`String`	Text to be used in the bar.	''
`classes`	`CustomCSSClasses`	Overrides default CSS handles. To better understand how this prop works, check this document. Note that this is only helpful if you're using this block as a React component.	`undefined`

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
`notificationBarContainer`
`notificationBarInner`
`notificationContent`