Explore key components and functionalities needed to create an effective and user-friendly product listing page.
After completing this page, you should be able to:
- Identify essential features of a product listing page and explain their importance for the customer shopping experience.
- Describe how search functionalities handle user input to efficiently locate relevant products.
The product listing page (PLP) is a crucial part of any digital commerce storefront. It serves as the gateway for customers to browse, search, and discover products. A well-designed PLP helps users quickly find what they’re looking for, especially within large product catalogs.
To create an effective PLP, consider incorporating these key features:
- Category landing page
- Lets users explore products grouped into categories.
- Improves site organization and helps users stay oriented.
- Search bar
- Enables users to perform full-text searches.
- Supports searching by product name, description, SKU, product or variant key, and product attributes.
- Enhances product discoverability and speeds up the shopping journey.
- Search results page
- Lets users view the full results of their search query and refine or filter the results by criteria such as categories, price range, and attributes like color, brand, style, or material.
- Pagination and sorting
- Organizes large product sets into manageable pages.
- Offers sorting options (for example, by price, merchandise order, or newest) to personalize the list of presented products.
- Localization and personalization
- Displays prices and currencies based on the user’s region.
- Shows region- or customer-specific product availability and promotions using Store and Product Selection features.
Zen Electron's challenge: your learning task
Zen Electron was introduced in a previous module and is used as an example throughout this module. Zen Electron is building a new PLP to improve its customer experience. With a large product catalog and operations in multiple regions, the PLP must be both powerful and flexible.
Their requirements include:
- Filtering by attributes like brand, color, style, and price.
- Pagination and sorting to handle browsing through large sets of products.
- Strategic merchandising of specific products to increase their visibility to customers.
- Localization for currencies and languages.
- Controlling availability and promotions per region using Stores and Product Selections.
Using the TypeScript SDK, the goal is to build this PLP using Composable Commerce API endpoints. In this learning module, you will learn how to:
- Fetch and search product data efficiently.
- Implement filtering, pagination, and sorting.
- Work with Store contexts to retrieve localized and relevant product datasets.
- Handle price and currency adjustments based on user context.
- Map the data to the frontend in a streamlined and performant way.
You will also focus on minimizing the amount of data returned in each API call to optimize performance and improve the user experience.
Product listing page types
Digital commerce PLPs typically fall into these categories:
- Category pages: Display products belonging to a specific category or subcategory. May display category description and image on the page.
- Search results pages: Show products that match a user's search query.
- Landing pages (out of scope): While landing pages can list products, they are often managed by external systems, such as a Content Management System (CMS), and are not covered in these modules. These may also be referred to as "category landing pages" or "product listing landing pages."
This module focuses on category and search results pages.
Query Composable Commerce to build category pages
Let’s understand the difference between the first two platform options:
| Feature | Product Projections | Product Search (New Endpoint) |
|---|---|---|
| Primary purpose | Retrieve specific views (Projections) of product data (Current or Staged). | Optimized for complex, fast product searching and faceting. Primarily returns Product ID and optionally SKUs, but can return full Current projection. |
| Query language | where predicates, sort, limit, offset. | Expressive JSON-based query language (filters, facets, full-text, fuzzy, range, etc.). |
| Data returned (default) | Full Product Projection matching the query. | List of Product IDs matching the query. |
| Staged vs. current data | You need to set a query parameter to retrieve the Current Projections instead of Staged. | Indexes only Current data. Can retrieve Staged or Current projections using productProjectionParameters based on the IDs found in the index. |
| Full-text search | N/A | Advanced: fullText query expression targeting specific attributes, with must match (any/all) options. |
| Filtering/sorting: Embedded Price | Supported. Complex filters is discouraged | Supported, considers valid prices only. |
| Filtering/sorting: Standalone Price | N/A | Supported |
| Price Selection parameter | Supported | Supported |
| Faceting | N/A | Advanced faceting: startsWith, missing values, count levels (products/variants), scoping (all/query/filter). |
| Case-insensitive search | N/A | Explicit control (true/false) for exact, prefix, and wildcard queries. Default is false (case-sensitive). |
| Fuzzy search | N/A | Supported via wildcard and prefix queries. |
| Returning Tailoring Product data | Supported | Supported |
| Product Selections query | N/A | Filterable at the product and variant level within the search query. |
| Stores filter response | Supported | Supported |
| Stores filter query | N/A | Supported |
| Order by Category Order Hint | Supported | Supported |
| Fetch results that match the category or category and its child categories | Exact match on category only | Supported |
| Boost & bury | N/A | Supported (influencing result order). |
Based on the high level feature differences, we can see that Product Search is much more flexible and will support more use cases. However, for learning purposes we will still demonstrate the Product Projection API and show how we can support basic requirements for a Category page.