BigCommerce: Vue SDK - Initialization

Overview

This article will provide basic information on how to initialize a Vue.js widget for Hawksearch. All additional custom functionalities go on top of this initialization and either expose or extend features of the Vue SDK.

Prerequisite

BigCommerce: Vue SDK - Install

BigCommerce: Vue SDK - Setup configuration

Initialization process

Let’s overview the following initialization script

assets/js/hawksearch/vue/index.js

import HawksearchVue from '@hawksearch/vue';
import defaultConfig from 'hawksearch.config.json';

export default function () {
    var components = document.querySelectorAll('[data-hawksearch-component="results"], [data-hawksearch-component="search-box"]');
    var dataLayers = {};

    if (components) {
        components.forEach(component => {
            var config = defaultConfig;

            config.clientGuid = component.getAttribute('data-hawksearch-client-guid') || defaultConfig.clientGuid;
            config.indexName = component.getAttribute('data-hawksearch-index-name') || defaultConfig.indexName;
            config.apiUrl = component.getAttribute('data-hawksearch-search-api') || defaultConfig.apiUrl;
            config.dashboardUrl = component.getAttribute('data-hawksearch-dashboard-url') || defaultConfig.dashboardUrl;
            config.websiteUrl = component.getAttribute('data-hawksearch-website-url') || defaultConfig.websiteUrl;

            if (component.getAttribute('data-hawksearch-landingpage')) {
                config.additionalParameters = { "CustomUrl": component.getAttribute('data-hawksearch-landingpage') };
            }

            var dataLayer = ('index_' + component.getAttribute('data-hawksearch-index-name'));

            if (dataLayers.hasOwnProperty(dataLayer)) {
                var widgetStore = HawksearchVue.storeInstances[dataLayers[dataLayer]];

                if (widgetStore) {
                    var widget = HawksearchVue.createWidget(component, { config, store: widgetStore });
                }
            }
            else {
                var widget = HawksearchVue.createWidget(component, { config });
                dataLayers[dataLayer] = HawksearchVue.getWidgetStore(widget).state.storeId;
            }

            if (widget && component.getAttribute('data-hawksearch-component') == 'results') {
                HawksearchVue.initialSearch(widget);
            }
        });

    }
}

The script follows the structure noted in this article - imports the main class from the SDK and exports an anonymous function for the app.js invocation.
Also imported is the configuration file (line 2)
The widget’s root elements are queried by a designated data attribute selector (line 5). In this case a search box and a results widget.
For each of the root elements, a configuration object is created based on the general default configuration object. Any specific settings are additionally updated based on the available data attributes (line 10 through 16)
The landing page is parsed, if available (line 19)
The data layer is fetched based on the index name. This is an optional step required for multiple widgets placed on the same page (line 22)
The basic initialization (line 32)
var widget = HawksearchVue.createWidget(component, { config });
creates the widget on top of the root element with the provided configuration object. This type of initialization can also be used when there is only one widget on the page (e.g. search box redirecting, single page application)
For the given example, it is presumed that there is more than one widget on this page (i.e. search box, results). For that reason, we save the newly created data layer (line 33)
If a widget is provided with the same index as another on the same page, the data layer is reused and this type of initialization is used (line 28)
var widget = HawksearchVue.createWidget(component, { config, store: widgetStore });
If the type of widget is results, it is preferable to make an initial search (line 37)

Next steps

BigCommerce: Vue SDK - Create components