Versions Compared

Version Old Version 2 New Version Current
Changes made by

gabriel.georgiev (Deactivated)

Joyce Chu

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagejs
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 1822)

  • The basic initialization (line 2832)

    Code Block
    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 are is more than one widget on this page (i.e. search box, results). For that reason, we save the newly created data layer (line 2933)

  • 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 2428)

    Code Block
    var widget = HawksearchVue.createWidget(component, { config, store: widgetStore });

  • If the type of widget is results, it is preferable to make an initial search (line 3337)

Next steps

BigCommerce: Vue SDK - Create components

...