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.

Composables

To manage filters effectively, we include them directly into the query using the useFilter and useAppliedFilter composables.

useAppliedFilters

The useAppliedFilter composable formats all active filters into a ProductSearchQuery object. This object is essential for:

• Identifying which filters are currently applied.
• Fetching filtered filters and products based on the applied filters. Additionally, useAppliedFilter provides various computed values, such as the number of applied filters.

useFilter

The useFilter composable is responsible for fetching the available filters and handling the application and reset functionalities. The process of applying filters varies depending on the filter type.

Logic

When a new filter is applied:

1. The filter value is mapped with its key into a Record type.
2. This mapped filter is then merged with the current query.
3. The updated query is applied using await router.push({ query: { ...newQuery } }).

To reset a filter:

1. The key of the filter to be reset is removed from the query.
2. The updated query is then applied using await router.push({ query: { ...newQuery } }) again.

By following this approach, we ensure that filters are managed efficiently and dynamically within the application.

Customization Opportunities

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