Example: Override Results component using Slick.js carousel

Steps to override

1. Navigate to the directory of the currently active widget template (e.g. Mvc\Views\Hawksearch\Hawksearch.Default.cshtml or the relevant resource package).

2. Copy the file of the Default template and name it accordingly

3. Ensure jQuery is loaded on the page:

   @Html.Script(ScriptRef.JQuery, "top", false)

4. Make sure Slick.js resources are loaded:

   @Html.Script("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js", "top", false) @Html.StyleSheet("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css", "head") @Html.StyleSheet("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css", "head")

5. Edit the file adding or replacing the template override for the result item:

   <script id="vue-hawksearch-result-listing" type="x-template"> <div> <template> <div class="hawk-results__listing"> <template v-if="!loadingResults && results && results.length"> <div class="slider-area slider" style="width:700px"> <result-item v-for="result in results" :key="result.docid" :result="result"></result-item> </div> </template> </div> </template> </div> </script> <script> window.addEventListener('load', function () { setTimeout(function () { if (HawksearchVue && Object.values(HawksearchVue.widgetInstances).length) { Object.values(HawksearchVue.widgetInstances)[0].$on('resultsupdate', function () { setTimeout(function () { $(".slider-area").slick({ dots: true, infinite: false, slidesToShow: 1, slidesToScroll: 1, }); }, 1) }) } }, 1) }) </script>

   Apply the desired structure in this format. All indexed fields are accessible through getField().

6. Include the file in the project.

7. Save, build and reload the site.

8. Open the widget designer for Hawksearch results widget on the designated page and select the newly created template from the select list. Save and publish the page. Configuring Hawksearch results widget

Related articles