Synchronized widgets

Overview

Implementing a connection to the Hawksearch service with the Vue SDK presents a platform specific front-end behavior that enhances the structure of the page layout. More specifically, to this point point we created widgets that are self contained (i.e. SPA) or used through redirect (searchbox and results). Vue.js allows to create interconnected widgets on a single page even if they are created as entirely separate entities (different files, definition of root elements etc.). This so called common data layer allows the component to propagate data and events between them, in spite of their separation.

Prerequisite

Steps to configure

1. Create four widgets: two search boxes and two result widgets. With them we will create two separate data layers searchbox-one → results-one and searchbox-two → results-two. The difference between the two data layers will be the targeted index name (e.g. index1, index2)

   1. Template

      <div class="search-header"> <div style="display: inline-block;"> <div id="searchbox-one"> <search-box></search-box> </div> </div> <div style="display: inline-block;"> <div id="searchbox-two"> <search-box></search-box> </div> </div> </div> <div class="search-results"> <div style="display: inline-block;"> <div id="results-one"> <search-box></search-box> </div> </div> <div style="display: inline-block;"> <div id="results-two"> <search-box></search-box> </div> </div> </div>

      Note there is a difference in the structure we’ve used so far. Instead of one root element with embedded components, there are for separate root elements. Placing them in one file doesn’t look like much of a difference, but this layout may be the product of a template engine or a CMS widget designer.

   2. Widgets initialization
      The widgets initialization can be separate, but for demo purposes we will create them all together

      const config1 = { clientGuid: '9c2a78v6bc9977w0929w88rf576y4476', apiUrl: 'https://searchapi.hawksearch.net/api/v2/search/', dashboardUrl: 'https://dev.hawksearch.net/', indexName: 'index1' } const config2 = { clientGuid: '9c2a78v6bc9977w0929w88rf576y4476', apiUrl: 'https://searchapi.hawksearch.net/api/v2/search/', dashboardUrl: 'https://dev.hawksearch.net/', indexName: 'index2' } HawksearchVue.createWidget(document.getElementById('searchbox-one'), { config: config1, dataLayer: 'index1' }); HawksearchVue.createWidget(document.getElementById('results-one'), { config: config1, dataLayer: 'index1' }); HawksearchVue.createWidget(document.getElementById('searchbox-two'), { config: config2, dataLayer: 'index2' }); HawksearchVue.createWidget(document.getElementById('results-two'), { config: config2, dataLayer: 'index2' });

      Two different configurations are created for each data layer. After that the createWidget method is invoked on the dedicated elements and the widgets are paired two by two.

2. Save, re-build and preview the page. Performing a query on the left search box will update only the left results widget and the right search box - only the right results.