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:

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

Import and Register Components

Import and globally register the Site Search components:

1
2
3
4
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:

1
2
3
4
5
<SearchstaxWrapper>
 
<!-- Other SearchStudio components here -->
 
</SearchstaxWrapper>

Configuration

Pass search configuration to the SearchstaxWrapper component:

1
2
3
4
5
6
7
8
9
10
11
12
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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:

1
2
3
4
5
6
7
8
9
<SearchstaxWrapper>
 
  <SearchstaxInputWidget />
 
  <SearchstaxResultsWidget />
 
<!-- Other components -->
 
</SearchstaxWrapper>

Styles

Import the CSS styles:

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

See the Styling section for information on theming and customization.