Searchstax ResultWidget for Vue

The SearchStax Site Search solution offers a Vue results widget to assist with your custom search page.

The SearchstaxResultsWidget component displays the search results.

Props

  • afterLinkClick – Callback function invoked when a result link is clicked. Allows modifying the result object.

Slots

#noResult

Custom content when no results are found.

#results

Custom template for rendering the results.

Slot props:

  • searchResults – Array of result items
  • resultClicked – Handler for result click events

Usage

<SearchstaxResultWidget :afterLinkClick="afterLinkClick">
</SearchstaxResultWidget>

Example

<SearchstaxResultWidget :afterLinkClick="afterLinkClick">
              <template #results="{ searchResults, resultClicked }">
                <div
                  class="searchstax-search-results"
                  v-if="searchResults && searchResults.length"
                >
                  <div
                    class="searchstax-search-result"
                    :class="{ 'has-thumbnail': searchResult.thumbnail }"
                    :key="searchResult.uniqueId"
                    v-for="searchResult in searchResults"
                  >
                    <div
                      v-if="searchResult.promoted"
                      class="searchstax-search-result-promoted"
                    ></div>
                    <a
                      v-if="searchResult.url"
                      :href="searchResult.url"
                      :data-searchstax-unique-result-id="searchResult.uniqueId"
                      @click="resultClicked(searchResult, $event)"
                      class="searchstax-result-item-link"
                    ></a>
                    <div
                      v-if="searchResult.ribbon"
                      class="searchstax-search-result-ribbon"
                    > {{ searchResult.ribbon }} </div>
                    <img
                      v-if="searchResult.thumbnail"
                      :src="searchResult.thumbnail"
                      class="searchstax-thumbnail"
                    />
                    <div class="searchstax-search-result-title-container">
                      <span class="searchstax-search-result-title">{{ searchResult.title }}</span>
                    </div>
                    <p
                      v-if="searchResult.paths"
                      class="searchstax-search-result-common"
                    > {{ searchResult.paths }} </p>
                    <p
                      v-if="searchResult.description"
                      class="searchstax-search-result-description searchstax-search-result-common"
                    > {{ searchResult.description }} </p>
                    <div
                      :key="unmappedField.key"
                      v-for="unmappedField in searchResult.unmappedFields"
                    >
                      <div
                        v-if="unmappedField.isImage && typeof unmappedField.value === 'string'"
                        class="searchstax-search-result-image-container"
                      >
                        <img
                          :src="unmappedField.value"
                          class="searchstax-result-image"
                        />
                      </div>
                      <div v-else>
                        <p class="searchstax-search-result-common"> {{ unmappedField.value }} </p>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
</SearchstaxResultWidget>

The component handles fetching results from the search API and passing them to the slots. Slots allow full customization of result templates and no result content.

Questions?

Do not hesitate to contact the SearchStax Support Desk.