List Info by vtex

The specified version of the app (3.x.0) does not exist. This page is about the latest stable version, which is 3.6.5.

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.

{"base64":" ","img":{"width":1712,"height":666,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":85975,"url":"https://user-images.githubusercontent.com/67066494/190486006-d58a19f5-d03b-47b7-897c-4e0e2f6b0df9.gif"}}

Configuration

Import the vtex.list app to your theme's peer dependencies in the manifest.json file as in the following example:


_10  "peerDependencies": {
_10    "vtex.list": "3.x"
_10  }

Add any list-info block to other theme block using a list context, such as the store.guest. For example:


_14  "store.guest": {
_14    "blocks":[
_14      "flex-layout.row#breadcrumbs-guest",
_14      "responsive-layout.desktop#guest",
_14      "responsive-layout.mobile#guest",
_14      "flex-layout.col"
_14    ]
_14  }
_14
_14  "flex-layout.col": {
_14    "children": [
_14+     "list-info.name",
_14    ]
_14  }

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`