📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.
The Shelf block is responsible for displaying a list of products in the store home page.
Aiming to display a flexible product list, the Shelf block as we know is now configured using the Product Summary List, the Product Summary Shelf and the Slider Layout blocks.
- Add the
ProductSummary
andSlider-Layout
apps to your theme's dependencies on themanifest.json
, for example:
"dependencies": {
"vtex.product-summary": "2.x",
"vtex.slider-layout": "0.x"
}
manifest.json
file in the previous step, exports (among others) 2 blocks that will be useful to build the Shelf: The Product Summary Shelf and the Product Summary List blocks. The last one is not rendered and, in turn, exports one of the blocks we are going to declare in the next step: the list-context.product-list
.
- Add the
list-context.product-list
,product-summary.shelf
andslider-layout
blocks into your theme. These block come from the Product Summary and the Slider-Layout apps.
{
"product-summary.shelf#demo1": {
"children": [
"stack-layout#prodsum",
"product-summary-name",
"product-rating-inline",
"product-summary-space",
"product-summary-price",
"product-summary-buy-button"
]
},
"list-context.product-list#demo1": {
"blocks": ["product-summary.shelf#demo1"],
"children": ["slider-layout#demo-products"]
}
}
The list-context.product-list
is the block responsible for performing the GraphQL query that fetches the list of products and its props can be found below.
Prop name | Type | Description | Default value |
---|---|---|---|
category |
String |
Category ID of the Shelf listed items. For sub-categories, use / before the ID to indicate which category it belongs to. For example: "1/2" , considering 2 as a sub-category ID) |
undefined |
specificationFilters |
Array |
Specification Filters of the Shelf listed items. | undefined |
collection |
String |
Collection ID of the Shelf listed items. | undefined |
orderBy |
Enum |
Ordination criterion for the Shelf listed items. Possible values: OrderByTopSaleDESC , OrderByReleaseDateDESC , OrderByBestDiscountDESC , OrderByPriceDESC , OrderByPriceASC , OrderByNameASC , OrderByNameDESC |
OrderByTopSaleDESC |
hideUnavailableItems |
Boolean |
Whether unavailable items should be hidden (true ) or not (false ) |
false |
maxItems |
Number |
Maximum items fetched in the context to be displayed on the Shelf. | 10 |
specificationFilters
array
Prop name | Type | Description | Default value |
---|---|---|---|
Id |
String |
Specification Filters ID | undefined |
value |
String |
Specification Filters values | undefined |
RelatedProducts
is a subtype of a Shelf block (shelf.relatedProduct
) that queries and displays the related products on a Product Details Page. It can therefore only be declared in a product template (store.product
), for example:
{
"store.product": {
"children": [
"breadcrumb",
"flex-layout.row#main",
"shelf.relatedProducts"
]
}
}
Prop name | Type | Description | Default value |
---|---|---|---|
recommendation |
Enum |
Type of recommendations that will be displayed in the Shelf. Possible values: similars , suggestions , accessories (these first three depend on the product's data given in the admin's catalog) and view , buy , viewandBought (These 3 are automatically generated according to the store’s activity) |
similars |
productList |
ProductListSchema |
Product list schema. See ProductListSchema |
- |
ProductListSchema
:
Prop name | Type | Description | Default value |
---|---|---|---|
maxItems |
Number |
Maximum number of items in the Shelf. | 10 |
scroll |
Enum |
Slide transition scroll type. Possible values: BY_PAGE , ONE_BY_ONE |
BY_PAGE |
arrows |
Boolean |
If the arrows are displayable or not. | true |
showTitle |
Boolean |
If a title should be displayed in the Shelf or not. | true |
titleText |
String |
Shelf title | null |
summary |
Object |
Product Summary schema properties. | - |
gap |
Enum |
Gap between items. Possible values: ph0 , ph3 ,ph5 , ph7 . |
ph3 |
minItemsPerPage |
Number |
Minimum amount of Shelf slides. This prop can be used to control how many itens will be displayed on the Shelf even in the smallest screen size. Its value can be a float, which means that you can choose a multiple of 0.5 to indicate that you want to show a "peek" of the next slide on the Shelf. | 1 |
itemsPerPage |
Number |
Maximum amount of Shelf slides. This prop can be used to control how many itens will be displayed on the Shelf even in the biggest screen size. Its value can be a float, which means that you can choose a multiple of 0.5 to indicate that you want to show a "peek" of the next slide on the Shelf. | 5 |
In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.
list-context.product-list
block.
CSS Handles |
---|
container |
title |
relatedProducts |
arrow |
dot |
dot--isActive |
slide |
blockContainer |
blockText |
buttonContainer |
arrowLeft |
arrowRight |
shelfContentContainer |
sliderContainer |
headline |
itemContainer |
itemContainerSelected |
itemContainerUnselected |
tabsContainer |
tabsNamesContainer |
shelfContainer |
tabButton |
Thanks goes to these wonderful people (emoji key):
Sahan Jayawardana 💻 |
Lucas Pacheco 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!