List Info
The list information is made up of three blocks list-info.name
, list-info.event-date
and list-info.owner
and each one represents a type of information associated with the list, which are the name of the list, date of the event and name of the owner of the list respectively.
Configuration
- Import the
vtex.list
app to your theme's peer dependencies in themanifest.json
file as in the following example:
"peerDependencies": {
"vtex.list": "3.x"
}
- Add any
list-info
block to other theme block using a list context, such as thestore.guest
. For example:
"store.guest": {
"blocks":[
"flex-layout.row#breadcrumbs-guest",
"responsive-layout.desktop#guest",
"responsive-layout.mobile#guest",
"flex-layout.col"
]
}
"flex-layout.col": {
"children": [
+ "list-info.name",
]
}
Customization - "list-info.name"
To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.
CSS Handles |
---|
listName |
listNameText |
Customization - "list-info.event-date"
To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.
CSS Handles |
---|
eventDateContainer |
eventDateText |
Customization - "list-info.owner"
To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.
CSS Handles |
---|
ownersContainer |
ownersParagraph |
ownerNameText |
divisorText |
otherNameText |