Setting up Banners

Overview

A major part of the appearance of the Hawksearch results page is having a custom layout including relevant to the search results banners and displaying information regarding active campaigns. This can be achieved few configurations steps in both the Hawksearch dashboard and in the results page template.

Goal

Setup and display the campaign information on the results page.

Prerequisite

Steps

1. Configure the campaigns based on the search results. Follow the configurations steps from this article - Campaigns

2. Extend the search results component using Example: Extending the results set . In this sample, there are a couple of Banner components defined prior and after the result set.

   <script id="vue-hawksearch-results" type="x-template"> <div class="hawk-results"> ... <banner zone="Top"></banner> ... ... <banner zone="Bottom"></banner> ... </div> </script>

   The <banner> tag is designating the position and layout of the Banner component. Each banner has a specific zone property that defines the used data set (i.e. Top, Bottom). These zones correspond to the configured zone in the Hawksearch dashboard. Their machine name can be verified from the search request response, from the Merchandising property. For example, if the selected zone is FeaturedBottom the setup should look like this:

   <script id="vue-hawksearch-results" type="x-template"> <div class="hawk-results"> ... <banner zone="FeaturedBottom"></banner> ... </div> </script>