SearchStax Studio Theme Editor Variables and Functions


Theme Editor is deprecated!

Theme Editor will no longer be supported after November 30, 2023. We encourage you to view our other Search UI options.

The SearchStax Studio 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

Questions?

Do not hesitate to contact the SearchStax Support Desk.