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
Configure the campaigns based on the search results. Follow the configurations steps from this article - https://bridgeline.atlassian.net/wiki/spaces/HSKB/pages/3462464092
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 isFeaturedBottom
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.
Â