ProductSummaryList

The Product Summary List app (list-context.product-list) is an instance of the list-context interface - a set of special interfaces used to create lists of content, such as a list of products.

{"base64":" ","img":{"width":1919,"height":951,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":437866,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummarylist-0.png"}}

To create a list of products, you must use the list-context.product-list and product-summary.shelf blocks.

product-list-block

This block is used to specify what variation of product-summary to be used to create the list of products, and the list-context.product-list you want as follows:

  "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"]
  },

list-context.product-list is also responsible for performing the GraphQL query that fetches the list of products, so it can receive the following props:

Prop name	Type	Description	Default value
`category`	`String`	Category ID of the listed items. For sub-categories, use "/" (e.g. "1/2/3")	-
`specificationFilters`	`Array({ id: String, value: String })`	Specification Filters of the listed items.	[]
`collection`	`String`	Filter by collection.	-
`orderBy`	`Enum`	Ordination type of the items. Possible values: `''`, `OrderByTopSaleDESC`, `OrderByReleaseDateDESC`, `OrderByBestDiscountDESC`, `OrderByPriceDESC`, `OrderByPriceASC`, `OrderByNameASC`, `OrderByNameDESC`	`OrderByTopSaleDESC`
`hideUnavailableItems`	`Boolean`	Hides items that are unavailable.	`false`
`maxItems`	`Number`	Maximum items to be fetched.	`10`
`skusFilter`	`SkusFilterEnum`	Control SKUs returned for each product in the query. The less SKUs needed to be returned, the more performant your shelf query will be.	`"ALL_AVAILABLE"`
`installmentCriteria`	`InstallmentCriteriaEnum`	Control what price to be shown when price has different installments options.	`"MAX_WITHOUT_INTEREST"`
`listName`	`String`	Name of the list property on Google Analytics events.	``
`preferredSKU`	`PreferredSKUEnum`	Controls which SKU will be selected in the summary	`"FIRST_AVAILABLE"`

For SkusFilterEnum:

Name	Value	Description
First Available	`FIRST_AVAILABLE`	Most performant, ideal if you do not have a SKU selector in your shelf. Will return only the first available SKU for that product in your shelf query.
All Available	`ALL_AVAILABLE`	A bit better performace, will only return SKUs that are available, ideal if you have a SKU selector but still want a better performance.
All	`ALL`	Returns all SKUs related to that product, least performant option.

For InstallmentCriteriaEnum:

Name	Value	Description
Maximum without interest	`MAX_WITHOUT_INTEREST`	Will display the maximum installment option with no interest.
Maximum	`MAX_WITH_INTEREST`	Will display the maximum installment option having interest or not.

For PreferredSKUEnum:

Name	Value	Description
First Available	`FIRST_AVAILABLE`	Selects the first available SKU in stock it finds.
Last Available	`LAST_AVAILABLE`	Selects the last available SKU in stock it finds.
Cheapest	`PRICE_ASC`	Selects the cheapest SKU in stock it finds.
Most Expensive	`PRICE_DESC`	Selects the most expensive SKU in stock it finds.

️