Learning PathModule

Build product listing pages

Learn how to build a product listing page using the commercetools TypeScript SDK.

Build with AI: The commercetools AI plugin speeds up development, but AI models can make mistakes. This module teaches you the knowledge to critically evaluate solutions and identify generated errors.

AI assistance does not transfer accountability; you remain responsible for all production code. Review, test, and verify AI-generated output to the same standard as manual code.

Learning objectives

After completing this module, you should be able to:

  • Design and implement a functional product listing page using the commercetools TypeScript SDK, incorporating features such as search, filtering, faceting, and pagination.
  • Optimize product listing pages for usability and performance by applying best practices related to navigation, filtering, search refinement, and data presentation.
Agenda
  1. Essential features of a product listing page
  2. Use Product Projections
  3. Use Product Search
  4. Control facet calculations
  5. Use postFilter
  6. Implement search results pages with facets
  7. Learning check
Prerequisites
Audience
  • Backend developers building the backend for frontend (BFF) layer of the digital commerce website.
  • Frontend developers building digital commerce product listing pages.