Searchstax RelatedSearchesWidget Vue

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

<SearchstaxRelatedSearchesWidget
	:relatedSearchesURL="config.relatedSearchesURL"
	:relatedSearchesAPIKey="config.relatedSearchesAPIKey"

	<template #related>
  </template>

></SearchstaxRelatedSearchesWidget>

Example

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