searchstudio-ux-vue Archives - SearchStax Docs

What is searchstudio-ux-vue

Bruce — Wed, 13 Sep 2023 20:52:52 +0000

What is searchstudio-ux-vue

Searchstudio-ux-vue offers the power of the SearchStax Site Search solution within Vue.js applications. It provides ready-made Vue components that integrate seamlessly to deliver exceptional search experiences.

Goal of the Components Library

The goal of SearchStudio-UX-Vue is to streamline the development of stunning search UIs in Vue.js apps by handling all frontend and UI complexities.

It offers a suite of Vue components like search box, results, filters etc. that can be easily combined to create engaging search interfaces. The focus on performance, accessibility and visual appeal allows you to craft remarkable search UIs with minimal effort.

Key Benefits of Using SearchStudio-UX-Vue

Fully integrates with Site Search capabilities like typo tolerance, synonyms, facets etc.
Ready-made performant and accessible Vue components for search
Customizable components to match your brand style
Handles UI complexities allowing you to focus on UX
Quickly build visually appealing search experiences
Leverage Site Search features without UI implementation concern
Seamless integration into existing Vue.js applications

Get started now to build awesome search experiences faster than ever before with searchstudio-ux-vue.

The post What is searchstudio-ux-vue appeared first on SearchStax Docs.

Getting Started with searchstudio-ux-vue

Bruce — Wed, 13 Sep 2023 17:05:19 +0000

Getting Started with searchstudio-ux-vue

Example

This is an example of using Vue with the SearchStax Site Search solution.

For a full example, see searchstudio-ux-vue.

Installation

Install the searchstudio-ux-vue package:

npm install --save @searchstax-inc/searchstudio-ux-vue

Import and Register Components

Import and globally register the Site Search components:

import { SearchstaxWrapper, SearchstaxInputWidget } from '@searchstax-inc/searchstudio-ux-vue';

Vue.component('SearchstaxWrapper', SearchstaxWrapper);
Vue.component('SearchstaxInputWidget', SearchstaxInputWidget);

Wrapper Component

Wrap all other Site Search components within the SearchstaxWrapper component:

<SearchstaxWrapper>

<!-- Other SearchStudio components here -->

</SearchstaxWrapper>

Configuration

Pass search configuration to the SearchstaxWrapper component:

<SearchstaxWrapper
    :language="sampleConfig.language"
    :searchURL="sampleConfig.searchURL"
    :suggesterURL="sampleConfig.suggesterURL"
    :trackApiKey="sampleConfig.trackApiKey"
    :searchAuth="sampleConfig.searchAuth"
    :authType="sampleConfig.authType"
    :router="sampleConfig.router"
    :beforeSearch="sampleConfig.hooks.beforeSearch" 
    :afterSearch="sampleConfig.hooks.afterSearch"
  >
  </SearchstaxWrapper>

Initialization example:

sampleConfig = {
    language: "en",
    searchURL: "",
    suggesterURL: "",
    trackApiKey: "",
    searchAuth: "",
    authType: "basic",
    router: {
      enabled: true,
      routeName: "searchstax",
      title: (result: ISearchObject) => {
        return "Search results for: " + result.query;
      },
      ignoredKeys: [],
    },
    hooks: {
      beforeSearch: function (props: ISearchObject) {
        const propsCopy = { ...props };
        return propsCopy;
      },
      afterSearch: function (results: ISearchstaxParsedResult[]) {
        const copy = [...results];
        return copy;
      },
    }
  };

Initialization object needs to be of type: ISearchstaxConfig

interface ISearchstaxConfig {
  language: string; // language code. Example: 'en'
  searchURL: string; // SearchStudio select endpoint
  suggesterURL: string; //SearchStudio suggest endpoint
  trackApiKey: string; // Api key used for tracking events
  searchAuth: string; // Authentication value. based on authType it's either a token value or basic auth value
  authType: "token" | "basic"; // Type of authentication
  autoCorrect?: boolean; // if set to true it will autoCorrect misspelled words. Default is false
  router?: IRouterConfig; // optional object containing router settings
  hooks?: {
    // optional object that provides various hook options
    beforeSearch?: (props: ISearchObject) => ISearchObject | null; // this function gets called before firing search. searchProps are being passed as a property and can be modified, if passed along further search will execute with modified properties, if null is returned then event gets canceled and search never fires.
    afterSearch?: (results: ISearchstaxParsedResult[]) => ISearchstaxParsedResult[]; // this function gets called after firing search and before rendering. It needs to return array of results that are either modified or untouched.
  };
}

