BigCommerce: Vue SDK - Extend component templates

Overview

All of the available main and inner components are available for modifications at a template level. This is usually used when site-specific styles and markup are applied. For this sample, the result item from the list of fetched results is extended.

Steps to extend

1. Open the initialization file for edit (assets/js/hawksearch/vue/index.js)

2. Import all components requiring template extending (e.g. ResultItem)
   
   assets/js/hawksearch/vue/index.js

   ... import { ResultItem } from '@hawksearch/vue'; ...

    

3. Set a template override id for the component

   ResultItem.templateOverride = "#vue-hawksearch-result-item";

4. Place the template override layout alongside the widget template. For the result item this should be the results widget.
   
   

   templates\components\hawksearch\results.html

   <div data-hawksearch-component="results"> <div class="hawk"> <div class="hawk__body"> <facet-list></facet-list> <results></results> </div> </div> </div> <script id="vue-hawksearch-result-item" type="x-template"> <div class="custom-classes" v-on:click="onClick"> <p>\{{ getField('custom_search_field') }}</p> </div> </script>

    

   • The script tag contains the new layout for the result item. Note that it is defined by id and therefore should be the only override for this component on a page.

   • All Vue.js directives are available for this override. To prevent conflicts with the Stencil theme parser, the fields in {{ }} are escaped.