HawkSearch WebsiteHawkSearch DashboardHawkSearch User Guide
Guides

Developer Examples

Suggest Edits

Vue Examples

Overriding the result item component with two column layout using bootstrap classes

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 (Hawksearch.TwoColumns.cshtml for example).
  3. Edit the file adding or replacing the template override for the result item:
<script id="vue-hawksearch-result-item" type="x-template">
    <div class="row">
        <div class="col-md-6">
            <div><h3>{{ getField('title') }}</h3></div>
            <div>{{ getField('info') }}</div>
        </div>
        <div class="col-md-6">
            <div>{{ getField('content') }}</div>
        </div>
    </div>
</script>

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

  1. Include the file in the project.
  2. Save, build and reload the site.
  3. 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.

Overriding the result item component to include images and links

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 (Hawksearch.Gallery.cshtml for example).
  3. Edit the file adding or replacing the template override for the result item: 
<script id="vue-hawksearch-result-item" type="x-template">
    <div>
        <a :href="getField('url')">
            <img :src="getField('image')">
        </a>
        <p>{{ getField('description') }}</p>
    </div>
</script>

Apply the desired structure in this format. All indexed fields are accessible through getField(). Note the syntax of binding the attributes (no {{ }} and: placed before the attribute).

  1. Include the file in the project.
  2. Save, build and reload the site.
  3. 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.

Extending the result items with different layout for products and content

Steps to extend

  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 base template and name it accordingly (Hawksearch.ItemTypeResults.cshtml for example).
  3. Edit the file adding or replacing the template override for the result item: 
<script id="vue-hawksearch-result-item" type="x-template">
            <div :class="getField('contenttypename') == 'NewsItem' ? 'hawk-results__newsItem' : 'hawk-results__item'" v-on:click="onClick">
                <template v-if="getField('contenttypename') == 'NewsItem'">
                    <h4 class="hawk-results__hawk-contentTitle" v-if="getField('pageurl')">
                        <a :href="absoluteUrl(getField('pageurl'))">{{ getField('title') }}</a>
                    </h4>
                    <template v-if="getField('content')">
                        <div>{{ getField('content') }}</div>
                    </template>
                </template>
                <template v-else>
                <div v-if="getJsonData('image') && getJsonData('image').mediaUrl">
                <result-image imagePath="getJsonData('image').mediaUrl"></result-image>
                    <div class="hawk-results__item-name">
                        <span>{{ getField('title') }}</span>
                    </div>
                </div>
                </template>
            </div>
</script>

Apply the desired structure in this format. All indexed fields are accessible through getField(). Vue.js directives are applied in the template override ( Vue.js Directives ). Note that the layout of the item is based on two different types: Products or Content. Since data held in them could differ a lot, they have a specifically dedicated layout.

  1. Include the file in the project.
  2. Save, build and reload the site.
  3. 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.

Extending search results view to show additional fields based on the type of the result item

Steps to extend

  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 base template and name it accordingly (Hawksearch.ContentTypeDynamicItems.cshtml for example).
  3. Edit the file adding or replacing the template override for the result item: 
<script id="vue-hawksearch-result-item" type="x-template">
    <div>
        <template v-if="getField('contenttype') == 'Telerik.Sitefinity.Events.Model.Event'">
            <div><h3>{{ getField('title') }}</h3></div>
            <div><img :src="getField('image')"></div>
            <div>{{ getField('content') }}</div>
        </template>
        <template v-else-if="getField('contenttype') == 'Telerik.Sitefinity.News.Model.NewsItem'">
            <div><h3>{{ getField('title') }}</h3></div>
            <div>{{ getField('summary') }}</div>
            <p><a :href="getField('link')">Read more</a></p>
        </template>
        <template v-else>
            <div>{{ getField('content') }}</div>
        </template>
    </div>
</script>

Apply the desired structure in this format. All indexed fields are accessible through getField(). Vue.js directives are applied in the template override ( Vue.js Directives )

  1. Include the file in the project.
  2. Save, build and reload the site.
  3. 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.

