Shelf by vtex

Warning
Aiming to display a flexible product list, the shelf and shelf.relatedProducts block is deprecated and is now configured using the Product Summary List, the Product Summary Shelf and the Slider Layout blocks. To learn how to configure it, access Building a Shelf.

The Shelf app displays a list of products on your store pages, helping you build your shop window and work on your store's visual merchandising.

{"base64":" ","img":{"width":2852,"height":1266,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":601365,"url":"https://user-images.githubusercontent.com/52087100/70079904-60dc5280-15e4-11ea-8ef6-0aa69cadd61d.png"}}

Configuration

Add the shelf app to your theme's dependencies in the manifest.json file:

  "dependencies": {
    "vtex.shelf": "1.x",
  }

Now, you can use all the blocks exported by the shelf app. Check out the complete list below:

Block name	Description
`shelf`	Renders in the store home page a list of products.
`shelf.relatedProducts`	Renders in the product details page a list of related products.

Declare the shelf.relatedProduct in the product template (store.product) using its props. For example:

{
  "store.product": {
    "children": [
      "breadcrumb",
      "flex-layout.row#main",
      "shelf.relatedProducts"
    ]
  }
}

Warning
Note that for hiding unavailable/out-of-stock items, there are 2 different props: hideUnavailableItems and hideOutOfStockItems. They do the same thing, but each is used by a different component: Shelf and RelatedProducts, respectively.

Shelf

Prop name	Type	Description	Default value
`category`	`String`	The category ID
`collection`	`String`	The collection ID
`orderBy`	`Enum`	`OrderByTopSaleDESC`, `OrderByPriceDESC`, `OrderByPriceASC`, `OrderByNameASC`, `OrderByNameDESC`, `OrderByReleaseDateDESC`, `OrderByBestDiscountDESC`
`hideUnavailableItems`	`Boolean`	Whether out of stock items should be hidden (`true`) or not (`false`)	`false`
`paginationDotsVisibility`	`Enum`	`visible`, `hidden`, `mobileOnly`, `desktopOnly`
`productList`	`ProductListSchema`	Product list schema. See `ProductListSchema`	-
`trackingId`	`String`	Name to show in the Google Analytics. If nothing is passed it will use the name of the block instead
`maxItems`	`Number`	Max items

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`
`hideOutOfStockItems`	`Boolean`	Whether out of stock items should be hidden (`true`) or not (`false`)	`false`
`productList`	`ProductListSchema`	Product list schema. See `ProductListSchema`	-

ProductListSchema:

Prop name	Type	Description	Default value
`maxItems`	`number`	Maximum number of items to be displayed on the related product shelf.	`10`
`scroll`	`enum`	Slide transition scroll type. Possible values are: `BY_PAGE` or `ONE_BY_ONE`.	`BY_PAGE`
`arrows`	`boolean`	Whether the arrows should be displayed on the shelf (`true`) or not (`false`).	`true`
`showTitle`	`boolean`	Whether a title should be displayed in the product related shelf (`true`) or not (`false`).	`true`
`titleText`	`string`	Related product shelf title.	`null`
`gap`	`enum`	Gap between items being displayed. Possible values are: `ph0`, `ph3`,`ph5`, or `ph7`.	`ph3`
`minItemsPerPage`	`number`	Minimum number of items per shelf slides. This prop can be used to control how many items will be displayed on the related product 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 number of items per shelf slides. This prop can be used to control how many items will be displayed on the related product 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`
`summary`	`object`	Schema declaring the desired related product shelf's items. This prop object must contain the `product-summary.shelf` block's props.	`undefined`

Customization

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.

CSS Handles
`relatedProducts`

Warning
The CSS Handles list above refers to the shelf.relatedProducts block. Since the shelf block is deprecated, your traditional shelf customization must be done using the CSS Handles available for the Product Summary List, the Product Summary Shelf and the Slider Layout blocks.