Related Searches Widget JS

The SearchStax Site Search solution’s Related Searches Widget displays related searches for UX-JS.

Usage

searchstax.addRelatedSearchesWidget(container, options);

container – Element to render widget into
options – Configuration options (ISearchstaxRelatedSearchesConfig)

Template Override

The Related Searches widget template option allows customizing the UI templates.

mainTemplate

Main template for the related searches section.

Template model: ISearchstaxRelatedSearchesData
Usage:

templates: {

  main: {
    template: `
      <div class="related-searches">
        Related Searches:

        {{#relatedSearches}}
          // related search item
        {{/relatedSearches}}

      </div>
    `
  }

}

relatedSearch

Template for each related search item.

Template model: ISearchstaxRelatedSearchResult
Usage:

templates: {

  relatedSearch: {
    template: `
      <span class="related-search">
        {{searchTerm}}
      </span>
    `
  }

}

Example

searchstax.addRelatedSearchesWidget('searchstax-related-searches-container', {

  relatedSearchesURL: 'URL',
  relatedSearchesAPIKey: 'KEY',

  templates: {

    main: {
      template: `
        <div class="related-searches">
          <h3>Related Searches</h3>
          <div class="related-list"></div>
        </div>
      `,
      relatedSearchesContainerClass: 'related-list'
    },

    relatedSearch: {
      template: '<span class="related-item">{{term}}</span>',
      relatedSearchContainerClass: 'related-item'
    }

  }

});

Questions?

Do not hesitate to contact the SearchStax Support Desk.