Product Listing Page

Overview

The Product Listing Page (PLP) is a crucial component of the Storefront Application, 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 and View: Allows users to filter products based on various criteria (e.g., price, brand and size) and switch the primary product image (e.g., "model view" vs. "product view").
5. Pagination: Efficiently manages large product collections by dividing them into manageable pages.

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.

Filters

Filters are crucial tools that help your users narrow down product searches and find items that meet their specific criteria. Well-maintained and business-focused filters should be a pillar of every successful e-commerce business.

Filters on the PLP are configured within the SCAYLE Panel and are displayed to users in a filter flyout. These filters include Image View Toggle, default filters, which apply across all categories, and category-specific filters based on individual category attributes. For detailed configuration instructions, please refer to the PLP Configuration Guide.

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.

Image View Toggle

The "Image View Toggle" empowers your shop users to dynamically switch the primary product image displayed on PLPs. This allows customers to choose their preferred visual representation of products (e.g., on a model, as a flat lay, or a detailed close-up), enhancing their browsing experience and personalization.

How it Works:

• This toggle appears in the filter flyout.
• It presents different "view" options (e.g., "Default view," "Model view") as clickable chips.
• When a user selects an option, the primary images of products on the PLP update instantly to reflect that chosen view.
• The available view options are driven by image attributes (specifically, the primaryImageType attribute group) that you define in the SCAYLE Panel and assign to your product images via the Admin API.
• If a product doesn't have an image for the selected view, it will gracefully fall back to displaying its default image.

Customization & Flexibility:

• You can define various image types (e.g., "lifestyle," "back view," "detail shot") using these attributes, making the toggle highly generic and adaptable to your specific product catalog and branding needs.
• You also have the option to remove the "Default view" from the toggle, relying entirely on your custom-defined image types. To do this you just need stop fetching the primaryImageType attribute by removing it from the withKeys of PRODUCT_TILE_WITH_PARAMS :

diff

Copy

User Experience:

• The component is only displayed if relevant image attributes are present on products in the current PLP view, keeping the interface clean when not applicable.

Logic

All image-related logic (how images are sorted and which image is shown first) within the Storefront Application can be found in utils/image.ts. By default, it includes a basic implementation using a primaryImage attribute to determine which image is displayed first. This attribute needs to be assigned to an image for each product. However, this setup may not align with your specific needs or business requirements.

The image logic essentially consists of two parts: first, a function that prioritizes and sorts all product images. This function dictates the order in which images are displayed on both the Product Card Component and the Product Detail Page.

typescript

Copy

Additionally, the second part is a simple function that retrieves the primary image of a product. This function is used in scenarios where only a single image is displayed, without the need for an image slider.

typescript

Copy

For detailed instructions on how to set up primaryImageType attributes in the Panel and assign them to your products, please refer to the PLP Configuration Guide.

Sorting Options

The Storefront Application provides the most common default sorting options out of the box:

• Recommended
• Newest
• Price descending
• Price ascending
• Reduction descending

The "Recommended" sorting option is selected by default. It is also reset to the default when changing categories.

The sorting logic is handled within the composables/useProductListSort.ts file. To adjust the sorting that is selected by default, you can change the DEFAULT_SORTING_KEY:

typescript

Copy

In the same file, you can adjust the available sorting options, e.g., remove one or reorder one according to your business requirements. Furthermore, since the default sorting options are exported, they can easily be used on the consumer side if a dynamic option update (e.g., smart sorting keys) is needed.

typescript

Copy

Smart sorting keys

The sorting key for the "Recommended" option can be changed to utilize Custom Sorting Key or Smart Sorting Key or a combination of both, provided by SCAYLE. See the Configuration Guide for setup instructions.

Once Sorting Keys are configured in the SCAYLE Panel for Categories or entire shops on the global shop level or shop country level, you can include them in any category RPC method by setting the includeProductSorting boolean flag. This will trigger a call to the relevant category endpoint.

typescript

Copy

Furthermore, it will be retrieved as a part of the Category payload typed like this:

typescript

Copy

When the productSorting data is included in the Category payload, you can easily manipulate it. This allows for dynamic injection into sorting options, enabling the appropriate application of smart or custom sorting keys. This is demonstrated in the PLP page code example below:

typescript

Copy

Product Cards

Product Cards in e-commerce are visual representations of individual products, which serve as a quick way for customers to browse and evaluate products throughout your shop. Even though it consists of a standard setup of components in our Storefront Application, they can also be customized to offer a more engaging & user-friendly shopping experience specific to the needs of your business. For example, its functionality can be extended to display additional product information or custom UI elements.

Our ProductCard composes multiple smaller components which then form the final ProductCard component.

We have the following components:

• ProductCardImageSlider which is responsible to display the product images
• WishlistToggle which renders the heart icon in the top right corner
• ProductCardBadgesHeader which render the badges in the top left corner
• ProductCardBadgesFooter which render the badges at the bottom of the ProductCardImageSlider
• ProductCardDetails which renders the information below the ProductCardImageSlider

Badges

Badges are used to provide quick, additional categorization of products, highlighting features, novelty, or other attributes. The current implementation includes the following badge types:

• New In Badge: Indicates a newly added product. See the Configuration Documentation for details.
• Custom Badges: Highlight specific product features or attributes (e.g., sustainability, unisex). Learn how to add or modify them in the Configuration Guide.
• Already in basket: The badge is displayed on products that have already been added to the user's shopping basket. This badge helps users quickly identify items they've already selected, reducing the chance of accidental duplicate purchases.

Badge Display

If both default (e.g., "New In") and custom badges are applied to a product, they are displayed together in one component, separated by a visual delimiter. In the current implementation, the number of badges displayed in this component is limited to two.

This customization allows you to tailor the product tiles to better fit your store's branding and highlight key product attributes effectively.

Customization Opportunities

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