Adding Components

Add any Site Search components needed:

<SearchstaxWrapper>

  <SearchstaxInputWidget />

  <SearchstaxResultsWidget />

<!-- Other components -->

</SearchstaxWrapper>

Styles

Import the CSS styles:

@import '@searchstax-inc/searchstudio-ux-vue/dist/styles/mainTheme.css';

See the Styling section for information on theming and customization.

The post Getting Started with searchstudio-ux-vue appeared first on SearchStax Docs.

Vue Widgets

Bruce — Wed, 13 Sep 2023 21:48:44 +0000

Searchstudio-ux-vue Widgets

The SearchStax Site Search solution offers a variety of Vue widgets for your custom search page.

To learn more about the Searchstudio-ux-vue Widgets, follow the links to each page to see the templates and examples:

SearchstaxInputWidget – provides a search input box with autosuggest/autocomplete functionality
SearchstaxResultWidget – displays the search results
SearchstaxFacetsWidget – displays the facet filters
SearchstaxPaginationWidget – displays pagination controls for search results
SearchstaxSearchFeedbackWidget – displays search feedback like number of results found
SeaerchstaxExternalPromotionsWidget – displays external promotions fetched from the API
SearchstaxSortingWidget – displays sorting options for search results

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Vue Widgets appeared first on SearchStax Docs.

SearchstaxInputWidget for Vue

Bruce — Wed, 13 Sep 2023 21:49:55 +0000

SearchstaxInputWidget Vue

SearchStax Site Search solution offers a Vue search-input widget to assist with your custom search page.

The SearchstaxInputWidget provides a search input box with autosuggest/autocomplete functionality.

Usage

<SearchstaxInputWidget
          :afterAutosuggest="afterAutosuggest"
          :beforeAutosuggest="beforeAutosuggest"
          :suggestAfterMinChars="3"
></SearchstaxInputWidget>

Props

afterAutosuggest – Callback function invoked after autosuggest results are received. Allows modifying the suggestions.
beforeAutosuggest – Callback function invoked before making the autosuggest API call. Allows modifying the request parameters.
searchInputId – ID of the search input element. Default: searchstax-search-input
suggestAfterMinChars – Minimum number of characters required to trigger autosuggest. Default: 3

Slots

#input

Allows customizing the input box UI.

Slot props:

suggestions – Array of autosuggestion results
onMouseLeave – Handler for mouse leave event
onMouseOver – Handler for mouse over event
onMouseClick – Handler for mouse click event

Usage

<SearchstaxInputWidget
          :afterAutosuggest="afterAutosuggest"
          :beforeAutosuggest="beforeAutosuggest"
          :suggestAfterMinChars="3"
></SearchstaxInputWidget>

Example

<SearchstaxInputWidget
          :afterAutosuggest="afterAutosuggest"
          :beforeAutosuggest="beforeAutosuggest"
          :suggestAfterMinChars="3"
>
	<template #input="{ suggestions, onMouseLeave, onMouseOver, onMouseClick }">
            <div class="searchstax-search-input-wrapper">
              <input
                type="text"
                id="searchstax-search-input"
                class="searchstax-search-input"
                placeholder="SEARCH FOR..."
              />
              <div
                class="searchstax-autosuggest-container"
                :class="{ 'hidden': suggestions.length === 0 }"
                @mouseleave="onMouseLeave"
              >
                <div
                  class="searchstax-autosuggest-item"
                  v-for="suggestion in suggestions"
                  :key="suggestion.term"
                >
                  <div
                    class="searchstax-autosuggest-item-term-container"
                    v-html="suggestion.term"
                    @mouseover="onMouseOver(suggestion)"
                    @click.stop="onMouseClick()"
                  ></div>
                </div>
              </div>
              <button
                class="searchstax-spinner-icon"
                id="searchstax-search-input-action-button"
              >
              </button>
            </div>
	</template>
