Getting Started With searchstudio-ux-angular

Updated

Example

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

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

Installation

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

Usage

Add following code to <head>:

<script type="text/javascript">
      var _msq = _msq || []; //declare object
      var analyticsBaseUrl = '<https://analytics-us-east.searchstax.co>';
      (function () {
        var ms = document.createElement('script');
        ms.type = 'text/javascript';
        ms.src = '<https://static.searchstax.co/studio-js/v3/js/studio-analytics.js>';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ms, s);
      })();
    </script>

Import Components

Import SearchstudioUxAngularModule:

import { SearchstudioUxAngularModule } from '@searchstax-inc/searchstudio-ux-angular';

App Module

Add SearchstudioUxAngularModule to imports[]:

@NgModule({
  imports: [
    SearchstudioUxAngularModule
  ]
})

Wrapper Component

Wrap all other components in <app-searchstax-wrapper>:

<app-searchstax-wrapper>

  {/* Other SearchStudio components */}

</app-searchstax-wrapper>

Configuration

Pass search configuration to <app-searchstax-wrapper>:

<app-searchstax-wrapper
  [searchURL]="config.searchURL"
  [suggesterURL]="config.suggesterURL"
  [trackApiKey]="config.trackApiKey"
  [searchAuth]="config.searchAuth"
  [beforeSearch]="beforeSearch"
  [afterSearch]="afterSearch"
  [router]="config.router"
>
</app-searchstax-wrapper>

Example configuration:

const config = {
  language: 'en',
  searchURL: '',
  suggesterURL: '',
  trackApiKey: '',
  searchAuth: '',
  authType: 'basic',
  router: {
    enabled: true,
    routeName: 'searchstax',
    title: (result) => `Search results for: ${result.query}`,
    ignoredKeys: []
  },
  hooks: {
    beforeSearch: (props) => {
// modify props
      return props;
    },
    afterSearch: (results) => {
// modify results
      return results;
    }
  }
};

Adding Components

Add any other Site Search angular component as needed:

<app-searchstax-wrapper>

  <app-searchstax-input></app-searchstax-input>

  <app-searchstax-results></app-searchstax-results>

  {/* Other components */}

</app-searchstax-wrapper>

Styles

Import the CSS:

./../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css

FAQ

Is there a way to prevent search parameters from being added to the page’s URL?

Yes, you can set router: {enabled: false} in the sampleConfig above to prevent parameters from being added to the page’s URL.

Articles in this section