Front-end Customization

The extension is pre-built 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.

To Replace a default component hawksearchVueSDK with a custom one, place your requirejs-config.js file in one of the following directories:

Your theme files: <theme_dir>
Your module view files: <module_dir>/view/frontend

Your requirejs-config.js should contain the following:

var config = {
  "map": {
    "*": {
      "hawksearchVueSDK": "<custom_component>",
    }
  }
};

<custom_component> could be a path to a file in module's view directory, for example Vendor_Module/js/vue-hawksearch-app or path to a theme file, for example js/custom-vue-hawksearch-app.

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:

Create .phtml file and load it into before.body.end block in hawksearch_esindexing_components layout handler.
Create the markup for the component template in .phtml file. Replace <component-name> with the name of overriding component

<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.

Extend VUE SDK config

VUE SDK configuration options can be extended before VUE widget is initialized. The recommended approach to customize any of VUE configuration option is to create After plugin for config processor. All VUE config processors are located in \HawkSearch\EsIndexing\Model\Layout\ConfigProcessor\Vue namespace
For example, to extend Search Config follow these steps:

Declare the plugin in etc/frontend/di.xml of your custom Vendor_Module extension

<type name="HawkSearch\EsIndexing\Model\Layout\ConfigProcessor\Vue\VueSearchConfigProcessor">
    <plugin name="SearchConfigExtended" type="Vendor\Module\Plugin\VueSearchConfigProcessorExtentedPlugin" />
</type>

Define the plugin method


<?php
namespace Vendor\Module\Plugin;

use HawkSearch\EsIndexing\Model\Layout\ConfigProcessor\Vue\VueSearchConfigProcessor;

class VueSearchConfigProcessorExtentedPlugin
{
    public function afterProcess(VueSearchConfigProcessor $subject, $result, $jsConfig)
    {
        $jsConfig['searchConfig']['infiniteScroll'] = true;
        return $jsConfig;
    }
}