Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
ProductSummaryList
vtex.product-summary
Version: 2.89.0
Latest version: 2.89.0

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 content lists, such as a product list.

{"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 product list, 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 should be used to create the product list and the list-context.product-list you want as follows:


_14
"product-summary.shelf#demo1": {
_14
"children": [
_14
"stack-layout#prodsum",
_14
"product-summary-name",
_14
"product-rating-inline",
_14
"product-summary-space",
_14
"product-summary-price",
_14
"product-summary-buy-button"
_14
]
_14
},
_14
"list-context.product-list#demo1": {
_14
"blocks": ["product-summary.shelf#demo1"],
_14
"children": ["slider-layout#demo-products"]
_14
},

list-context.product-list also runs the GraphQL query that fetches the product list to allow it to receive the following props:

Prop nameTypeDescriptionDefault value
categorystringCategory ID of the listed items. For subcategories, use "/" (example: "1/2/3")-
specificationFiltersArray({ id: String, value: String })Specification filters of the listed items.[]
collectionstringFilter by collection.-
orderByenumSorting type of the items. Possible values are: '', OrderByTopSaleDESC, OrderByReleaseDateDESC, OrderByBestDiscountDESC, OrderByPriceDESC, OrderByPriceASC, OrderByNameASC, OrderByNameDESC.OrderByTopSaleDESC
hideUnavailableItemsbooleanHides unavailable items.false
maxItemsnumberMaximum items to be fetched.10
skusFilterSkusFilterEnumControl SKUs returned for each product in the query. The fewer SKUs that need to be returned, the more efficient your shelf query will be."ALL_AVAILABLE"
installmentCriteriaInstallmentCriteriaEnumControl the price that will be displayed when the price has different installment options."MAX_WITHOUT_INTEREST"
listNamestringName of the list property in Google Analytics events.``
preferredSKUPreferredSKUEnumControls which SKU will be selected in the summary"FIRST_AVAILABLE"

For SkusFilterEnum:

NameValueDescription
First AvailableFIRST_AVAILABLEBest performance, ideal if you do not have a SKU selector on your shelf. It will return only the first available SKU for that product in your shelf query.
All AvailableALL_AVAILABLEPerformance is somewhat better; it will only return available SKUs, which is ideal if you have a SKU selector but still want better performance.
AllALLReturns all SKUs related to the product; the least efficient option.

For InstallmentCriteriaEnum:

NameValueDescription
Maximum without interestMAX_WITHOUT_INTERESTDisplays the maximum installment option with no interest.
MaximumMAX_WITH_INTERESTDisplays the maximum installment option with or without interest.

For PreferredSKUEnum:

NameValueDescription
First AvailableFIRST_AVAILABLESelects the first available SKU it finds.
Last AvailableLAST_AVAILABLESelects the last available SKU it finds.
CheapestPRICE_ASCSelects the cheapest SKU in stock it finds.
Most ExpensivePRICE_DESCSelects the most expensive available SKU it finds.

To select which SKU will take precedence over this prop, create a Product (field) specification and assign the value of the desired SKU to be initially set for each product. If the specification does not exist or the value is empty, the preferredSKU prop will be used as a fallback. For more information, see this guide.

See also
Vtex.product Summary
VTEX IO Apps
VTEX App Store
VTEX IO Apps