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

Configured Hawksearch results widget using the Vue template

https://bridgeline.atlassian.net/wiki/spaces/CON/pages/3468464142

https://bridgeline.atlassian.net/wiki/spaces/CON/pages/3468471044

https://bridgeline.atlassian.net/wiki/spaces/HSKB/pages/3462464092

Steps

  1. Configure the campaigns based on the search results. Follow the configurations steps from this article - https://bridgeline.atlassian.net/wiki/spaces/HSKB/pages/3462464092

  2. Extend the search results component using https://bridgeline.atlassian.net/wiki/spaces/CON/pages/3468467090 . 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>

     

There aren’t any banners placed by default in the results template. All required banners can be added in any desired possition, configuration, and multiple times, as long as they are enabled in the dashboard.

Â