Related Searches Widget JS

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

Usage

1
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
templates: {
 
  main: {
    template: `
      <div class="related-searches">
        Related Searches:
 
        {{#relatedSearches}}
          // related search item
        {{/relatedSearches}}
 
      </div>
    `
  }
 
}

relatedSearch

Template for each related search item.

1
2
3
4
5
6
7
8
9
10
11
templates: {
 
  relatedSearch: {
    template: `
      <span class="related-search">
        {{searchTerm}}
      </span>
    `
  }
 
}

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
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.