Content Zone Component
- Jordan Kasper (Deactivated)
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 |
| 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 |
|---|---|
index |
|
To render a content item, the index attribute must be present with a value corresponding to the item’s index in the items array.
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>