Skip to content
bpauli Add trackingFeature property to component dialog definitions (#482)
* Add trackingFeature property to component dialog definitions

fixes #477
Latest commit 699aacd Mar 1, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
itemTemplate.html Preparing changes for release 2.0.0 Jan 10, 2018

Quick Search (v1)

Search component written in HTL.


Use Object

The Search component uses the com.adobe.cq.wcm.core.components.models.Search Sling model as its Use-object.


When the user is scrolling down the results, if the hidden results below are less than the visible results, more results are fetched.

Component Policy Configuration Properties

The following configuration properties are used:

  1. ./searchRoot - the root page from which to search. Can be a blueprint master, language master or regular page.
  2. ./resultsSize - the maximal number of results fetched by a search request
  3. ./searchTermMinimumLength - the minimum required length of the search term before results are fetched

Edit Dialog Properties

The following properties are written to JCR for the Search component and are expected to be available as Resource properties:

  1. ./searchRoot - the root page from which to search. Can be a blueprint master, language master or regular page.

Client Libraries

The component provides a client library category that contains a recommended base CSS styling and JavaScript component. It should be added to a relevant site client library using the embed property.

BEM Description

BLOCK cmp-search
    ELEMENT cmp-search__form
    ELEMENT cmp-search__field
    ELEMENT cmp-search__icon
    ELEMENT cmp-search__input
    ELEMENT cmp-search__loading-indicator
    ELEMENT cmp-search__clear
    ELEMENT cmp-search__clear-icon
    ELEMENT cmp-search__results
    ELEMENT cmp-search__item
    ELEMENT cmp-search__item-mark
    ELEMENT cmp-search__item-title
        MOD cmp-search__item--is-focused

JavaScript Data Attribute Bindings

Apply a data-cmp-is="search" attribute to the wrapper block to enable initialization of the JavaScript component.

The following attributes can be added to the same element to provide options:

  1. data-cmp-min-length - populated with searchTermMinimumLength from the component's policy configuration
  2. data-cmp-results-size - populated with resultsSize from the component's policy configuration

A hook attribute from the following should be added to the corresponding element so that the JavaScript is able to target it:



You can’t perform that action at this time.