Gallery List Items

The gallery.list-items block displays the gallery with the products contained in a list.

{"base64":" ","img":{"width":1712,"height":666,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":247596,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-list-gallerylistitems-0.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 the gallery.list-items block to other theme block inside the list context, such as the store.list. For example:


_11  "store.list":{
_11    "children":{
_11      "flex-layout.row"
_11    }
_11  },
_11
_11  "flex-layout.row": {
_11    "children": [
_11+     "gallery.list-items",
_11    ]
_11  }

Props

Prop Name	Type	Description	Default value
emptyListIcon	string	Name for the button	-
emptyListText	string	Text for empty lists	" Your list is empty \n Add items right now "
buttonEmptyList	boolean	If set to true adds a button for adding items at an empty list	true
nameButtonEmptyList	string	Name of the button in case the prop buttonEmptyList is true	"Add Items"
emptyTextAlignment	string	Align the text of the button (RIGHT / CENTER / LEFT)	CENTER
emptyTextPosition	string	Align the position of the text at button (RIGHT / CENTER / LEFT)	CENTER
linkButtonEmptyList	string	The redirect link for the button (department / category / collection)	-
linkIconButtonEmptyList	string	Link for the icon of an empty list	-
limit	number	At a guest context if wants to add a button to create a list and set a maximum limit of lists for creation per user	-