External Promotions Widget JS

SearchStax Site Search solution’s External Promotions Widget displays external promotions for UX-JS.

Usage

searchstax.addExternalPromotionsWidget(container, options);
  • container – Element to render widget into
  • options – Configuration options (Read more)

Template Override

The External Promotions widget template option allows customizing the UI templates.

mainTemplate

Main template for the external promotions section.

templates: {

  mainTemplate: {
    template: `
      <div class="promotions">

        {{#promotions}}
          // promotion item
        {{/promotions}}

      </div>
    `
  }

}

externalPromotion

Template for each external promotion item.

templates: {

  externalPromotion: {
    template: `
      <div class="promotion">
        <h3>{{title}}</h3>
        <p>{{description}}</p>
      </div>
    `
  }

}

Example of External Promotions Widget for JS

searchstax.addExternalPromotionsWidget('external-promotions-container', {
templates: {
      mainTemplate: {
          template: `
        {{#hasExternalPromotions}}
            <div class="searchstax-external-promotions-container" id="searchstax-external-promotions-container">
                 External promotions go here
            </div>
        {{/hasExternalPromotions}}
    `,
          externalPromotionsContainerId: `searchstax-external-promotions-container`,
      },
      externalPromotion: {
          template: `
        <div class="searchstax-external-promotion searchstax-search-result">
            <div class="icon-elevated"></div>
            {{#url}}
            <a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" class="searchstax-result-item-link"></a>
            {{/url}}
            <div class="searchstax-search-result-title-container">
                <span class="searchstax-search-result-title">{{name}}</span>
            </div>
            {{#description}}
            <p class="searchstax-search-result-description searchstax-search-result-common">
            {{description}}
            </p>
            {{/description}}
            {{#url}}
            <p class="searchstax-search-result-description searchstax-search-result-common">
            {{url}}
            </p>
            {{/url}}
            </div>
        </div>
        `,
      },
    },
});

Questions?

Do not hesitate to contact the SearchStax Support Desk