ProductList container

The ProductList container displays a list of ProductItemCard components with sorting, pagination, and filtering capabilities. It handles both search-based product listings and category-based product views, managing URL parameters, loading states, and error handling.

Configurations

The ProductList container provides the following configuration options:

Slots

The ProductList container supports the following slots:

• Header - Customizes the header section (typically contains sort dropdown)
• ProductActions - Customizes the action buttons for each product (e.g., “Add to Cart”)
• ProductPrice - Customizes the price display for each product
• ProductImage - Customizes the product image display
• ProductName - Customizes the product name display
• Footer - Customizes the footer section (typically contains pagination)

Each slot receives a context object containing relevant data:

• product - Individual Product object (for product-specific slots)
• productList - Complete product array (for Header/Footer slots)
• defaultImageProps - Default image properties (for ProductImage slot)

Features

Sorting

• Dynamic sort options based on available product attributes
• Category-specific and search-specific sort options
• URL parameter synchronization for sort state
• Default sort options with internationalization support

Pagination

• Configurable page size
• URL parameter synchronization for current page
• Automatic reset to page 1 on new searches
• Total pages calculation based on results

URL state management

• Synchronizes search phrase with q URL parameter
• Manages sort order with product_list_order parameter
• Handles filter parameters in URL
• Maintains pagination state in URL
• Supports browser back/forward navigation

Loading states

• Skeleton loading with placeholder products
• Initialization flags to control loading display
• Graceful error handling with user-friendly messages

Examples

Basic search implementation

import { ProductList } from '@adobe-commerce/storefront-search-dropin';

function SearchResults() {
  const handleProductRoute = (product) => {
    return `/products/${product.sku}`;
  };

  return (
    <ProductList
      minQueryLength={2}
      pageSize={24}
      routeProduct={handleProductRoute}
    />
  );
}