</SearchstaxInputWidget>

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post SearchstaxInputWidget for Vue appeared first on SearchStax Docs.

SearchstaxResultWidget for Vue

Bruce — Wed, 13 Sep 2023 21:51:15 +0000

Searchstax ResultWidget for Vue

The SearchStax Site Search solution offers a Vue results widget to assist with your custom search page.

The SearchstaxResultsWidget component displays the search results.

Props

afterLinkClick – Callback function invoked when a result link is clicked. Allows modifying the result object.

Slots

#noResult

Custom content when no results are found.

#results

Custom template for rendering the results.

Slot props:

searchResults – Array of result items
resultClicked – Handler for result click events

Usage

<SearchstaxResultWidget :afterLinkClick="afterLinkClick">
</SearchstaxResultWidget>

Example

<SearchstaxResultWidget :afterLinkClick="afterLinkClick">
              <template #results="{ searchResults, resultClicked }">
                <div
                  class="searchstax-search-results"
                  v-if="searchResults && searchResults.length"
                >
                  <div
                    class="searchstax-search-result"
                    :class="{ 'has-thumbnail': searchResult.thumbnail }"
                    :key="searchResult.uniqueId"
                    v-for="searchResult in searchResults"
                  >
                    <div
                      v-if="searchResult.promoted"
                      class="searchstax-search-result-promoted"
                    ></div>
                    <a
                      v-if="searchResult.url"
                      :href="searchResult.url"
                      :data-searchstax-unique-result-id="searchResult.uniqueId"
                      @click="resultClicked(searchResult, $event)"
                      class="searchstax-result-item-link"
                    ></a>
                    <div
                      v-if="searchResult.ribbon"
                      class="searchstax-search-result-ribbon"
                    > {{ searchResult.ribbon }} </div>
                    <img
                      v-if="searchResult.thumbnail"
                      :src="searchResult.thumbnail"
                      class="searchstax-thumbnail"
                    />
                    <div class="searchstax-search-result-title-container">
                      <span class="searchstax-search-result-title">{{ searchResult.title }}</span>
                    </div>
                    <p
                      v-if="searchResult.paths"
                      class="searchstax-search-result-common"
                    > {{ searchResult.paths }} </p>
                    <p
                      v-if="searchResult.description"
                      class="searchstax-search-result-description searchstax-search-result-common"
                    > {{ searchResult.description }} </p>
                    <div
                      :key="unmappedField.key"
                      v-for="unmappedField in searchResult.unmappedFields"
                    >
                      <div
                        v-if="unmappedField.isImage && typeof unmappedField.value === 'string'"
                        class="searchstax-search-result-image-container"
                      >
                        <img
                          :src="unmappedField.value"
                          class="searchstax-result-image"
                        />
                      </div>
                      <div v-else>
                        <p class="searchstax-search-result-common"> {{ unmappedField.value }} </p>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
</SearchstaxResultWidget>

The component handles fetching results from the search API and passing them to the slots. Slots allow full customization of result templates and no result content.

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post SearchstaxResultWidget for Vue appeared first on SearchStax Docs.

SearchstaxFacetsWidget for Vue

Gurinder Singh — Thu, 14 Sep 2023 15:56:08 +0000

SearchstaxFacetsWidget for Vue

The SearchStax Site Search solution offers a Vue SearchstaxFacetsWidget component to display facets on your custom search page.

Facet Selection and Order

Facet lists are configured and ordered on the Site Search Faceting Tab.

Props

facetingType – Faceting mode: ‘and’, ‘or’, ‘showUnavailable’, ‘tabs’
itemsPerPageDesktop – Facets to show per group on desktop
itemsPerPageMobile – Facets to show per group on mobile
specificFacets – Array of facet names to display

Slots

#desktopFacets

Custom template for desktop facets.

Slot props:

facetsTemplateDataDesktop – Facets data object
isNotDeactivated – Check if facet group is active
toggleFacetGroup – Toggle facet group active state
isChecked – Check if facet value is selected
selectFacet – Handler for facet select
showMoreLessDesktop – Show more/less facets handler
facetContainers – Object of facet DOM containers

#mobileFacets

