List built from child pages of a root page. In this example the depth is 1 level but deeper structures can be configured.

Title

Text

Image

Button

Teaser

Download

List

Experience Fragment

Content Fragment

Content Fragment List

Embed

Embed a PDF Viewer widget to display Document Cloud PDF's

PDF Viewer

Progress Bar

Social Sharing

Separator

Built from Child Pages

List built from a bespoke set of pages defined directly in the component edit dialog.

Carousel

Built from Fixed List

List built from a search query term under a defined root page.

Category Carousel

Product Carousel

Related Products

Built from Search

List built from a set of tags to be found related to pages under a root page. Uses the default match Any tag feature, but it&#8217;s also possible to configure the component to match all tags.

Built from Tags

List built from child pages, with the sort order set to order by title, descending. It is also possible to order by the last modified date.

Order

List with the maximum number of items set to 4.

Max Items

The rendering of the list items can be configured to optionally display a link to the page, page description and last modified date.

Items with Link, Description and Date

List can be used to display a list of pages. They can be defined either dynamically &#8211; by search query, tags or from a parent page &#8211; or as a static list of items.

Navigation allows an author to build a site navigation. Navigation structures can be built from live copies of a blueprint, language copies of a language master or from a simple page tree.

Navigation

Language Navigation provides a language/country navigation for a site, so that visitors can navigate to the same page in a different locale.

Language Navigation

Breadcrumb allows navigation of the page hierarchy relative to the current page. It is commonly added to a page template, in the header or footer.

Breadcrumb

Templating

Title can be used to create headings for a page or page sections.

Text allows the display of a rich text paragraph on the page. Various formatting options are available.

Image allows a single image asset to be displayed on the page. Images are adaptive; the relevant image width is selected for the screen size and lazy loading is available.

Button allows the display of a button or anchor button.

Teaser allows the grouping of an image, title and description for promoting and linking to site content sections. One or more actions can also be defined.

Download allows linking to an asset for download. Optionally displays a title, description, metadata and a download action.

Experience Fragment allows an experience fragment variation to be presented on a page.

Content Fragment allows a content fragment asset, its elements and variations to be presented on a page.

Content Fragment List allows the display of a list of content fragments on a page. Useful for authoring headless content that can be easily consumed by applications.

Page Authoring

Form allows a user to create a form out of different form compontents to collect information and send it to a chosen adress.

Container

Carousel allows a user to cycle through content panels. Slides of varying component type can be created.

Tabs allow a user to switch between panels of related content. Panels of varying component type can be created.

Tabs

Accordion allows users to toggle panels of related content. Panels of varying component type can be created.

Accordian

Form

The Product Teaser component is a server side component written in HTL, allowing to display product teasers on any AEM page linking to the product details page. The product data is retrieved from Magento via GraphQL. The component is configured by an author via component dialog or drag &#038; drop.
Note: due to the limited amount of sample data available, the link to the product page will always display the same demo product.

Product teaser

The product component is a server side component written in HTL, allowing to display product details. The product details are retrieved from Magento via GraphQL using the product identifier provided in the URL selector.
On an author instance, when the page URL does not contain any selector, like for example when the page is edited in the AEM Sites editor, the component displays some placeholder data. On a publish instance, not setting any selector displays a &#8220;Product not found&#8221; message.
Note that when a selector is set, this example page always displays the same product data based on some sample data. Try different options:
<ul>
<li><a href="/content/core-components-examples/library/commerce/product.chaz-kangeroo-hoodie.html">Showing sample data (selector is set in URL)</a></li>
<li><a href="/content/core-components-examples/library/commerce/product.set-of-sprite-yoga-straps.html">Showing sample data for a grouped product (only for this particular selector in the URL)</a></li>
<li><a href="/content/core-components-examples/library/commerce/product.sprite-yoga-companion-kit.html">Showing sample data for a bundle product (only for this particular selector in the URL)</a></li>
<li><a href="/content/core-components-examples/library/commerce/product.html">Showing placeholder data on author instance (no selector in URL)</a></li>
</ul>
For the three examples with sample data, the clientlib part of the component will also issue a client-side GraphQL query to refetch the product 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.
In addition, the example showing a bundle product includes a small React application that is activated when clicking on the &#8220;Customize&#8221; button. It is used to fetch the bundle options with a client-side GraphQL request and to calculcate and prepare the product data for the cart when selecting the options of the bundle product.