Versions Compared

Old Version 1

changes.mady.by.user Viktor Kurtev (Unlicensed)

Saved on

compared with

New Version Current

changes.mady.by.user Viktor Kurtev (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

In this page you’ll find:

Table of Contents

Goal

The purpose of this article is to show you how to extend the existing search box widget.

Overview

All components in the Vue.js framework are quite extendable and can be modified to handle custom layout, styles and behaviour. This is possible due to the built-in capability of the platform to attach templates as script tag and therefore supplying a dynamic structure of the presentation.

Prerequisite

Info

Configured Hawksearch widgets - Kentico: Working with widgets

Extending the

...

templates

  1. In order to

...

  1. override the

...

  1. default view file the Hawksearch search box widget uses you need to create a

...

  1. razor view file in your

...

  1. frontend project at Views/Shared/Components/

...

  1. SearchBox/

...

  1. Default.cshtml.

  2. In order to add additional templates, create corresponding view files under Views/Shared/Components/SearchBox/ .

    When displayed in the widget settings, they will be split by capital letters and words after the first will be lowercased. So a view file called “SearchBoxTemplateOne“ will be displayed like “Search box template one” in the widget settings.

    The way the connector is designed it will automatically find

...

  1. the razor view files in that folder and use them. Below is the

...

  1. Default.cshtml code used for each NuGet version.

Kentico 12 NuGet

Code Block
@model Hawksearch.Kentico.Xperience.UI.Widgets.SearchBoxViewModel

@{
    var trackedEvents = new List<string>()
{
        Model.ComponentViewModel.Properties.TrackAutocompleteClickEvent ? "AutocompleteClick" : "",
        Model.ComponentViewModel.Properties.TrackSearchEvent ? "Search" : ""
    };

    var eventsJson = Newtonsoft.Json.JsonConvert.SerializeObject(trackedEvents.Where(a => !string.IsNullOrEmpty(a)));

    var settingsJson = Newtonsoft.Json.JsonConvert.SerializeObject(Model.ConnectorSettings);

    var language = Model.ConnectorSettings.MultilingualIndexingEnabled ?
                                    CMS.Localization.LocalizationContext.CurrentCulture.CultureCode : "";
}

@if (Model.ConnectorSettings.FrontendFramework == Hawksearch.Kentico.Xperience.CMS.Configuration.FrontendFrameworkType.Vue)
{
    <div class="vue-app-wrapper-ae"
         data-indexname="@Model.Properties.IndexName"
         data-language="@language"
         data-trackedevents="@eventsJson"
         data-hawksearchsettings="@settingsJson">
        <div class="hawk">
            <div class="hawk__header">
                @if (string.IsNullOrWhiteSpace(Model.SearchPageUrl))
                {
                    <search-box></search-box>
                }
                else
                {
                    <search-box search-page="@Model.SearchPageUrl"></search-box>
                }
            </div>
        </div>
    </div>
}
else
{
    <div id=" style="display:flex;"hawksearch-react-search-box"
         data-indexname="@Model.Properties.IndexName"
         data-language="@language"
         data-trackedevents="@eventsJson"
         data-hawksearchsettings="@settingsJson"
         data-searchpageurl="@Model.SearchPageUrl">
    </div>
}

Kentico 13 NuGet

Code Block
@model Hawksearch.Kentico.Xperience.UI.Widgets.SearchBoxViewModel

@{
    var trackedEvents = new List<string>()
{
        Model.ComponentViewModel.Properties.TrackAutocompleteClickEvent ? "AutocompleteClick" : "",
        Model.ComponentViewModel.Properties.TrackSearchEvent ? "Search" : ""
    };

    var eventsJson = Newtonsoft.Json.JsonConvert.SerializeObject(trackedEvents.Where(a => !string.IsNullOrEmpty(a)));

    var settingsJson = Newtonsoft.Json.JsonConvert.SerializeObject(Model.ConnectorSettings);

    var language = Model.ConnectorSettings.MultilingualIndexingEnabled ?
                                    CMS.Localization.LocalizationContext.CurrentCulture.CultureCode : "";
}

@if (Model.ConnectorSettings.FrontendFramework == Hawksearch.Kentico.Xperience.CMS.Configuration.FrontendFrameworkType.Vue)
{
    <div class="vue-app-wrapper-ae"
         data-indexname="@Model.ComponentViewModel.Properties.IndexName"
         data-language="@language"
         data-trackedevents="@eventsJson"
         data-hawksearchsettings="@settingsJson">
        <div class="hawk">
            <div class="hawk__header">
                @if (string.IsNullOrWhiteSpace(Model.SearchPageUrl))
                {
                    <search-box></search-box>
                }
                else
                {
                    <search-box search-page="@Model.SearchPageUrl"></search-box>
                }
            </div>
        </div>
    </div>
}
else
{
    <div id="hawksearch-react-search-box"
         data-indexname="@Model.ComponentViewModel.Properties.IndexName"
         data-language="@language"
         data-trackedevents="@eventsJson"
         data-hawksearchsettings="@settingsJson"
         data-searchpageurl="@Model.SearchPageUrl">
    </div>
}

Feel free to modify the given code to your liking, but there are a few things to be careful of. It is important to note that the overall widget needs to be wrapped in a div element with the class “vue-app-wrapper-ae“ and to have the data attributes present as in the snippet above, otherwise functionality might not work as expected. Currently, the connector locates those divs in a page when initializing the Vue.js components.

Additional resources

Info

If you’d like to use some additional components, please refer to the following pages: