Documentation
Feedback
Guides

Gift List
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.

{"base64":"  ","img":{"width":1712,"height":666,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":85975,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-list-listinfo-0.gif"}}

Configuration

  1. Import the vtex.list app to your theme's peer dependencies in the manifest.json file as in the following example:
  "peerDependencies": {
    "vtex.list": "3.x"
  }
  1. Add any list-info block to other theme block using a list context, such as the store.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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page