BigCommerce: Vue SDK - Setup configuration

Overview

The integration to the Hawksearch service requires several configuration parameters to be provided to the search request. These are usually set for a specific instance of the site integration. For instance, a website can have a configuration object common to all Hawksearch widgets, and its development, stage and production instances will have variations to that configuration corresponding to their appropriate APIs and settings.

Setup

Separate configuration file

A more generic approach is to create a separate file specifically for the Hawksearch configuration. It may be placed in the designated integration folder (e.g. assets/js/hawksearch), or in another convenient place. It should be a JSON file with the following structure:

hawksearch.config.json

{
    "apiUrl": "https://searchapi-dev.hawksearch.net/",
    "dashboardUrl": "https://dev.hawksearch.net/",
    "clientGuid":  "9c2a78v6bc9977w0929w88rf576y4476",
    "searchConfig": {
        "scrollUpOnRefresh": false
    }
}

Using the theme settings file

Since most of the configurations for the theme are placed in the config.json file, it is a convenient place to set the Hawksearch settings alongside other general settings. This may additionally improve management since all other setups are common among the website instances and the config.json may provide any dedicated behavior per site.

config.json

{
    "name": "Cornerstone",
    "version": "4.12.1",
    ...
    "hawksearch-config": {
        "apiUrl": "https://searchapi-dev.hawksearch.net/",
        "dashboardUrl": "https://dev.hawksearch.net/",
        "clientGuid": "9c2a78v6bc9977w0929w88rf576y4476",
        "searchConfig": {
            "scrollUpOnRefresh": true
        }
    },
    ...
}

Next steps

BigCommerce: Vue SDK - Initialization