Custom template for mobile facets.

Slot props:

facetsTemplateDataMobile – Facets data object
selectedFacetsCheckboxes – Selected facet values
Other handlers (same as #desktopFacets)

Usage

<SearchstaxFacetsWidget
              :facetingType="'or'"
              :itemsPerPageDesktop="3"
              :itemsPerPageMobile="99"
></SearchstaxFacetsWidget>

The **SearchstaxFacetsWidget** component displays the facet filters.

Props

facetingType – Faceting mode: ‘and’, ‘or’, ‘showUnavailable’, ‘tabs’
itemsPerPageDesktop – Facets to show per group on desktop
itemsPerPageMobile – Facets to show per group on mobile
specificFacets – Array of facet names to display

Slots

#desktopFacets

Custom template for desktop facets.

Slot props:

facetsTemplateDataDesktop – Facets data object
isNotDeactivated – Check if facet group is active
toggleFacetGroup – Toggle facet group active state
isChecked – Check if facet value is selected
selectFacet – Handler for facet select
showMoreLessDesktop – Show more/less facets handler
facetContainers – Object of facet DOM containers

#mobileFacets

Custom template for mobile facets.

Slot props:

facetsTemplateDataMobile – Facets data object
selectedFacetsCheckboxes – Selected facet values
Other handlers (same as #desktopFacets)

Usage

<SearchstaxFacetsWidget
              :facetingType="'or'"
              :itemsPerPageDesktop="3"
              :itemsPerPageMobile="99"
></SearchstaxFacetsWidget>

Example

<SearchstaxFacetsWidget
              :facetingType="'or'"
              :itemsPerPageDesktop="3"
              :itemsPerPageMobile="99"
            >
              <template
                #desktopFacets="{ facetsTemplateDataDesktop, isNotDeactivated, toggleFacetGroup, isChecked, selectFacet, showMoreLessDesktop, facetContainers }"
              >
                <div
                  v-if="facetsTemplateDataDesktop?.hasResultsOrExternalPromotions"
                  class="searchstax-facets-container-desktop"
                >
                  <div
                    v-for="facet in facetsTemplateDataDesktop.facets"
                    :key="facet"
                    class="searchstax-facet-container"
                    :class="{ 'active': isNotDeactivated(facet.name) }"
                  >
                    <div>
                      <div
                        class="searchstax-facet-title-container"
                        @click="toggleFacetGroup(facet.name)"
                      >
                        <div class="searchstax-facet-title"> {{ facet.label }} </div>
                        <div class="searchstax-facet-title-arrow active"></div>
                      </div>
                      <div class="searchstax-facet-values-container">
                        <div
                          v-for="(facetValue, key) in facet.values"
                          :key="facetValue.value + facetValue.parentName"
                          class="searchstax-facet-value-container"
                          :class="{ 'searchstax-facet-value-disabled': facetValue.disabled }"
                          :ref="el => { facetContainers[key + facet.name] = el }"
                        >
                          <div class="searchstax-facet-input">
                            <input
                              type="checkbox"
                              class="searchstax-facet-input-checkbox"
                              :checked="isChecked(facetValue)"
                              :disabled="facetValue.disabled"
                              @click="selectFacet(key + facet.name, $event, facetValue, true)"
                            />
                          </div>
                          <div
                            class="searchstax-facet-value-label"
                            @click="selectFacet(key + facet.name, $event, facetValue, false)"
                          >{{ facetValue.value }}</div>
                          <div
                            class="searchstax-facet-value-count"
                            @click="selectFacet(key + facet.name, $event, facetValue, false)"
                          >({{ facetValue.count }})</div>
                        </div>
                        <div
                          class="searchstax-facet-show-more-container"
                          v-if="facet.hasMoreFacets"
                        >
                          <div
                            class="searchstax-facet-show-more-container"
                            @click="showMoreLessDesktop($event, facet)"
                          >
                            <div
                              v-if="facet.showingAllFacets"
                              class="searchstax-facet-show-less-button searchstax-facet-show-button"
                            >less</div>
                            <div
                              v-else
                              class="searchstax-facet-show-more-button  searchstax-facet-show-button"
                            >more</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <template
                #mobileFacets="{ facetsTemplateDataMobile, selectedFacetsCheckboxes, isNotDeactivated, toggleFacetGroup, isChecked, selectFacet, showMoreLessDesktop, facetContainers, openOverlay, unselectFacet, unselectAll, closeOverlay }"
              >
                <div
                  class="searchstax-facets-container-mobile"
                  v-if="facetsTemplateDataMobile?.hasResultsOrExternalPromotions"
                >
                  <div class="searchstax-facets-pills-container">
                    <div
                      class="searchstax-facets-pill searchstax-facets-pill-filter-by"
                      @click="openOverlay"
                    >
                      <div class="searchstax-facets-pill-label">Filter By</div>
                    </div>
                    <div class="searchstax-facets-pills-selected">
                      <div
                        class="searchstax-facets-pill searchstax-facets-pill-facets"
                        v-for="facet in selectedFacetsCheckboxes"
                        :key="facet.value"
                        @click="unselectFacet(facet)"
                      >
                        <div class="searchstax-facets-pill-label">{{ facet.value }} ({{ facet.count }})</div>
                        <div class="searchstax-facets-pill-icon-close"></div>
                      </div>
                    </div>
                    <div
                      class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
                      v-if="selectedFacetsCheckboxes.length"
                      @click="unselectAll"
                    >
                      <div class="searchstax-facets-pill-label">Clear Filters</div>
                    </div>
                  </div>
                  <div
                    class="searchstax-facets-mobile-overlay"
                    :class="{ 'searchstax-show': facetsTemplateDataMobile?.overlayOpened }"
                  >
                    <div class="searchstax-facets-mobile-overlay-header">
                      <div class="searchstax-facets-mobile-overlay-header-title">Filter By</div>
                      <div
                        class="searchstax-search-close"
                        @click="closeOverlay"
                      ></div>
                    </div>
                    <div class="searchstax-facets-container-mobile">
                      <div
                        v-for="facet in facetsTemplateDataMobile?.facets"
                        :key="facet"
                        class="searchstax-facet-container"
                        :class="{ 'active': isNotDeactivated(facet.name) }"
                      >
                        <div>
                          <div
                            class="searchstax-facet-title-container"
                            @click="toggleFacetGroup(facet.name)"
                          >
                            <div class="searchstax-facet-title"> {{ facet.label }} </div>
                            <div class="searchstax-facet-title-arrow active"></div>
                          </div>
                          <div class="searchstax-facet-values-container">
                            <div
                              v-for="(facetValue, key) in facet.values"
                              :key="facetValue.value + facetValue.parentName"
                              class="searchstax-facet-value-container"
                              :class="{ 'searchstax-facet-value-disabled': facetValue.disabled }"
                              :ref="el => { facetContainers[key + facet.name] = el }"
                            >
                              <div class="searchstax-facet-input">
                                <input
                                  type="checkbox"
                                  class="searchstax-facet-input-checkbox"
                                  :checked="isChecked(facetValue)"
                                  :disabled="facetValue.disabled"
                                  @click="selectFacet(key + facet.name, $event, facetValue, true)"
                                />
                              </div>
                              <div
                                class="searchstax-facet-value-label"
                                @click="selectFacet(key + facet.name, $event, facetValue, false)"
                              >{{ facetValue.value }}</div>
                              <div
                                class="searchstax-facet-value-count"
                                @click="selectFacet(key + facet.name, $event, facetValue, false)"
                              >({{ facetValue.count }})</div>
                            </div>
                            <div
                              class="searchstax-facet-show-more-container"
                              v-if="facet.hasMoreFacets"
                            >
                              <div
                                class="searchstax-facet-show-more-container"
                                @click="showMoreLessDesktop($event, facet)"
                              >
                                <div
                                  v-if="facet.showingAllFacets"
                                  class="searchstax-facet-show-less-button searchstax-facet-show-button"
                                >less</div>
                                <div
                                  v-else
                                  class="searchstax-facet-show-more-button  searchstax-facet-show-button"
                                >more</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <button
                      class="searchstax-facets-mobile-overlay-done"
                      @click="closeOverlay"
                    >Done</button>
                  </div>
                </div>
              </template>
            </SearchstaxFacetsWidget>

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post SearchstaxFacetsWidget for Vue appeared first on SearchStax Docs.

Searchstax-PaginationWidget Vue

Bruce — Wed, 13 Sep 2023 21:12:36 +0000

Searchstax PaginationWidget for Vue

The SearchStax Site Search solution offers a Vue pagination widget to assist with you custom search page.

The SearchstaxPaginationWidget component displays pagination controls for search results.

Slots

#pagination

Allows customizing the pagination UI.

Slot props:

paginationData – Pagination info object
nextPage – Handler for next page click
previousPage – Handler for previous page click

Usage

<SearchstaxPaginationWidget></SearchstaxPaginationWidget>

Example

<template #pagination="{ paginationData, previousPage, nextPage }">
                <div
                  class="searchstax-pagination-container"
                  v-if="paginationData"
                >
                  <div class="searchstax-pagination-content">
                    <a
                      class="searchstax-pagination-previous"
                      :disabled="paginationData?.isFirstPage"
                      @click="previousPage"
                      id="searchstax-pagination-previous"
                    > &lt; Previous </a>
                    <div class="searchstax-pagination-details"> {{ paginationData?.startResultIndex }} - {{
                      paginationData?.endResultIndex }} of {{ paginationData?.totalResults }} </div>
                    <a
                      class="searchstax-pagination-next"
                      :disabled="paginationData?.isLastPage"
                      @click="nextPage"
                      id="searchstax-pagination-next"
                    >Next ></a>
                  </div>
                </div>
</template>

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Searchstax-PaginationWidget Vue appeared first on SearchStax Docs.

SearchStaxInputWidget for Vue

Bruce — Wed, 13 Sep 2023 17:56:17 +0000

SearchstaxInputWidget for Vue

The SearchStax Site Search solution offers a Vue input widget to assist with you custom search page.

The SearchstaxInputWidget provides a search input box with autosuggest/autocomplete functionality.

Usage

<SearchstaxInputWidget
          :afterAutosuggest="afterAutosuggest"
          :beforeAutosuggest="beforeAutosuggest"
          :suggestAfterMinChars="3"
></SearchstaxInputWidget>

Props

afterAutosuggest – Callback function invoked after autosuggest results are received. Allows modifying the suggestions.
beforeAutosuggest – Callback function invoked before making the autosuggest API call. Allows modifying the request parameters.
searchInputId – ID of the search input element. Default: searchstax-search-input
suggestAfterMinChars – Minimum number of characters required to trigger autosuggest. Default: 3

Slots

#input

Allows customizing the input box UI.

Slot props:

suggestions – Array of autosuggestion results
onMouseLeave – Handler for mouse leave event
onMouseOver – Handler for mouse over event
onMouseClick – Handler for mouse click event

Usage

<SearchstaxInputWidget
          :afterAutosuggest="afterAutosuggest"
          :beforeAutosuggest="beforeAutosuggest"
          :suggestAfterMinChars="3"
></SearchstaxInputWidget>

Example

<SearchstaxInputWidget
          :afterAutosuggest="afterAutosuggest"
          :beforeAutosuggest="beforeAutosuggest"
          :suggestAfterMinChars="3"
>
	<template #input="{ suggestions, onMouseLeave, onMouseOver, onMouseClick }">
            <div class="searchstax-search-input-wrapper">
              <input
                type="text"
                id="searchstax-search-input"
                class="searchstax-search-input"
                placeholder="SEARCH FOR..."
              />
              <div
                class="searchstax-autosuggest-container"
                :class="{ 'hidden': suggestions.length === 0 }"
                @mouseleave="onMouseLeave"
              >
                <div
                  class="searchstax-autosuggest-item"
                  v-for="suggestion in suggestions"
                  :key="suggestion.term"
                >
                  <div
                    class="searchstax-autosuggest-item-term-container"
                    v-html="suggestion.term"
                    @mouseover="onMouseOver(suggestion)"
                    @click.stop="onMouseClick()"
                  ></div>
                </div>
              </div>
              <button
                class="searchstax-spinner-icon"
                id="searchstax-search-input-action-button"
              >
              </button>
            </div>
	</template>
</SearchstaxInputWidget>

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post SearchStaxInputWidget for Vue appeared first on SearchStax Docs.

Searchstax-RelatedSearchesWidget Vue

Bruce — Wed, 13 Sep 2023 21:16:46 +0000

Searchstax RelatedSearchesWidget Vue

The SearchStax Site Search solution offers a Vue widget for displaying related searches.

The SearchstaxRelatedSearchesWidget for Vue component displays related searches.

Props

relatedSearchesURL – API URL for fetching related searches
relatedSearchesAPIKey – API key for related searches API

Slots

#related

Allows customizing the related searches UI.

Slot props:

relatedData – Related searches data object
executeSearch – Handler to run new search from related term

Usage

<SearchstaxRelatedSearchesWidget
	:relatedSearchesURL="config.relatedSearchesURL"
	:relatedSearchesAPIKey="config.relatedSearchesAPIKey"

	<template #related>
  </template>

></SearchstaxRelatedSearchesWidget>

Example

<SearchstaxRelatedSearchesWidget
              :relatedSearchesURL="config.relatedSearchesURL"
              :relatedSearchesAPIKey="config.relatedSearchesAPIKey"
            >
              <template #related="{ relatedData, executeSearch }">
                <div
                  class="searchstax-related-searches-container"
                  id="searchstax-related-searches-container"
                  v-if="relatedData && relatedData?.searchExecuted && relatedData?.hasRelatedSearches"
                > Related searches: <span id="searchstax-related-searches"></span>
                  <span
                    class="searchstax-related-search"
                    v-if="relatedData.relatedSearches"
                  >
                    <span
                      v-for="related in relatedData.relatedSearches"
                      :key="related.related_search"
                      @click="executeSearch(related)"
                      class="searchstax-related-search searchstax-related-search-item"
                    > {{ related.related_search }}<span v-if="!related.last">,</span>
                    </span>
                  </span>
                </div>
              </template>
            </SearchstaxRelatedSearchesWidget>

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Searchstax-RelatedSearchesWidget Vue appeared first on SearchStax Docs.

Searchstax- ExternalPromotions-Widget Vue

Tom Humbarger — Wed, 13 Sep 2023 21:22:53 +0000

The SearchStax Site Search solution offers a Vue external-promotions widget for your custom search page.

The SearchstaxExternalPromotionsWidget component displays external promotions fetched from the API.

Slots

#externalPromotions

Allows customizing the external promotions UI.

Slot props:

externalPromotionsData – External promotions data object
trackClick – Handler for tracking link clicks

Usage

<SearchstaxExternalPromotionsWidget></SearchstaxExternalPromotionsWidget>

Example

<SearchstaxExternalPromotionsWidget>
              <template #externalPromotions="{ externalPromotionsData, trackClick }">
                <div
                  class="searchstax-external-promotions-container"
                  id="searchstax-external-promotions-container"
                  v-if="externalPromotionsData && externalPromotionsData?.searchExecuted && externalPromotionsData?.hasExternalPromotions"
                >
                  <div
                    class="searchstax-external-promotion searchstax-search-result"
                    v-for="externalPromotion in externalPromotionsData.externalPromotions"
                    :key="externalPromotion.id"
                  >
                    <div class="icon-elevated"></div>
                    <a
                      v-if="externalPromotion.url"
                      href="{{externalPromotion.url}}"
                      @click="trackClick(externalPromotion, $event)"
                      class="searchstax-result-item-link"
                    ></a>
                    <div class="searchstax-search-result-title-container">
                      <span class="searchstax-search-result-title">{{ externalPromotion.name }}</span>
                    </div>
                    <p
                      v-if="externalPromotion.description"
                      class="searchstax-search-result-description searchstax-search-result-common"
                    > {{ externalPromotion.description }} </p>
                    <p
                      v-if="externalPromotion.url"
                      class="searchstax-search-result-description searchstax-search-result-common"
                    > {{ externalPromotion.url }} </p>
                  </div>
                </div>
              </template>
            </SearchstaxExternalPromotionsWidget>

The component fetches promotions data from the API and passes it to the slot. This allows customizing the promotions UI and handling link tracking.

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Searchstax- ExternalPromotions-Widget Vue appeared first on SearchStax Docs.