Commerce Teaser component written in HTL extends core wcm component Teaser, In addition to allowing definition of an image, title, rich text description and actions/links it also supports Call-To-Action to a commerce product or category page. Teaser variations can include some or all of these elements.
- Call to action linked to page, product page or category page.
- Combines image, title, rich text description and actions/links.
- Allows disabling of teaser elements through policy configuration.
- Allows control over whether title and description should be inherited from a linked page.
- Style System support.
This component uses (specifically for action
node processing) com.adobe.cq.commerce.core.components.models.teaser.CommerceTeaser
Sling Model as it's use Object.
And as CommerceTeaser component is extended from core wcm Teaser component, it further uses the com.adobe.cq.wcm.core.components.models.Teaser
Sling model as its Use-object,
The following configuration properties are used:
./actionsDisabled
- defines whether or not Call-to-Actions are disabled./pretitleHidden
- defines whether or not the pretitle is hidden./titleHidden
- defines whether or not the title is hidden./descriptionHidden
- defines whether or not the description is hidden./imageLinkHidden
- defines whether or not the image link is hidden./titleLinkHidden
- defines whether or not the title link is hidden./titleType
- stores the value for this title's HTML element type
The following configuration properties are inherited from the image component:
./allowedRenditionWidths
- defines the allowed renditions (as an integer array) that will be generated for the images rendered by this component; the actual size will be requested by the client device./disableLazyLoading
- iftrue
, the lazy loading of images (loading only when the image is visible on the client device) is disabled
The following properties are written to JCR for this Teaser component and are expected to be available as Resource
properties:
./actionsEnabled
- property that defines whether or not the teaser has Call-to-Action elements./actions
- child node where the Call-to-Action elements are stored as a list ofitem
nodes with the following properties./link
- property that stores the Call-to-Action link./productSku
- property that stores the Call-to-Action link to a product page for selected product./categoryID
- property that stores the Call-to-Action to Selected category, it is preferred overproductSku
./text
- property that stores the Call-to-Action text./linkTarget
- defines the link target of the links generated for the action.
./fileReference
- property orfile
child node - will store either a reference to the image file, or the image file./linkURL
- link applied to teaser elements. URL or path to a content page./linkTarget
- defines the link target of the links generated for the title./pretitle
- defines the value of the teaser pretitle./jcr:title
- defines the value of the teaser title and HTMLtitle
attribute of the teaser image./titleFromPage
- defines whether or not the title value is taken from the linked page./jcr:description
- defines the value of the teaser description./descriptionFromPage
- defines whether or not the description value is taken from the linked page./id
- defines the component HTML ID attribute../titleType
- stores the value for this title's HTML element type./isDecorative
- if set totrue
, then the image will be ignored by assistive technology./alt
- defines the value of the HTMLalt
attribute (not needed if./isDecorative
is set totrue
)./altValueFromDAM
- iftrue
, the HTMLalt
attribute is inherited from the DAM asset../imageFromPageImage
- iftrue
, the image is inherited from the featured image of either the linked page if./linkURL
is set or the current page../altValueFromPageImage
- iftrue
and if./imageFromPageImage
istrue
, the HTMLalt
attribute is inherited from the featured image of either the linked page if./linkURL
is set or the current page.
The component reuses the following editor client library categories that include JavaScript handling for dialog interaction. They are already included by its edit dialog:
core.cif.components.teaser.v3.editor
core.wcm.components.teaser.v1.design
core.wcm.components.teaser.v2.editor
core.wcm.components.image.v3.editor
When extending the Teaser component by using sling:resourceSuperType
, developers need to define the imageDelegate
property for
the proxy component and point it to the designated Image component.
For example:
imageDelegate="core/wcm/components/image/v3/image"
BLOCK cmp-teaser
ELEMENT cmp-teaser__image
ELEMENT cmp-teaser__content
ELEMENT cmp-teaser__pretitle
ELEMENT cmp-teaser__title
ELEMENT cmp-teaser__title-link
ELEMENT cmp-teaser__description
ELEMENT cmp-teaser__action-container
ELEMENT cmp-teaser__action-link
- Vendor: Adobe
- Version: v3
- Compatibility: AEM as a Cloud Service / AEM 6.5
- Status: production-ready