BigCommerce: Vue SDK - Create components

Overview

The Vue widgets can be implemented in all page or component templates in the Stencil theme as long as the appropriate root element is available. These structures can also be set as a separate template file and reused with similar configurations multiple times. Here are some samples on how to create an inline element in the page template along with some samples on different types of Hawksearch widgets.

Structure of Single Page Application

<div data-hawksearch-component="results">
    <div class="hawk">
        <div class="hawk__header">
            <search-box></search-box>
        </div>

        <div class="hawk__body">
            <facet-list></facet-list>

            <results></results>
        </div>
    </div>
</div>

This is the most basic implementation of the Vue.js widget. Its root element has only the data component attribute required for the initialization. The widget contains the three main Vue components - search box, facet list, results. They can be arranged in any convenient way using HTML markup. The root element can be updated with additional data attributes that serve as an integration point for the widget. For instance, having a data-hawksearch-index-name attribute will set the widget’s index name to a different value than the default config. Being an “all-purpose” widget, it is not used that often. Preferably, the integration structure should be achieved with several widgets, working synchronously.

Common widget types

Hawksearch box - BigCommerce: Vue SDK - Create search box
Hawksearch results - BigCommerce: Vue SDK - Create search results