---
schema_version: "1"
id: 4261b6f7685f1a548e7d4987996c199fcbb217769a134e6ea06ec2243f251a5c
title: Product List Page (Category/PLP)
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/salesforce-commerce/guides/d2c-commerce/b2b-comm-headless-product-list-page.md
canonical_url: https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-comm-headless-product-list-page.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f51808ab6111b3a4374f7de96de3a586565ee6aae1ec3716c485b6574a82e2c4
products:
  - B2B Commerce Developer Guide
  - Salesforce APIs
---
# Product List Page (Category/PLP)

### Overview

The Product List Page shows products for a selected category, including pagination controls and product result counts. The page automatically re-executes the product search whenever the category ID, pagination state, or selected refinement filters change.

This flow demonstrates how a headless storefront can render category-based product experiences using B2B Commerce Product APIs.

![Product List Page API Flow](https://developer.salesforce.com/media/d2c-commerce/b2b-headless-b2b-commerce-headless-flow-orchestration-product-list-page-category-plp-b2b-commerce-apis-used-in-the-flow-9-1.png '{"class": "image-lg", "title": "Product List Page API Flow"}')

### B2B Commerce APIs Used in the Flow

| Purpose                            | HTTP Method | Endpoint                                                                                                                                                                                        |
| ---------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Search by category and refinements | GET         | [`/commerce/webstores/{webstoreId}/search/product-search`](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_commerce_webstore_product_search.htm) |

**note:** The endpoint GET [`/commerce/webstores/{webstoreId}/search/products`](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_commerce_webstore_search_products.htm) is also supported. However, prefer the POST-based search API because it supports the complete request body schema, including refinements, field selection, and `includePrices`. The POST approach also avoids URL length limitations that can occur when multiple refinement filters are applied.

### Buyer Journey

**Render Products for a Category**

1. Load the category product listing page.

2. Build the product search request using the following parameters:

   - `categoryId`
   - `page=0`
   - `pageSize=12`
   - No refinements

3. Call the following endpoint to retrieve products for the selected category:

   POST [`/commerce/webstores/{webstoreId}/search/product-search`](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_commerce_webstore_product_search.htm)

4. Use the response to render:

   - Product grid
   - Results count
   - Pagination controls

   The response includes:

   - `productsPage`—Contains the product list and total result count

5. Re-run the product search whenever the following values change:

   - `categoryId`
   - Page index
   - Refinement set

**Paginate Product Results**

1. Select Previous or Next to navigate between result pages.

2. Update the page index in the product search request.

3. Call the following endpoint again with the updated page parameter:

   POST [`/commerce/webstores/{webstoreId}/search/product-search`](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_commerce_webstore_product_search.htm)

4. Use the updated response to render the next set of products.

### Extend the Flow

- Modify the `pageSize` parameter in the search request to control pagination behavior, and the number of products returned per page.
- To add sorting support, include a `sortRuleId` in the search request body.
- Retrieve available sorting rules using:

  [GET `/commerce/webstores/{webstoreId}/search/sort-rules`](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_commerce_webstore_search_sort_rules.htm)

## See Also

- [_B2B Commerce Developer Guide_: B2B Commerce Product and Category APIs](https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-d2c-comm-product-category-apis.html)