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:
The component can be configured:
The component, simply displaying sample data.
- showImage: true
- showTitle: true
- loadClientPrice: true
- pageSize: 6
- sling:resourceType: cif-components-examples/components/productlist
In addition to the productlist component, this demonstrates the breadcrumb component displaying page content and commerce data up to the category page.
- startLevel: 2
- sling:resourceType: cif-components-examples/components/breadcrumb
- structureDepth: 2