Searchstax ExternalPromotionsWidget for Vue

The SearchstaxExternalPromotionsWidget component displays external promotions fetched from the API.

Slots

#externalPromotions

Allows customizing the external promotions UI.

Slot props:

  • externalPromotionsData – External promotions data object
  • trackClick – Handler for tracking link clicks

Usage

<SearchstaxExternalPromotionsWidget></SearchstaxExternalPromotionsWidget>

Example

<SearchstaxExternalPromotionsWidget>
              <template #externalPromotions="{ externalPromotionsData, trackClick }">
                <div
                  class="searchstax-external-promotions-container"
                  id="searchstax-external-promotions-container"
                  v-if="externalPromotionsData && externalPromotionsData?.searchExecuted && externalPromotionsData?.hasExternalPromotions"
                >
                  <div
                    class="searchstax-external-promotion searchstax-search-result"
                    v-for="externalPromotion in externalPromotionsData.externalPromotions"
                    :key="externalPromotion.id"
                  >
                    <div class="icon-elevated"></div>
                    <a
                      v-if="externalPromotion.url"
                      href="{{externalPromotion.url}}"
                      @click="trackClick(externalPromotion, $event)"
                      class="searchstax-result-item-link"
                    ></a>
                    <div class="searchstax-search-result-title-container">
                      <span class="searchstax-search-result-title">{{ externalPromotion.name }}</span>
                    </div>
                    <p
                      v-if="externalPromotion.description"
                      class="searchstax-search-result-description searchstax-search-result-common"
                    > {{ externalPromotion.description }} </p>
                    <p
                      v-if="externalPromotion.url"
                      class="searchstax-search-result-description searchstax-search-result-common"
                    > {{ externalPromotion.url }} </p>
                  </div>
                </div>
              </template>
            </SearchstaxExternalPromotionsWidget>

The component fetches promotions data from the API and passes it to the slot. This allows customizing the promotions UI and handling link tracking.

Questions?

Do not hesitate to contact the SearchStax Support Desk.