SearchStax Site Search Theme Editor Variables and Functions

---

The SearchStax Site Search solution’s Theme Editor uses the Vue.js library to manage the appearance and behavior of the theme’s Hosted Search Page. You can edit the search page HTML and CSS in the Theme Editor, and let your stakeholders see the results at the Hosted Page URL.

The Theme Editor exposes a variety of variables and functions for your use. These tools are scoped for use in individual Theme Editor templates.

Results Template Variables

The following variables are available within the Results Template.

Parameter	Type	Description	Example
isGridLayout	boolean	Returns “true” if the layout is “grid.” You can use this to specify a different CSS for “grid” layout vs “list” layout.	true
ribbon	string	Data for the mapped “ribbon” field as returned by the search.	Webpage
title	string	Data for the mapped “title” field as returned by the search.	Managed <em>Solr</em> Services Pricing | SearchStax
url	string	Data for the mapped “url” field as returned by the search.	https://www.searchstax.com/solr-as-a-service/pricing/
paths	string	Data for the mapped “paths” field as returned by the search.	solr-as-a-service / pricing
thumbnail	string	Data for the mapped “thumbnail” field as returned by the search.
date	string	Data for the mapped “date” field as returned by the search.	August 30, 2021
snippet	string	Data for the mapped “snippet” field as returned by the search.
result	string	Object containing all unparsed result data for more complex implementations.	{ “paths”: “solr-as-a-service / pricing”, “content”: “Rely on a highly available, secure <em>Solr</em> infrastructure. Create world-class search experiences. Non-production Environments, prototyping, or small… applications. <em>Solr</em> Operations and Expertise as an Extension of your Team. For Companies Building Products/Apps with Embedded <em>Solr</em> for their Customer Base. * Gold… , Aliases and any custom JARs. Store your backups in another region of added security.. SearchStax supports Managed <em>Solr</em> deployments in Virtual Private Clouds”, “meta_keywords_facet”: “solr cloud hosting… solr hosting… hosted solr… hosted apache solr… apache solr… solr cloud… solr monitoring”, “url”: “https://www.searchstax.com/solr-as-a-service/pricing/”, “content_type”: “Webpage”, “title”: “Managed Solr Services Pricing | SearchStax”, “[elevated]”: true }
promoted	boolean	Flag if the search result is promoted (true/false).	false

Facets Template Functions/Variables

The following variables are available within the Facets Template.

Parameter	Type	Description	Example
showMobileSideMenu	boolean	Determines if mobile facet choosing overlay is visible.	false
facet_qs	array	Array of selected facets passed through query params. Used to select facets on reload. It gets auto-filled when selecting a facet.	[ “content_type:\”Blog\”” ]
clearFilters	function	Function that clears selected facets.	<div @click=“clearFilters” > Clear <div>
closeSideMenu	function	Function that sets showMobileSideMenu to false.	<div @click=“closeSideMenu” > Close <div>
computedFacets	array	Array of facets used as an iterator.	<div v-for=”(facet, index) in computedFacets” :key=”index”>
cleanValue	function	For strings – changes ‘_’ to spaces. For undefined – returns as empty string. For array – joins each value with ‘, ‘ and replaces ‘_’ with spaces for each value.	{{ cleanValue(getFieldValue(facet.facet_name, row.label)) }}
getFieldValue	function	Function that extracts value based on field_formatters.	{{ cleanValue(getFieldValue(facet.facet_name, row.label)) }}
doMoreFacets	function	Function that accepts index of facet section that needs to be expanded.	<div @click=“doMoreFacets” > More <div>
doLessFacets	function	Function that accepts index of facet section that needs to be collapsed.	<div @click=“doLessFacets” > Less <div>

Results Summary Variables

These variables are available in the Results Summary editor.

Parameter	Type	Description	Example
hasResults	boolean	Determines if search had any results.	true
searchStore.searchFired	boolean	True when search was executed.	true
searchStore.startDoc	number	Index of first item on the page relevant to all search results.	1
searchStore.endDoc	number	Index of last item on the page relevant to all search results.	10
searchStore.totalResults	number	Number of all results found.	47
searchStore.searchTerm	string	Searched term.	solr

Empty Results Functions/Variables

The following variables are available for the Empty Results template.

Parameter	Type	Description	Example
searchStore.searchFired	boolean	True when search was executed.	true
hasResults	boolean	Determines if search had any results.	false
searchStore.searchTerm	string	Searched term.	solar
hasSpellingSuggestion	boolean	Determines if there are spelling suggestions.	false
searchStore.spellingSuggestion	string	Text of a spelling suggestion.	solr
onSpellingSuggestionClick	function	Trigger spelling suggestion click and search.	<a href=”#” @click=”onSpellingSuggestionClick” >{{ searchStore.spellingSuggestion }}</a>

Search Box Functions/Variables

The following variables are available in the Search Box template.

Parameter	Type	Description	Example
autoSuggest	boolean	Determines if auto suggest is turned on.	true
storeState.studioConfig.hideBranding	boolean	Determines if branding should be shown.	true
storeState.searchTerm	string	Searched term.	solr
storeState.searchSuggestions	array	Array of suggestions.	[ { “data”: [“<b>sea</b>rchstudio”, “<b>sea</b>rch configuration”, “<b>sea</b>rchstax”1}]
onSuggestionInputChange	function	Updates storeState.searchSuggestions when new input is typed into the search field.	@input=”onSuggestionInputChange”
onSuggestionClick	function	Triggers search for a suggestion.	@keyup.enter.prevent=”onSuggestionClick”
suggestion.item	string	A suggestion item.	<template slot-scope=”{ suggestion }”> <div v-html=”suggestion.item” /> </template>
searchWithNoAutoSuggest	function	Should be called when autosuggest not enabled.	@change=”searchWithNoAutoSuggest”
SearchHelper.search	function	Trigger search.	<button type=”submit” @click=”SearchHelper.search”> Search </button>

Result Options Functions/Variables

These variables are available in the Result Options template.

Parameter	Type	Description	Example
searchStore.searchFired	boolean	True when search was executed.	true
hasResults	boolean	Determines if search had any results.	true
searchStore.viewDisplay	string	Either of these values ‘multi’ | ‘grid’.	true
searchStore.layoutGrid	boolean	Determines if grid layout.	true
layoutStyle	function	Toggles layout style.	{{layoutStyle()}}
hasMostRecent	boolean	Determines if date is mapped and sort by can be displayed.	true
searchStore.sort_method.selected	string	Selected sort method.	date desc
SearchHelper.search	function	Triggers search.	<button type=”submit” @click=”SearchHelper.search”> Search </button>
searchStore.sort_method.options	array	Array of sort options.	[ { “key”: “”, “value”: “Relevance” }, { “value”: “Newest Content”, “key”: “date desc” }, { “value”: “Oldest Content”, “key”: “date asc” } ]

Result Pagination Variables

These variables are available in the Result Pagination Template.

Parameter	Type	Description	Example
searchStore.loading	boolean	Determines if search in progress.	true
searchStore.startDoc	number	Index of first item on the page relevant to all search results.	1
searchStore.endDoc	number	Index of last item on the page relevant to all search results.	10
searchStore.totalResults	number	Number of all results found.	1703