Product Listing Page

Overview

The Product Listing Page (PLP) is a crucial component of the Storefront Boilerplate, designed to display a collection of products to users. It provides essential features such as product filtering, sorting, pagination, category navigation, and product tiles, enhancing the shopping experience and aiding in product discovery.

Key Features:

1. Side Navigation: A category tree provides an easy option to switch between nested categories and root categories.
2. Product Tiles: Provides a brief overview of a product without leaving the page.
3. Sorting: Enables users to sort products by relevance, price, popularity, and more.
4. Filtering: Allows users to filter products based on various criteria (e.g., price, brand and size).
5. Pagination: Efficiently manages large product collections by dividing them into manageable pages.

Filters Logic

The order of filters displayed in Storefront Boilerplate is determined by the SCAYLE Panel configuration and the order in which filters are returned by the Storefront API. To learn how to customize which filters are returned, checkout the Customization Guide for the PLP.

When applying a filter, you may notice that other filters adjust automatically. This feature simplifies filter usage by displaying only relevant options based on users' selections.

Example Scenario: If a user selects the "Shirts" category and applies the "Green" color filter, the size and price range filters will dynamically update to reflect only the available options. For instance, if only sizes M and L are available within a price range of 20-50 Euros, the size filter will display only M and L, and the price range filter will be adjusted accordingly.

Filter Combination Logic:

• Single Filter Options: When multiple filter options are selected from the same filter group, they are combined using OR logic. For example, selecting colors "Green" and "Yellow" will display products in either color.
• Multiple Filters: When combining different filter groups, they use AND logic. For example, selecting "Green" and "Yellow" colors, and sizes "M" and "L" will display products that are either green or yellow, and in sizes M or L.

Data Fetching

The Product Listing Page requires three data fetching operations. Two of these operations occur directly within the page component: fetching the category and fetching the products. The third operation takes place within the FilterSlideIn component, where the filters are fetched.

Both the products and filters fetch operations require category information. The category data is passed to both RPCs to ensure the necessary context is provided for accurate data retrieval. This setup ensures that the category, products, and filters are all correctly synchronized.

Customization Opportunities

To explore the customization options for your PLP page, please refer to our Customization Guideline.