Searchstax RelatedSearchesWidget Vue

The SearchStax Site Search solution offers a Vue widget for displaying related searches.

The SearchstaxRelatedSearchesWidget for Vue component displays related searches.

Props

  • relatedSearchesURL – API URL for fetching related searches
  • relatedSearchesAPIKey – API key for related searches API

Slots

#related

Allows customizing the related searches UI.

Slot props:

  • relatedData – Related searches data object
  • executeSearch – Handler to run new search from related term

Usage

1
2
3
4
5
6
7
8
<SearchstaxRelatedSearchesWidget
    :relatedSearchesURL="config.relatedSearchesURL"
    :relatedSearchesAPIKey="config.relatedSearchesAPIKey"
 
    <template #related>
  </template>
 
></SearchstaxRelatedSearchesWidget>

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
<SearchstaxRelatedSearchesWidget
              :relatedSearchesURL="config.relatedSearchesURL"
              :relatedSearchesAPIKey="config.relatedSearchesAPIKey"
            >
              <template #related="{ relatedData, executeSearch }">
                <div
                  class="searchstax-related-searches-container"
                  id="searchstax-related-searches-container"
                  v-if="relatedData && relatedData?.searchExecuted && relatedData?.hasRelatedSearches"
                > Related searches: <span id="searchstax-related-searches"></span>
                  <span
                    class="searchstax-related-search"
                    v-if="relatedData.relatedSearches"
                  >
                    <span
                      v-for="related in relatedData.relatedSearches"
                      :key="related.related_search"
                      @click="executeSearch(related)"
                      class="searchstax-related-search searchstax-related-search-item"
                    > {{ related.related_search }}<span v-if="!related.last">,</span>
                    </span>
                  </span>
                </div>
              </template>
            </SearchstaxRelatedSearchesWidget>

Questions?

Do not hesitate to contact the SearchStax Support Desk.