BigCommerce: Vue SDK - Extend component functionalities

Overview

Although extending only the template is usually enough for most customizations, some features may require extending the functionalities of the component. For this sample, again the update component will be ResultItem.

Steps for customizations

1. Create a subfolder alongside the Vue SDK initialization file (e.g. assets/js/hawksearch/vue/components)

2. Create a ResultItem vue single file component in it.
   
   assets/js/hawksearch/vue/components/ResultItem.vue

   <template>
       <div class="custom-classes" v-on:click="onClick">
           <p>{{ customMethod() }}</p>
       </div>
   </template>
   
   <script>
       import { ResultItem } from '@hawksearch/vue';
   
       export default {
           extends: ResultItem,
           methods: {
               customMethod: function () {
                   return 'Lorem ipsum';
               }
           }
       };
   </script>

   • Note that in this file both template and scripts are initialized

   • The default ResultItem component is imported from the Vue SDK and the custom one extends it

   • A customMethod is additionally defined for this component

3. The newly created file must be included in the initialization script and attached to his parent
   
   assets/js/hawksearch/vue/index.js

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