AEM Content & Commerce Authoring Pickers

AEM Content & Commerce Authoring provides a set of authoring tools to help AEM authors and marketers efficiently work with commerce product data and catalogs. The Product Picker and Category Picker are part of CIF add-on and used by the CIF Core Components. Projects can use these pickers in any component dialog to select products or categories.

Product Picker

To use the product picker in a project component a developer must add commerce/gui/components/common/cifproductfield to a component dialog. For example, use the following for the cq:dialog:

<product jcr:primaryType="nt:unstructured"
    sling:resourceType="commerce/gui/components/common/cifproductfield"
    fieldDescription="The product or product variant displayed by the teaser"
    fieldLabel="Select Product"
    filter="folderOrProductOrVariant"
    name="./selection"
    selectionId="sku"/>

The product field allows to navigation to the product a user want to select via the different views. By default the product field returns the ID of the product, but it can be configured using the selectionId attribute.

The product picker field supports the following optional properties:

  • selectionId (id, uid, sku, slug, combinedSlug, combinedSku) - allows to choose the product attribute to be returned by the picker (default = id). Using sku returns the sku of the selected product, while using combinedSku and returns a string like base#variant with the skus of the base product and the selected variant, or a single sku if a base product is selected.
  • filter (folderOrProduct, folderOrProductOrVariant) - filters the content to be rendered by the picker while navigating the product tree. folderOrProduct - renders folders and products. folderOrProductOrVariant - renders folders, product and product variants. If a product or product variant is rendered, it becomes also selectable in the picker. (default = folderOrProduct)
  • multiple (true, false) - enable the selection of one or multiple products (default = false)
  • emptyText - to configure the empty text value of the picker field

Also, standard diaglog field properties like name, fieldLabel, or fieldDescription are supported as well.

CAUTION

The cifproductfield component requires the cif.shell.picker clientlib. To add a clientlib to a dialog, you can use the extraClientlibs property.

CAUTION

Starting with CIF Core Components version 2.0.0 the support for id was removed and replaced with uid. We highly recommend using sku or slug as product identifier. We continue to support id only for projects using CIF Core Components version 1.x.

A full working example of the cifproductfield can be found in the CIF Core Components project. See also Customizing Dialogs of the AEM Core Components documentation.

Category Picker

The category picker can be used in a component dialog as well in a similar way like the product picker.

The following snippet can be used in a cq:dialog configuration:

<category jcr:primaryType="nt:unstructured" 
    sling:resourceType="commerce/gui/components/common/cifcategoryfield" 
    fieldLabel="Category" 
    name="./categoryId" 
    selectionId="uid" />

The category picker field supports the following optional properties:

  • selectionId(id, uid, slug, urlPath, idAndUrlPath (deprecated), uidAndUrlPath (deprecated)) - allows to choose the category attribute to be returned by the picker (default = id).
  • multiple (true, false) - enable the selection of one or multiple categories (default = false)

Also, standard diaglog field properties like name, fieldLabel, or fieldDescription are supported as well.

CAUTION

Same as the cifproductfield component the cifcategoryfield component also requires the cif.shell.picker clientlib. To add a clientlib to a dialog, you can use the extraClientlibs property. See Customizing Dialogs of the AEM Core Components documentation.

CAUTION

Starting with CIF Core Components version 2.0.0 the support for id was removed and replaced with uid. We highly recommend using uid or urlPath as category identifier. We continue to support id & idAndUrlPath only for projects using CIF Core Components version 1.x.

A full working example of the cifcategoryfield can be found in the CIF Core Components project.

On this page