Extending search results view to show additional fields based on the type of the result item

Steps to extend

  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 base template and name it accordingly (Hawksearch.ContentTypeDynamicItems.cshtml for example).
  3. Edit the file adding or replacing the template override for the result item: 
<script id="vue-hawksearch-result-item" type="x-template">
    <div>
        <template v-if="getField('contenttype') == 'Telerik.Sitefinity.Events.Model.Event'">
            <div><h3>{{ getField('title') }}</h3></div>
            <div><img :src="getField('image')"></div>
            <div>{{ getField('content') }}</div>
        </template>
        <template v-else-if="getField('contenttype') == 'Telerik.Sitefinity.News.Model.NewsItem'">
            <div><h3>{{ getField('title') }}</h3></div>
            <div>{{ getField('summary') }}</div>
            <p><a :href="getField('link')">Read more</a></p>
        </template>
        <template v-else>
            <div>{{ getField('content') }}</div>
        </template>
    </div>
</script>

Apply the desired structure in this format. All indexed fields are accessible through getField(). Vue.js directives are applied in the template override ( Vue.js Directives )

  1. Include the file in the project.
  2. Save, build and reload the site.
  3. 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.

Extending search results to include properties of JSON field

Steps to extend

  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 base template and name it accordingly (Hawksearch.ContentTypeDynamicItems.cshtml for example).
  3. Edit the file adding or replacing the template override for the result item:
<script id="vue-hawksearch-result-item" type="x-template">
        <div>
            <a :href="getField('url')" v-if="getJsonData('image')">
                <img :src="getJsonData('image').mediaUrl">
            </a>
        </div>
</script>

Apply the desired structure in this format. All indexed fields are accessible through getField(). If the field is a JSON object you can use the getJsonData() method. Using getJsonData() and providing the JSON field name, you can access the field properties.

In the example above mediaUrl property of the image field is accessed using the getJsonData() method.

  1. Include the file in the project.
  2. Save, build and reload the site.
  3. 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.

📘

Note

If you have inconsistent data e.g. the image field is not available for every result, null validation for getJsonData() is advised.

Extending result item component to include a field from the response object

Steps to extend

  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 base template and name it accordingly (Hawksearch.SearchResponseFieldItem.cshtml for example).
  3. Edit the file adding or replacing the template override for the result item: 
<script id="vue-hawksearch-result-item" type="x-template">
    <div>
        <div><h3>{{ getField('title') }}</h3></div>
        <div>{{ getField('content') }}</div>
        <input type="hidden" :value="getResponseField('TrackingId')">
    </div>
</script>

Note, that there is an input with a specific method invoked. Using getResponseField(), the value of the TrackingId field is passed to an element placed inside the component. The method takes the field name as a parameter. In this case, it is on the top level of the response object:

{
    "Facets": [
        ...
    ],
    "VisitorTargets": [
        {
            "Id": 9356,
            "Name": "International"
        },
        {
            "Id": 10187,
            "Name": "awe"
        }
    ],
    "TrackingId": "87ac0720-a61c-4ba7-93d6-77835c60e67c",
    "Success": true,
    "Pagination": {
		...
    },
    "Keyword": "",
    "Results": [
        ...
    ],
    "Selections": {},
    "Sorting": {
        ...
    },
    "Redirect": {},
    "Merchandising": {
        ...
    },
    "FeaturedItems": {
        ...
    },
    "SearchDuration": 34
}

Deeper properties can also be accessed:

<input type="hidden" :value="getResponseField('VisitorTargets.0.Name')">
  1. Include the file in the project.
  2. Save, build and reload the site.
  3. 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.

Extending pagination tool with custom markup

Steps to extend

  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 base template or select an existing one.
  3. Edit the file adding or replacing the template override for the pager component: 
