Productlistv2
The Product List component is a server side component written in HTL, allowing to display product listings. The product listings for a category are retrieved from Adobe Commerce via GraphQL using the product identifier provided in the URL suffix.
On an author instance, when the page URL does not contain any suffix, like for example when the page is edited in the AEM editor, the component displays some placeholder data. On a publish instance, not setting any suffix redirects to the 404 page.
Note that when a suffix is set, this example page always displays the same products data based on some sample data. Try:
- Showing sample data (suffix is set in URL)
- Showing sample data with staged products (suffix is set in URL)
- Showing 404 page on publish instance (no suffix in URL)
The component can be configured:
- to display/hide the category image if there is any.
- to display/hide the category title.
- to show a given number of products per page.
- to dynamically load products prices in an additional client-side (browser) query after page load.
When available, the component will also display search aggregations/facets that can be used to further refine the displayed products. There is also a pagination bar added at the bottom. Note that the filters and the pagination do not have any effect on this example page, but you can see in the URL how these extra parameters would be passed as query parameters.
For the example with sample data, the clientlib part of the component will also issue a client-side GraphQL query to refetch the products prices on page load. This demonstrates how prices can be refreshed upon page load even if the rest of the page data may be cached in the AEM dispatcher.
