Library to build searchstudio search page
changelog is documented at CHANGELOG.md
npm install following package
npm install --save @searchstax-inc/searchstudio-ux-angular
After importing SearchstaxWrapper component needs to wrap all other components.
Make sure your module imports SearchstudioUxAngularModule:
imports: [ SearchstudioUxAngularModule ],
Initialization object needs to be of type: ISearchstaxConfig
Initialization example
Add following code to your ts file and fill config
config = {
searchURL: '',
suggesterURL: '',
trackApiKey: '',
searchAuth: '',
authType: 'basic',
relatedSearchesAPIKey: '',
relatedSearchesURL: '',
analyticsBaseUrl: 'https://analytics-us-east.searchstax.com'
}
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);
}
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>
Following widgets are available:
example of answer widget initialization with minimum options
<app-searchstax-answer [showShowMoreAfterWordCount]="100"></app-searchstax-answer>
example of answer widget initialization with lightweight feedback widget
feedbackConfig = {
renderFeedbackWidget: true,
emailOverride: () => '',
thumbsUpValue: 10,
thumbsDownValue: 0,
lightweightTemplateOverride: `
<div class="searchstax-lightweight-widget-container">
<div class="searchstax-lightweight-widget-thumbs-up {{#thumbsUpActive}}active{{/thumbsUpActive}}">
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.85079 7.59996L7.83141 1C8.4243 1 8.9929 1.23178 9.41213 1.64436C9.83136 2.05694 10.0669 2.61651 10.0669 3.19999V6.1333H14.2845C14.5005 6.13089 14.7145 6.17474 14.9116 6.26179C15.1087 6.34885 15.2842 6.47704 15.426 6.63747C15.5677 6.79791 15.6723 6.98676 15.7326 7.19094C15.7928 7.39513 15.8072 7.60975 15.7748 7.81996L14.7465 14.4199C14.6926 14.7696 14.5121 15.0884 14.2382 15.3175C13.9643 15.5466 13.6156 15.6706 13.2562 15.6666H4.85079M4.85079 7.59996V15.6666M4.85079 7.59996H2.61531C2.22006 7.59996 1.84099 7.75448 1.5615 8.02953C1.28201 8.30458 1.125 8.67763 1.125 9.06661V14.1999C1.125 14.5889 1.28201 14.9619 1.5615 15.237C1.84099 15.512 2.22006 15.6666 2.61531 15.6666H4.85079" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="searchstax-lightweight-widget-separator"></div>
<div class="searchstax-lightweight-widget-thumbs-down {{#thumbsDownActive}}active{{/thumbsDownActive}}">
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1492 9.06801L9.16859 15.668C8.5757 15.668 8.0071 15.4362 7.58787 15.0236C7.16864 14.611 6.93311 14.0515 6.93311 13.468V10.5347H2.71552C2.4995 10.5371 2.28552 10.4932 2.08842 10.4062C1.89132 10.3191 1.71581 10.1909 1.57405 10.0305C1.43229 9.87006 1.32766 9.6812 1.26743 9.47702C1.2072 9.27284 1.19279 9.05822 1.22521 8.84801L2.25353 2.24806C2.30742 1.89833 2.48793 1.57955 2.76179 1.35046C3.03566 1.12136 3.38443 0.997398 3.74384 1.0014H12.1492M12.1492 9.06801V1.0014M12.1492 9.06801H14.3847C14.7799 9.06801 15.159 8.91349 15.4385 8.63844C15.718 8.36339 15.875 7.99034 15.875 7.60135V2.46805C15.875 2.07907 15.718 1.70602 15.4385 1.43097C15.159 1.15592 14.7799 1.0014 14.3847 1.0014H12.1492" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
`
}
<app-searchstax-answer [showShowMoreAfterWordCount]="100" [templateOverride]="answerTemplate" [feedbackwidget]="feedbackConfig">
<ng-template
#answerTemplate
let-answerData="answerData"
let-showMore="showMore"
let-context="context"
>
<div class="searchstax-answer-wrap">
<div class="searchstax-answer-icon"></div>
<div>
<div
[class]="
'searchstax-answer-container ' + answerData.showMoreButtonVisible
? 'searchstax-answer-show-more'
: ''
"
>
<div class="searchstax-answer-title">Smart Answers</div>
<div class="searchstax-answer-error" *ngIf="answerData.shouldShowAnswerError" [innerHTML]="answerData.answerErrorMessage"></div>
<div
class="searchstax-answer-description"
[innerHTML]="answerData.fullAnswerFormatted"
></div>
<div
*ngIf="answerData.answerLoading"
class="searchstax-answer-loading"
></div>
</div>
<div
*ngIf="answerData.showMoreButtonVisible"
class="searchstax-answer-load-more-button-container"
>
<button
class="searchstax-answer-load-more-button"
(click)="showMore($event, context)"
>
Read More
</button>
</div>
</div>
<div class="searchstax-answer-footer">
<div id="feedbackWidgetContainer"></div>
<div class="searchstax-lightweight-widget-separator-inline"></div>
<p class="searchstax-disclaimer">Generative AI is Experimental</p>
</div>
</div>
</ng-template>
</app-searchstax-answer>
example of answer widget initialization without feedback widget
<app-searchstax-answer [showShowMoreAfterWordCount]="100" [templateOverride]="answerTemplate">
<ng-template
#answerTemplate
let-answerData="answerData"
let-showMore="showMore"
let-context="context"
>
<div class="searchstax-answer-wrap">
<div class="searchstax-answer-icon"></div>
<div>
<div
[class]="
'searchstax-answer-container ' + answerData.showMoreButtonVisible
? 'searchstax-answer-show-more'
: ''
"
>
<div class="searchstax-answer-title">Smart Answers</div>
<div class="searchstax-answer-error" *ngIf="answerData.shouldShowAnswerError" [innerHTML]="answerData.answerErrorMessage"></div>
<div
class="searchstax-answer-description"
[innerHTML]="answerData.fullAnswerFormatted"
></div>
<div
*ngIf="answerData.answerLoading"
class="searchstax-answer-loading"
></div>
</div>
<div
*ngIf="answerData.showMoreButtonVisible"
class="searchstax-answer-load-more-button-container"
>
<button
class="searchstax-answer-load-more-button"
(click)="showMore($event, context)"
>
Read More
</button>
</div>
</div>
<div class="searchstax-answer-footer">
<div id="feedbackWidgetContainer"></div>
<div class="searchstax-lightweight-widget-separator-inline"></div>
<p class="searchstax-disclaimer">Generative AI is Experimental</p>
</div>
</div>
</ng-template>
</app-searchstax-answer>
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>
example of results widget initialization with minimum options
<app-searchstax-results
[afterLinkClick]="afterLinkClick"
></app-searchstax-results>
example of results widget initialization with minimum options and infinite scroll behavior
<app-searchstax-results
[afterLinkClick]="afterLinkClick"
[renderMethod]="'infiniteScroll'"
></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"
> 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>
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"
>
< 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>
example of pagination widget with infinite scroll
<app-searchstax-search-pagination [templateOverride]="paginationTemplate"
[infiniteScrollTemplateOverride]="infiniteScrollTemplate">
<ng-template
#infiniteScrollTemplate
let-paginationData="paginationData"
let-nextPage="nextPage"
let-context="context"
>
<div class="searchstax-pagination-container">
<div class="searchstax-pagination-content">
<a
class="searchstax-pagination-load-more"
(click)="nextPage($event, context)"
>
Load More
</a>
</div>
</div>
</ng-template>
<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"
>
< 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>
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>
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>
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>
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>
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>
Templates are passed to components via props.
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