Related Searches Widget JS


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

Usage

searchstax.addRelatedSearchesWidget(container, options);


Template Override


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

mainTemplate

Main template for the related searches section.

templates: {

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

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

      </div>
    `
  }

}


relatedSearch

Template for each related search item.

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.