Skip to content

EDU-9560 - Correção de artigo ProductSummaryList #421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
barbara-celi wants to merge 3 commits into
base: master
Choose a base branch
from
Open

EDU-9560 - Correção de artigo ProductSummaryList #421

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4287999
Enhance documentation for Product Summary List
barbara-celi May 20, 2026
8e1b5f2
Update docs/ProductSummaryList.md
barbara-celi Jun 15, 2026
814f248
Apply suggestions from code review
barbara-celi Jun 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 49 additions & 25 deletions docs/ProductSummaryList.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,37 @@
# Product Summary List

The Product Summary List app (`list-context.product-list`) is an instance of the `list-context` interface, which provides predefined interfaces used to create content lists, such as a product list.
[<i class="fa-brands fa-github"></i> Source code](https://github.com/vtex-apps/product-summary/tree/master/react/components/ProductSummaryAttachmentList)

The Product Summary List app (`list-context.product-list`) creates product lists in VTEX stores. It fetches product data and passes it to the `product-summary.shelf` block, which renders each product summary.

Use this app to build shelves, product carousels, and other storefront sections that display products.

![list-context-example](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.
## Installation

1. [Install](https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-an-app) the [`product-summary`](https://developers.vtex.com/docs/apps/vtex.product-summary) app in your account by running the following command in your terminal:

```bash
vtex install vtex.product-summary
```

## Configuration

## product-list-block
1. Open you [Store Theme](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) app in a code editor.
2. Open to [`manifest.json`](https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest) file and add the Product Summary List app (`vtex.product-summary`) under the [`dependencies`](https://developers.vtex.com/docs/guides/vtex-io-documentation-dependencies) field.

This block is used to specify the variation of `product-summary` that should be used to create the product list and the `list-context.product-list` you want, as follows:
```json
"dependencies": {
"vtex.product-summary": "2.x"
}
```

You can now use the `list-context.product-list` block, which is exported by the `product-summary` app.

## `product-list` block

Use this block to define the `product-summary` variation for creating the product list and the desired `list-context.product-list`, as shown below:

```json
"product-summary.shelf#demo1": {
Expand All @@ -27,43 +50,44 @@ This block is used to specify the variation of `product-summary` that should be
},
```

`list-context.product-list` also runs the GraphQL query that fetches the product list, allowing it to receive the following props:
## Props

The `list-context.product-list` also runs the GraphQL query that fetches the product list, allowing it to receive the following props:

| Prop name | Type | Description | Default value |
| ---------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ |
Comment thread
barbara-celi marked this conversation as resolved.
Outdated
| `category` | `string` | Category ID of the listed items. For subcategories, use "/" (example: "1/2/3"). | - |
| `category` | `string` | Category ID of the listed items. For subcategories, use `"/"` (example: `"1/2/3"`). | - |
| `specificationFilters` | `Array({ id: String, value: String })` | Specification filters of the listed items. | [] |
Comment thread
barbara-celi marked this conversation as resolved.
Outdated
| `collection` | `string` | Filter by collection. | - |
| `orderBy` | `enum` | Sort type of the items. Possible values are: `''`, `OrderByTopSaleDESC`, `OrderByReleaseDateDESC`, `OrderByBestDiscountDESC`, `OrderByPriceDESC`, `OrderByPriceASC`, `OrderByNameASC`, `OrderByNameDESC`. | `OrderByTopSaleDESC` |
| `hideUnavailableItems` | `boolean` | Hides unavailable items. | `false` |
| `maxItems` | `number` | Maximum items to be fetched. | `10` |
| `skusFilter` | [`SkusFilterEnum`](#skusfilterenum) | Control SKUs returned for each product in the query. The fewer SKUs that need to be returned, the more efficient your shelf query will be. Possible values are: `FIRST_AVAILABLE`, `ALL_AVAILABLE`, `ALL`. | `"ALL_AVAILABLE"` |
| `installmentCriteria` | [`InstallmentCriteriaEnum`](#installmentcriteriaenum) | Controls the price that will be displayed when the price has different installment options. Possible values are: `MAX_WITHOUT_INTEREST`, `MAX_WITH_INTEREST`. | `"MAX_WITHOUT_INTEREST"` |
| `collection` | `string` | ID of the product collection to be displayed. | - |
| `orderBy` | `enum` | Sort order for the items. Possible values are: `''`, `OrderByTopSaleDESC`, `OrderByReleaseDateDESC`, `OrderByBestDiscountDESC`, `OrderByPriceDESC`, `OrderByPriceASC`, `OrderByNameASC`, `OrderByNameDESC`. | `OrderByTopSaleDESC` |
| `hideUnavailableItems` | `boolean` | Hides unavailable items when set to `true`. | `false` |
| `maxItems` | `number` | Maximum number items to be fetched. | `10` |
| `skusFilter` | [`SkusFilterEnum`](#skusfilterenum) | Controls which SKUs are returned for each product. The fewer SKUs that need to be returned, the more efficient your shelf query will be. Possible values are: `FIRST_AVAILABLE`, `ALL_AVAILABLE`, `ALL`. | `"ALL_AVAILABLE"` |
| `installmentCriteria` | [`InstallmentCriteriaEnum`](#installmentcriteriaenum) | Controls which price is displayed when a product has multiple installment options. Possible values are: `MAX_WITHOUT_INTEREST`, `MAX_WITH_INTEREST`. | `"MAX_WITHOUT_INTEREST"` |
| `listName` | `string` | Name of the list property in Google Analytics events. | - |
Comment thread
barbara-celi marked this conversation as resolved.
Outdated
| `preferredSKU` | [`PreferredSKUEnum`](#preferredskuenum) | Controls the SKU that will be selected in the summary. Possible values are: `FIRST_AVAILABLE`, `LAST_AVAILABLE`, `PRICE_ASC`, `PRICE_DESC`. | `"FIRST_AVAILABLE"` |
| `preferredSKU` | [`PreferredSKUEnum`](#preferredskuenum) | Defines which SKU is selected in the summary. Possible values are: `FIRST_AVAILABLE`, `LAST_AVAILABLE`, `PRICE_ASC`, `PRICE_DESC`. | `"FIRST_AVAILABLE"` |
Comment thread
barbara-celi marked this conversation as resolved.
Outdated

### `SkusFilterEnum`:
### `SkusFilterEnum`

| Name | Value | Description |
| --------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
Comment thread
barbara-celi marked this conversation as resolved.
Outdated
| First Available | `FIRST_AVAILABLE` | Best performance, ideal if you don't have a SKU selector on your shelf. It returns only the first available SKU for that product in your shelf query. |
| All Available | `ALL_AVAILABLE` | Somewhat better performance. It only returns available SKUs, which is ideal if you have a SKU selector but still want better performance. |
| All | `ALL` | Returns all SKUs related to the product. This is the least efficient option. |
| All Available | `ALL_AVAILABLE` | It only returns available SKUs. Ideal if you have a SKU selector but want better performance. |
Comment thread
barbara-celi marked this conversation as resolved.
Outdated
| All | `ALL` | Lowest performance. Returns all SKUs associated with the product, including unavailable ones. |

### `InstallmentCriteriaEnum`:
### `InstallmentCriteriaEnum`

| Name | Value | Description |
| ------------------------ | ---------------------- | ----------------------------------------------------------------- |
Comment thread
barbara-celi marked this conversation as resolved.
Outdated
| Maximum without interest | `MAX_WITHOUT_INTEREST` | Displays the maximum installment option with no interest. |
| Maximum | `MAX_WITH_INTEREST` | Displays the maximum installment option with or without interest. |
| Maximum without interest | `MAX_WITHOUT_INTEREST` | Displays the maximum number of installments with no interest. |
Comment thread
barbara-celi marked this conversation as resolved.
Outdated
| Maximum | `MAX_WITH_INTEREST` | Displays the maximum number of installments, including those with interest. |

### `PreferredSKUEnum`:
### `PreferredSKUEnum`

| Name | Value | Description |
| --------------- | ----------------- | -------------------------------------------------- |
Comment thread
barbara-celi marked this conversation as resolved.
Outdated
| First Available | `FIRST_AVAILABLE` | Selects the first available SKU it finds. |
| Last Available | `LAST_AVAILABLE` | Selects the last available SKU it finds. |
| Cheapest | `PRICE_ASC` | Selects the cheapest SKU in stock it finds. |
| Most Expensive | `PRICE_DESC` | Selects the most expensive available SKU it finds. |
| First Available | `FIRST_AVAILABLE` | Selects the first available SKU. |
| Last Available | `LAST_AVAILABLE` | Selects the last available SKU. |
| Most Expensive | `PRICE_DESC` | Selects the most expensive available SKU. |
Comment thread
barbara-celi marked this conversation as resolved.
Outdated

> ⚠️ To select the SKU that 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 doesn't exist or the value is empty, the `preferredSKU` prop will be used as a fallback. For more information, see [Configuring custom images for the SKU Selector](https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector).
> ⚠️ To override the `PreferredSKU` prop, create a Product specification and assign the value of the SKU you want selected by default for each product. If the specification doesn't exist or the value is empty, the `preferredSKU` prop is used as a fallback.
Loading