Page Comparison

Front-end customisation

The extension is prebuilt with Hawksearch Vue SDK and uses vue-hawksearch-app bundler to consolidate all dependencies in one file. The bundled JS file is located in view/frontend/web/js/vue-hawksearch-app.js file.

Customise JS components

There is a possibility to customise Vue components and re-pack the vue-hawksearch-app.js using npm. Read details about rebuilding vue-hawksearch-app.js in vue-hawksearch-app project directory.

Customise Vue templates

Vue components' templates are loaded into before.body.end block in hawksearch_esindexing_components layout handler. You can rewrite any existing template or add new templates in your own theme.

Steps to override Vue template:

1. Create .phtml file and load it into before.body.end block in hawksearch_esindexing_components layout handler.

2. Create the markup for the component template in .phtml file. Replace <component-name> with the name of overriding component
   

   Code Block
   language html
   <script id="vue-hawksearch-<component-name>" type="x-template"> <!-- Component template code --> </script>

See an example of overriding Custom Select Component.

Find the list of all available components in Development reference: List of Vue.js components or in vue-hawksearch/src/components folder on GitHub.