<script id="vue-hawksearch-pager" type="x-template">
    <div class="hawk-pagination__controls">
        <template v-if="isLink">
            <a class="hawk-pagination__item" :href="previousPageLink">
                <left-chevron-svg icon-class="hawk-pagination__left" />
            </a>
        </template>
        <template v-else>
            <button class="hawk-pagination__item" @click="goToPreviousPage">
                <left-chevron-svg icon-class="hawk-pagination__left" />
            </button>
        </template>
        <input type="number" :value="page" @change="onChange" :class="hasError ? 'hawk-pagination__input error' : 'hawk-pagination__input'" min="1" :max="totalPages" />
        <span class="hawk-pagination__total-text"><span class="break"></span> of {{ totalPages }}</span>
        <template v-if="isLink">
            <a class="hawk-pagination__item" :href="nextPageLink">
                <right-chevron-svg icon-class="hawk-pagination__right" />
            </a>
        </template>
        <template v-else>
            <button class="hawk-pagination__item" @click="goToNextPage">
                <right-chevron-svg icon-class="hawk-pagination__right" />
            </button>
        </template>
    </div>
</script>

Apply the desired structure in this format. The example above adds the contextualized “page“ or “pages“ string after the total pages parameter. Keep in mind that the value and event bindings are required for the proper functioning of the component. Handle their placement with caution.

  1. Include the file in the project.
  2. Save, build and reload the site.

Extending the tab header

Steps to extend

  1. Navigate to the directory of the current active widget template (e.g. Mvc\Views\Hawksearch\Hawksearch.Default.cshtml or the relevant resource package).
  2. Copy the file of the base template or select an existing one.
  3. Edit the file adding or replacing the template override for the tabs component: 
<script id="vue-hawksearch-tabs" type="x-template">
    <div v-if="facet" class="hawk-preview__results_tabs">
        <ul class="nav nav-tabs">
            <li v-for="tab in tabs" :class="tabClasses(tab)" v-on:click="onClick(tab)">
                <a class="nav-link">{{ tab.Label }}</a>
            </li>
        </ul>
    </div>
</script>

Apply the desired structure in this format. Proceed with caution with the tabClasses (applies active class) and the onClick handler.

  1. Include the file in the project.
  2. Save, build and reload the site.

Extending suggestion components

Steps to extend

  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 base template or select an existing one.
  3. Edit the file adding or replacing the template override for the suggestion list component: 
<script id="vue-hawksearch-search-suggestions" type="x-template">
    <div class="autosuggest-menu">
        <template v-if="fieldFocused && (loadingSuggestions || suggestions)">
            <ul class="dropdown-menu autosuggest-menu__list autosuggest-outer-list">
                <template v-if="loadingSuggestions">
                    <li class="autosuggest-menu__item">{{ $t('Loading') }}...</li>
                </template>
                <template v-else-if="suggestions.Products.length">
                    <ul class="autosuggest-inner-list">
                        <suggestion-item v-for="item in suggestions.Products" :item="item" :key="item.Results.DocId" v-on:itemselected="onItemSeleted"></suggestion-item>
                    </ul>
                </template>
                <template v-else>
                    <li class="autosuggest-menu__item">{{ $t('No Results') }}</li>
                </template>
            </ul>
        </template>
    </div>
</script>
  1. Edit the file adding or replacing the template override for the suggestion item component: 
<script id="vue-hawksearch-suggestion-item" type="x-template">
    <li v-on:click="onClick">
        <p>{{ item.ProductName }}</p>
    </li>
</script>
  1. Save, build and reload the site.

Extending facet selections component

Steps to extend

  1. Navigate to the directory of the current active widget template (e.g. Mvc\Views\Hawksearch\Hawksearch.Default.cshtml or the relevant resource package).
  2. Copy the file of the base template or select an existing one.
  3. Edit the file adding or replacing the template override for the selections component: 
