External Promotions Widget JS

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

Usage

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
templates: {
 
  mainTemplate: {
    template: `
      <div class="promotions">
 
        {{#promotions}}
          // promotion item
        {{/promotions}}
 
      </div>
    `
  }
 
}

externalPromotion

Template for each external promotion item.

1
2
3
4
5
6
7
8
9
10
11
12
templates: {
 
  externalPromotion: {
    template: `
      <div class="promotion">
        <h3>{{title}}</h3>
        <p>{{description}}</p>
      </div>
    `
  }
 
}

Example of External Promotions Widget for JS

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
26
27
28
29
30
31
32
33
34
35
36
37
38
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