npm - @searchstax-inc/searchstudio-ux-angular - Versions diffs - 0.0.2 → 1.0.0 - Mend

@searchstax-inc/searchstudio-ux-angular 0.0.2 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md CHANGED Viewed

@@ -1,24 +1,745 @@
-# SearchstudioUxAngular
+# searchstudio-ux-angular
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.0.
+Library to build searchstudio search page
-## Code scaffolding
+## Installation
+npm install following package
+`npm install --save @searchstax-inc/searchstudio-ux-angular`
-Run `ng generate component component-name --project searchstudio-ux-angular` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project searchstudio-ux-angular`.
-> Note: Don't forget to add `--project searchstudio-ux-angular` or else it will be added to the default project in your `angular.json` file.
+Add following code to `<head>`
-## Build
+```
+<script type="text/javascript">
+      var _msq = _msq || []; //declare object
+      var analyticsBaseUrl = 'https://analytics-us-east.searchstax.co';
+      (function () {
+        var ms = document.createElement('script');
+        ms.type = 'text/javascript';
+        ms.src = 'https://static.searchstax.co/studio-js/v3/js/studio-analytics.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ms, s);
+      })();
+    </script>
+```
+## Usage
-Run `ng build searchstudio-ux-angular` to build the project. The build artifacts will be stored in the `dist/` directory.
+After importing SearchstaxWrapper component needs to wrap all other components.
-## Publishing
+Make sure your module imports SearchstudioUxAngularModule:
-After building your library with `ng build searchstudio-ux-angular`, go to the dist folder `cd dist/searchstudio-ux-angular` and run `npm publish`.
+imports: [
+    SearchstudioUxAngularModule
+  ],
-## Running unit tests
+```
-Run `ng test searchstudio-ux-angular` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```
-## Further help
+## Initialization
+Initialization object needs to be of type: [ISearchstaxConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/connector.interface.ts#L5)
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+Initialization example
+```
+Add following code to your ts file and fill config
+ config = {
+    searchURL: '',
+    suggesterURL: '',
+    trackApiKey: '',
+    searchAuth: '',
+    authType: 'basic',
+    relatedSearchesAPIKey: '',
+    relatedSearchesURL: ''
+  }
+  beforeSearch(props: ISearchObject) {
+    // gets searchProps, if passed along further search will execute, if null then event gets canceled
+    // props can be modified and passed along
+    const propsCopy = { ...props }
+    // propsCopy.term = propsCopy.term;
+    return propsCopy
+  }
+  afterSearch(results: ISearchstaxParsedResult[]) {
+    const copy = [...results]
+    // copy.splice(0, 1);
+    console.log('copy', copy);
+    return copy
+  }
+  afterAutosuggest(result: ISearchstaxSuggestResponse) {
+    const copy = { ...result }
+    return copy
+  }
+  beforeAutosuggest(props: ISearchstaxSuggestProps) {
+    // gets suggestProps, if passed along further autosuggest will execute, if null then event gets canceled
+    // props can be modified and passed along
+    const propsCopy = { ...props }
+    // propsCopy.term = propsCopy.term + '222';
+    return propsCopy
+  }
+  afterLinkClick(results: ISearchstaxParsedResult): ISearchstaxParsedResult {
+    // gets result that was clicked, if passed along further functions will execute, if null then event gets canceled
+    const copy = { ...results }
+    return copy
+  }
+  initialized(searchstax: Searchstax) {
+    console.log('searchstax', searchstax);
+  }
+```
+## Initial layout
+Our base theme is designed with this layout in mind but it is optional as all widgets have id parameters and can be attached to any element.
+```
+<div>
+  <app-searchstax-wrapper
+    [searchURL]="config.searchURL"
+    [suggesterURL]="config.suggesterURL"
+    [trackApiKey]="config.trackApiKey"
+    [searchAuth]="config.searchAuth"
+    [beforeSearch]="beforeSearch"
+    [afterSearch]="afterSearch"
+    (initialized)="initialized($event)"
+  >
+    <div class="searchstax-page-layout-container">
+      <app-searchstax-input
+        [afterAutosuggest]="afterAutosuggest"
+        [beforeAutosuggest]="beforeAutosuggest"
+        [suggestAfterMinChars]="3"
+      ></app-searchstax-input>
+      <div class="search-details-container">
+        <app-searchstax-search-feedback></app-searchstax-search-feedback>
+        <app-searchstax-search-sorting></app-searchstax-search-sorting>
+      </div>
+      <div class="searchstax-page-layout-facet-result-container">
+        <div class="searchstax-page-layout-facet-container">
+          <app-searchstax-search-facets
+            [facetingType]="'showUnavailable'"
+            [itemsPerPageDesktop]="2"
+            [itemsPerPageMobile]="99"
+          ></app-searchstax-search-facets>
+        </div>
+        <div class="searchstax-page-layout-result-container">
+          <app-searchstax-external-promotions></app-searchstax-external-promotions>
+          <app-searchstax-results
+            [afterLinkClick]="afterLinkClick"
+          ></app-searchstax-results>
+          <app-searchstax-related-searches
+            [relatedSearchesURL]="config.relatedSearchesURL"
+            [relatedSearchesAPIKey]="config.relatedSearchesAPIKey"
+          ></app-searchstax-related-searches>
+          <app-searchstax-search-pagination></app-searchstax-search-pagination>
+        </div>
+      </div>
+    </div>
+  </app-searchstax-wrapper>
+</div>
+```
+### widgets
+Following widgets are available:
+[Input Widget](#input-widget)
+[Result Widget](#result-widget)
+[Facets Widget](#facets-widget)
+[Pagination Widget](#pagination-widget)
+[SearchFeedback Widget](#searchfeedback-widget)
+[RelatedSearches Widget](#relatedsearches-widget)
+[ExternalPromotions Widget](#externalpromotions-widget)
+[sorting Widget](#sorting-widget)
+### Input Widget ###
+example of input widget initialization with minimum options
+```
+<app-searchstax-input
+        [afterAutosuggest]="afterAutosuggest"
+        [beforeAutosuggest]="beforeAutosuggest"
+        [suggestAfterMinChars]="3"
+      ></app-searchstax-input>
+```
+example of input widget initialization with template override
+```
+<app-searchstax-input
+        [afterAutosuggest]="afterAutosuggest"
+        [beforeAutosuggest]="beforeAutosuggest"
+        [suggestAfterMinChars]="3"
+        [templateOverride]="inputTemplate"
+      >
+        <ng-template
+          #inputTemplate
+          let-suggestions="suggestions"
+          let-onMouseLeave="onMouseLeave"
+          let-onMouseOver="onMouseOver"
+          let-onMouseClick="onMouseClick"
+          let-context="context"
+        >
+          <div class="searchstax-search-input-wrapper">
+            <input
+              type="text"
+              id="searchstax-search-input"
+              class="searchstax-search-input"
+              placeholder="SEARCH FOR..."
+            />
+            <div
+              class="searchstax-autosuggest-container"
+              [ngClass]="{ hidden: suggestions.length === 0 }"
+              (mouseleave)="onMouseLeave(context)"
+            >
+              <div class="searchstax-autosuggest-item" *ngFor="let suggestion of suggestions">
+                <div
+                  class="searchstax-autosuggest-item-term-container"
+                  [innerHtml]="suggestion.term"
+                  (mouseover)="onMouseOver(suggestion, context)"
+                  (click)="onMouseClick($event, context)"
+                ></div>
+              </div>
+            </div>
+            <button class="searchstax-spinner-icon" id="searchstax-search-input-action-button"></button>
+          </div>
+        </ng-template>
+      </app-searchstax-input>
+```
+### Result Widget ###
+example of results widget initialization with minimum options
+```
+<app-searchstax-results
+            [afterLinkClick]="afterLinkClick"
+          ></app-searchstax-results>
+```
+example of result widget initialization with template override
+```
+<app-searchstax-results
+            [afterLinkClick]="afterLinkClick"
+            [resultsTemplate]="resultsTemplate"
+            [noResultsTemplate]="noResultsTemplate"
+          >
+            <ng-template
+              #resultsTemplate
+              let-searchResults="searchResults"
+              let-resultClicked="resultClicked"
+              let-isImage="isImage"
+              let-context="context"
+            >
+              <div class="searchstax-search-results">
+                <div
+                  class="searchstax-search-result"
+                  [ngClass]="{ 'has-thumbnail': searchResult.thumbnail }"
+                  *ngFor="let searchResult of searchResults"
+                >
+                  <div *ngIf="searchResult.promoted" class="searchstax-search-result-promoted"></div>
+                  <a
+                    *ngIf="searchResult.url"
+                    [href]="searchResult.url"
+                    [attr.data-searchstax-unique-result-id]="searchResult.uniqueId"
+                    (click)="resultClicked(searchResult, $event, context)"
+                    class="searchstax-result-item-link"
+                  ></a>
+                  <div *ngIf="searchResult.ribbon" class="searchstax-search-result-ribbon">
+                    {{ searchResult.ribbon }}
+                  </div>
+                  <img *ngIf="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 *ngIf="searchResult.paths" class="searchstax-search-result-common">
+                    {{ searchResult.paths }}
+                  </p>
+                  <p
+                    *ngIf="searchResult.description"
+                    class="searchstax-search-result-description searchstax-search-result-common"
+                  >
+                    {{ searchResult.description }}
+                  </p>
+                  <div *ngFor="let unmappedField of searchResult.unmappedFields">
+                    <div *ngIf="isImage(unmappedField)" class="searchstax-search-result-image-container">
+                      <img [src]="unmappedField.value" class="searchstax-result-image" />
+                    </div>
+                    <div *ngIf="!isImage(unmappedField)">
+                      <p class="searchstax-search-result-common">
+                        {{ unmappedField.value }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </ng-template>
+            <ng-template #noResultsTemplate let-metadata="metadata" let-searchTerm="searchTerm">
+              <div class="searchstax-no-results">
+                Showing <strong>no results</strong> for
+                <strong>"{{ searchTerm }}"</strong>
+                <br />
+                <span *ngIf="metadata?.spellingSuggestion"
+                  >&nbsp;Did you mean
+                  <a href="#" class="searchstax-suggestion-term">{{ metadata?.spellingSuggestion }}</a
+                  >?</span
+                >
+              </div>
+              <div>
+                <p>
+                  Try searching for search related terms or topics. We offer a wide variety of content to help you get
+                  the information you need.
+                </p>
+                <p>Lost? Click on the ‘X” in the Search Box to reset your search.</p>
+              </div>
+            </ng-template>
+          </app-searchstax-results>
+```
+### Pagination Widget ###
+example of pagination widget initialization with minimum options
+```
+<app-searchstax-search-pagination></app-searchstax-search-pagination>
+```
+example of pagination widget initialization with various options
+```
+<app-searchstax-search-pagination [templateOverride]="paginationTemplate">
+            <ng-template
+              #paginationTemplate
+              let-paginationData="paginationData"
+              let-previousPage="previousPage"
+              let-nextPage="nextPage"
+              let-context="context"
+            >
+              <div class="searchstax-pagination-container">
+                <div class="searchstax-pagination-content">
+                  <a
+                    class="searchstax-pagination-previous"
+                    (click)="previousPage($event, context)"
+                    id="searchstax-pagination-previous"
+                  >
+                    &lt; Previous
+                  </a>
+                  <div class="searchstax-pagination-details">
+                    {{ paginationData?.startResultIndex }} - {{ paginationData?.endResultIndex }} of
+                    {{ paginationData?.totalResults }}
+                  </div>
+                  <a
+                    class="searchstax-pagination-next"
+                    (click)="nextPage($event, context)"
+                    id="searchstax-pagination-next"
+                    >Next ></a
+                  >
+                </div>
+              </div>
+            </ng-template>
+          </app-searchstax-search-pagination>
+```
+### Facets Widget ###
+example of facets widget initialization with minimum options
+```
+<app-searchstax-search-facets
+            [facetingType]="'showUnavailable'"
+            [itemsPerPageDesktop]="2"
+            [itemsPerPageMobile]="99"
+          ></app-searchstax-search-facets>
+```
+example of facets widget initialization with template overrides
+```
+<app-searchstax-search-facets
+            [facetingType]="'showUnavailable'"
+            [itemsPerPageDesktop]="2"
+            [itemsPerPageMobile]="99"
+            [templateOverrideDesktop]="templateOverrideDesktop"
+            [templateOverrideMobile]="templateOverrideMobile"
+          >
+            <ng-template
+              #templateOverrideDesktop
+              let-facetsTemplateDataDesktop="facetsTemplateDataDesktop"
+              let-isNotDeactivated="isNotDeactivated"
+              let-context="context"
+              let-toggleFacetGroup="toggleFacetGroup"
+              let-facetValues="facetValues"
+              let-isChecked="isChecked"
+              let-selectFacet="selectFacet"
+              let-showMoreLessDesktop="showMoreLessDesktop"
+            >
+              <div class="searchstax-facets-container-desktop">
+                <div
+                  class="searchstax-facet-container"
+                  *ngFor="let facet of facetsTemplateDataDesktop?.facets"
+                  [class]="{ active: isNotDeactivated(facet.name, context) }"
+                >
+                  <div>
+                    <div class="searchstax-facet-title-container" (click)="toggleFacetGroup(facet.name, context)">
+                      <div class="searchstax-facet-title">{{ facet.label }}</div>
+                      <div class="searchstax-facet-title-arrow active"></div>
+                    </div>
+                    <div class="searchstax-facet-values-container">
+                      <div
+                        *ngFor="let facetValue of facetValues(facet); index as key"
+                        class="searchstax-facet-value-container"
+                        [class]="{ 'searchstax-facet-value-disabled': facetValue.disabled }"
+                        #ref
+                      >
+                        <div class="searchstax-facet-input">
+                          <input
+                            type="checkbox"
+                            class="searchstax-facet-input-checkbox"
+                            [checked]="isChecked(facetValue, context)"
+                            [disabled]="facetValue.disabled"
+                            (click)="selectFacet(ref, $event, facetValue, true, context)"
+                          />
+                        </div>
+                        <div
+                          class="searchstax-facet-value-label"
+                          (click)="selectFacet(ref, $event, facetValue, false, context)"
+                        >
+                          {{ facetValue.value }}
+                        </div>
+                        <div
+                          class="searchstax-facet-value-count"
+                          (click)="selectFacet(ref, $event, facetValue, false, context)"
+                        >
+                          ({{ facetValue.count }})
+                        </div>
+                      </div>
+                      <div class="searchstax-facet-show-more-container" *ngIf="facet.hasMoreFacets">
+                        <div
+                          class="searchstax-facet-show-more-container"
+                          (click)="showMoreLessDesktop($event, facet, context)"
+                        >
+                          <div
+                            *ngIf="facet.showingAllFacets"
+                            class="searchstax-facet-show-less-button searchstax-facet-show-button"
+                          >
+                            less
+                          </div>
+                          <div
+                            *ngIf="!facet.showingAllFacets"
+                            class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                          >
+                            more
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </ng-template>
+            <ng-template
+              #templateOverrideMobile
+              let-isNotDeactivated="isNotDeactivated"
+              let-context="context"
+              let-toggleFacetGroup="toggleFacetGroup"
+              let-facetValues="facetValues"
+              let-isChecked="isChecked"
+              let-selectFacet="selectFacet"
+              let-openOverlay="openOverlay"
+              let-selectedFacetsCheckboxes="selectedFacetsCheckboxes"
+              let-unselectFacet="unselectFacet"
+              let-unselectAll="unselectAll"
+              let-facetMobileData="facetMobileData"
+              let-facetsTemplateDataMobile="facetsTemplateDataMobile"
+              let-closeOverlay="closeOverlay"
+              let-showMoreLessDesktop="showMoreLessDesktop"
+            >
+              <div class="searchstax-facets-container-mobile">
+                <div class="searchstax-facets-pills-container">
+                  <div class="searchstax-facets-pill searchstax-facets-pill-filter-by" (click)="openOverlay(context)">
+                    <div class="searchstax-facets-pill-label">Filter By</div>
+                  </div>
+                  <div class="searchstax-facets-pills-selected">
+                    <div
+                      class="searchstax-facets-pill searchstax-facets-pill-facets"
+                      *ngFor="let facet of selectedFacetsCheckboxes"
+                      (click)="unselectFacet(facet, context)"
+                    >
+                      <div class="searchstax-facets-pill-label">{{ facet.value }} ({{ facet.count }})</div>
+                      <div class="searchstax-facets-pill-icon-close"></div>
+                    </div>
+                  </div>
+                  <div
+                    class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
+                    *ngIf="selectedFacetsCheckboxes.length"
+                    (click)="unselectAll(context)"
+                  >
+                    <div class="searchstax-facets-pill-label">Clear Filters</div>
+                  </div>
+                </div>
+                <div
+                  class="searchstax-facets-mobile-overlay"
+                  [class]="{ 'searchstax-show': facetMobileData(facetsTemplateDataMobile)?.overlayOpened }"
+                >
+                  <div class="searchstax-facets-mobile-overlay-header">
+                    <div class="searchstax-facets-mobile-overlay-header-title">Filter By</div>
+                    <div class="searchstax-search-close" (click)="closeOverlay(context)"></div>
+                  </div>
+                  <div class="searchstax-facets-container-mobile">
+                    <div
+                      *ngFor="let facet of facetsTemplateDataMobile?.facets"
+                      class="searchstax-facet-container"
+                      [class]="{ active: isNotDeactivated(facet.name, context) }"
+                    >
+                      <div>
+                        <div class="searchstax-facet-title-container" (click)="toggleFacetGroup(facet.name, context)">
+                          <div class="searchstax-facet-title">{{ facet.label }}</div>
+                          <div class="searchstax-facet-title-arrow active"></div>
+                        </div>
+                        <div class="searchstax-facet-values-container">
+                          <div
+                            *ngFor="let facetValue of facetValues(facet); index as key"
+                            class="searchstax-facet-value-container"
+                            [class]="{ 'searchstax-facet-value-disabled': facetValue.disabled }"
+                            #ref
+                          >
+                            <div class="searchstax-facet-input">
+                              <input
+                                type="checkbox"
+                                class="searchstax-facet-input-checkbox"
+                                [checked]="isChecked(facetValue, context)"
+                                [disabled]="facetValue.disabled"
+                                (click)="selectFacet(ref, $event, facetValue, true, context)"
+                              />
+                            </div>
+                            <div
+                              class="searchstax-facet-value-label"
+                              (click)="selectFacet(ref, $event, facetValue, false, context)"
+                            >
+                              {{ facetValue.value }}
+                            </div>
+                            <div
+                              class="searchstax-facet-value-count"
+                              (click)="selectFacet(ref, $event, facetValue, false, context)"
+                            >
+                              ({{ facetValue.count }})
+                            </div>
+                          </div>
+                          <div class="searchstax-facet-show-more-container" *ngIf="facet.hasMoreFacets">
+                            <div
+                              class="searchstax-facet-show-more-container"
+                              (click)="showMoreLessDesktop($event, facet, context)"
+                            >
+                              <div
+                                *ngIf="facet.showingAllFacets"
+                                class="searchstax-facet-show-less-button searchstax-facet-show-button"
+                              >
+                                less
+                              </div>
+                              <div
+                                *ngIf="!facet.showingAllFacets"
+                                class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                              >
+                                more
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <button class="searchstax-facets-mobile-overlay-done" (click)="closeOverlay(context)">Done</button>
+                </div>
+              </div>
+            </ng-template>
+          </app-searchstax-search-facets>
+```
+### SearchFeedback Widget ###
+example of search feedback widget initialization with minimum options
+```
+<app-searchstax-search-feedback></app-searchstax-search-feedback>
+```
+example of search feedback widget initialization  with template overrides
+```
+<app-searchstax-search-feedback [templateOverride]="feedbackTemplate">
+          <ng-template
+            #feedbackTemplate
+            let-searchFeedbackData="searchFeedbackData"
+            let-onOriginalQueryClick="onOriginalQueryClick"
+            let-context="context"
+          >
+            <div class="searchstax-feedback-container">
+              Showing
+              <b>{{ searchFeedbackData!.startResultIndex }} - {{ searchFeedbackData!.endResultIndex }}</b>
+              of <b>{{ searchFeedbackData!.totalResults }}</b> results
+              <span *ngIf="searchFeedbackData.searchTerm"
+                >for "<b>{{ searchFeedbackData!.searchTerm }}</b
+                >"
+              </span>
+              <div class="searchstax-feedback-container-suggested">
+                <div *ngIf="searchFeedbackData.autoCorrectedQuery">
+                  Search instead for
+                  <a
+                    href="#"
+                    (click)="onOriginalQueryClick($event, context)"
+                    class="searchstax-feedback-original-query"
+                    >{{ searchFeedbackData!.originalQuery }}</a
+                  >
+                </div>
+              </div>
+            </div>
+          </ng-template>
+        </app-searchstax-search-feedback>
+```
+## RelatedSearches widget
+example of search RelatedSearches widget initialization with minimum options
+```
+<app-searchstax-related-searches
+            [relatedSearchesURL]="config.relatedSearchesURL"
+            [relatedSearchesAPIKey]="config.relatedSearchesAPIKey"
+          ></app-searchstax-related-searches>
+```
+example of search RelatedSearches widget initialization with template overrides
+```
+ <app-searchstax-related-searches
+            [relatedSearchesURL]="config.relatedSearchesURL"
+            [relatedSearchesAPIKey]="config.relatedSearchesAPIKey"
+            [templateOverride]="relatedTemplate"
+          >
+            <ng-template
+              #relatedTemplate
+              let-rand="rand"
+              let-relatedData="relatedData"
+              let-executeSearch="executeSearch"
+              let-context="context"
+            >
+              <div class="searchstax-related-searches-container" [id]="'searchstax-related-searches-container' + rand">
+                Related searches: <span id="searchstax-related-searches"></span>
+                <span class="searchstax-related-search" *ngIf="relatedData.relatedSearches">
+                  <span
+                    *ngFor="let related of relatedData.relatedSearches"
+                    (click)="executeSearch(related, context)"
+                    class="searchstax-related-search searchstax-related-search-item"
+                  >
+                    {{ related.related_search }}<span *ngIf="!related.last">,</span>
+                  </span>
+                </span>
+              </div>
+            </ng-template>
+          </app-searchstax-related-searches>
+```
+### ExternalPromotions widget ###
+example of search ExternalPromotions widget initialization with minimum options
+```
+<app-searchstax-external-promotions></app-searchstax-external-promotions>
+```
+example of search ExternalPromotions widget initialization  with template overrides
+```
+ <app-searchstax-external-promotions [templateOverride]="externalPromotionsTemplate">
+            <ng-template
+              #externalPromotionsTemplate
+              let-context="context"
+              let-externalPromotionsData="externalPromotionsData"
+              let-trackClick="trackClick"
+            >
+              <div class="searchstax-external-promotions-container" id="searchstax-external-promotions-container">
+                <div
+                  class="searchstax-external-promotion searchstax-search-result"
+                  *ngFor="let externalPromotion of externalPromotionsData.externalPromotions"
+                >
+                  <div class="icon-elevated"></div>
+                  <a
+                    *ngIf="externalPromotion.url"
+                    [href]="externalPromotion.url"
+                    (click)="trackClick(externalPromotion, $event, context)"
+                    class="searchstax-result-item-link"
+                  ></a>
+                  <div class="searchstax-search-result-title-container">
+                    <span class="searchstax-search-result-title">{{ externalPromotion.name }}</span>
+                  </div>
+                  <p
+                    *ngIf="externalPromotion.description"
+                    class="searchstax-search-result-description searchstax-search-result-common"
+                  >
+                    {{ externalPromotion.description }}
+                  </p>
+                  <p
+                    *ngIf="externalPromotion.url"
+                    class="searchstax-search-result-description searchstax-search-result-common"
+                  >
+                    {{ externalPromotion.url }}
+                  </p>
+                </div>
+              </div>
+            </ng-template>
+          </app-searchstax-external-promotions>
+```
+### Sorting Widget ###
+example of sorting widget initialization with minimum options
+```
+<app-searchstax-search-sorting></app-searchstax-search-sorting>
+```
+example of sorting widget initialization with template override
+```
+<app-searchstax-search-sorting [templateOverride]="sortingTemplateOverride">
+          <ng-template
+            #sortingTemplateOverride
+            let-selectedSorting="selectedSorting"
+            let-orderChange="orderChange"
+            let-context="context"
+          >
+            <div class="searchstax-sorting-container">
+              <label class="searchstax-sorting-label" for="sort-by">Sort By</label>
+              <select
+                id="searchstax-search-order-select"
+                class="searchstax-search-order-select"
+                [value]="selectedSorting"
+                (change)="orderChange($event, context)"
+              >
+                <option value="">Relevance</option>
+                <option value="date desc">Newest Content</option>
+                <option value="date asc">Oldest Content</option>
+              </select>
+            </div>
+          </ng-template>
+        </app-searchstax-search-sorting>
+```
+## Template overrides
+Templates are passed to components via props.
+## STYLING
+scss styles can be imported from searchstudio-ux-js
+```
+ @import './../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/scss/mainTheme.scss';
+```
+css can be taken from
+```
+./../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css
+```