<script id="vue-hawksearch-selections" type="x-template">
    <div v-if="hasSelections" class="hawk-facet-rail__selections">
        <h4>{{ $t("You've Selected") }}</h4>
        <ul class="hawk-selections">
            <li v-for="(data, field) in selections" :key="field" class="hawk-selections__category">
                <div class="hawk-selections__category-wrapper">
                    <span class="hawk-selections__category-name">{{ data.Label }}:</span>
                    <ul class="hawk-selections__item-list">
                        <li v-for="item in data.Items" :key="item" class="hawk-selections__item">
                            <button v-on:click="clearSelectionItem(field, item)" class="hawk-selections__item-remove">
                                <x-circle-svg></x-circle-svg>
                            </button>
                            <span :class="itemClass(item)">
                                <template v-if="getFacetType(field) == 'range'">
                                    {{ rangeLabel(item.Label) }}
                                </template>
                                <template v-else>
                                    {{ item.Label }}
                                </template>
                            </span>
                        </li>
                    </ul>
                </div>
                <button v-on:click="clearSelectionField(field)" class="hawk-selections__category-remove">
                    <x-circle-svg></x-circle-svg>
                </button>
            </li>
            <li class="hawk-selections__category">
                <button v-on:click="clearAll" class="hawk-btn hawk-btn-primary-outline">
                    {{ $t("Clear All") }}
                </button>
            </li>
        </ul>
        <p class="tab-selection">{{ tabSelection.Label }}</p>
    </div>
</script>

Apply the desired structure in this format. There are three handlers: clearAll - for discarding all facets, clearSelectionField - for clearing a single facet and clearSelectionItem for clearing a value from multiple choice facets. Since the tab selection is also a type of facet a tabSelection object is exposed.

  1. Include the file in the project.
  2. Save, build and reload the site.

Extending the results set

Steps to extend

  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 base template or select an existing one.
  3. Edit the file adding or replacing the template override for the results component: 
<script id="vue-hawksearch-results" type="x-template">
    <div class="hawk-results">
        <search-results-label />
        <banner zone="Top"></banner>
        <selections />
        <template v-if="searchError">
            <span>{{ $t('response_error_generic') }}</span>
        </template>
        <template v-else-if="searchOutput && searchOutput.Results && searchOutput.Results.length == 0">
            <span>{{ $t('No Results') }}</span>
        </template>
        <template v-else-if="!waitingForInitialSearch">
            <tabs></tabs>
            <div class="hawk-results__top-tool-row">
                <tool-row />
            </div>
            <result-listing />
            <div class="hawk-results__bottom-tool-row">
                <tool-row />
            </div>
        </template>
        <banner zone="Bottom"></banner>
    </div>
</script>
  1. Include the file in the project.
  2. Save, build and reload the site.

Change from pagination to continuous loading

Goal
Change the results loading from standard pagination to a “load more“behaviour.

Steps

  1. Extend the Results component
  2. In the template, override remove all instance of . Add the component after the . The end result should look like this:
<script id="vue-hawksearch-results" type="x-template">
    <div class="hawk-results">
        <search-results-label />
        <banner zone="Top"></banner>
        <selections />
        <template v-if="searchError">
            <span>{{ $t('response_error_generic') }}</span>
        </template>
        <template v-else-if="searchOutput && searchOutput.Results && searchOutput.Results.length == 0">
            <span>{{ $t('No Results') }}</span>
        </template>
        <template v-else-if="!waitingForInitialSearch">
            <tabs></tabs>
            <result-listing />
            <load-more />
        </template>
        <banner zone="Bottom"></banner>
    </div>
</script>
  1. Add a template override for the LoadMore component if necessary
<script id="vue-hawksearch-load-more" type="x-template">
    <div class="text-center">
        <button v-if="!noMoreResults" v-on:click="loadMoreResults">Load More</button>
    </div>
</script>
  1. Include the file in the project.
  2. Save, build and reload the site.

Extending result item component with date fields

Steps to extend

  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 base template and name it accordingly (Hawksearch.CustomDateFormat.cshtml for example).
  3. Edit the file adding or replacing the template override for the result item. Make sure to parse the date in the format from the search request-response. Additional information on date parsing formats can be found here.
<script id="vue-hawksearch-result-item" type="x-template">
    <div>
        <p>{{ moment(getField('date'), 'YYYY-MM-DD').format('DD, M YYYY') }}</p>
    </div>
</script>
  1. Include the file in the project.
  2. Save, build and reload the site.
  3. 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.

Updated about 1 year ago