Searchstudio-ux-vue Archives - SearchStax Docs

What is searchstudio-ux-vue

Tom Humbarger — Wed, 13 Sep 2023 20:52:52 +0000

What is searchstudio-ux-vue

Searchstudio-ux-vue offers the power of SearchStax Studio search 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 SearchStudio 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 SearchStudio 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

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

Getting Started with 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 SearchStudio components:

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

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

Wrapper Component

Wrap all other SearchStudio components within the SearchstaxWrapper component:

Configuration

Pass search configuration to the SearchstaxWrapper component:

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 SearchStudio components needed:

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

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

Searchstudio-ux-vue Widgets

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

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

SearchstaxInputWidget Vue

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

Usage

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

Example

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post SearchstaxInputWidget for Vue appeared first on SearchStax Docs.

SearchstaxResultWidget for Vue

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

Searchstax ResultWidget for Vue

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

Example

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

Tom Humbarger — Thu, 14 Sep 2023 15:56:08 +0000

SearchstaxFacetsWidget for Vue

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

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

Example

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post SearchstaxFacetsWidget for Vue appeared first on SearchStax Docs.

Searchstax-PaginationWidget Vue

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

Searchstax PaginationWidget for Vue

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

Example

Questions?

Do not hesitate to contact the SearchStax Support Desk.

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

SearchstaxSearch-FeedbackWidget Vue

Tom Humbarger — Wed, 13 Sep 2023 17:56:17 +0000

SearchstaxSearch FeedbackWidget for Vue

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

Usage

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

Example

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post SearchstaxSearch-FeedbackWidget Vue appeared first on SearchStax Docs.

Searchstax-RelatedSearchesWidget Vue

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

Searchstax RelatedSearchesWidget Vue

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

Example

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

Searchstax ExternalPromotionsWidget for Vue

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

Example

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.