Overview

The Content Zone component renders a list of content items or Spotlight products as defined in the Merchandising section of Hawksearch.

Selector

The selector for this component is <hawksearch-content-zone>.

Attributes

Attribute	Type	Required
name	`string`	Yes

The name attribute corresponds to the Zone property defined in Hawksearch. This is used to differentiate different content areas, allowing you to place content items exactly where you want within your search results page.

Data Model

The following data model is exposed to the Handlebars template:

{
  name: string;
  items: Array<ContentType>;
}

For more information, see Content Models.

Hawksearch allows you to display a different content item for breakpoints targeting mobile, tablet, and desktop devices. For more information on customizing these breakpoints, see Installation.

Event Binding Attributes

Attribute Name	Attribute Value

Handlebars Helpers

Name	Parameter

Events

Event Name	Data Type

Default Template

<div class="content-zone">
    {{#each items}}
        {{#if (eq type 'custom')}}
            <hawksearch-custom-content index="{{@index}}"></hawksearch-custom-content>
        {{/if}}
        {{#if (eq type 'featured-items')}}
            <hawksearch-featured-items-content index="{{@index}}"></hawksearch-featured-items-content>
        {{/if}}
        {{#if (eq type 'image')}}
            <hawksearch-image-content index="{{@index}}"></hawksearch-image-content>
        {{/if}}
        {{#if (eq type 'popular-queries')}}
            <hawksearch-popular-queries index="{{@index}}"></hawksearch-popular-queries>
        {{/if}}
    {{/each}}
</div>

Content Zone Component