searchstudio-ux-angular Archives - SearchStax Docs

What is searchstudio-ux-angular

Bruce — Thu, 09 Nov 2023 16:32:49 +0000

What is searchstudio-ux-angular

Searchstudio-ux-angular brings the power of the SearchStax Site Search solution to Angular applications through easy-to-use components. It allows you to rapidly build engaging search experiences in Angular apps.

Goal of the Components Library

The goal of SearchStudio-UX-Angular is to simplify building visually appealing and high-performance search interfaces in Angular apps. It handles all the complexities around frontend search UI development.

It provides Angular components like search box, results, filters etc. that can be easily combined to craft exceptional search experiences. The focus on performance, accessibility and aesthetics frees you to focus on UX.

Key Benefits of Using SearchStudio-UX-Angular

Fully integrates SearchStudio capabilities like synonyms, faceting, sorting etc.
Ready-made performant and accessible Angular components for search
Customizable components to match your brand style
Handles UI complexities allowing you to focus on UX
Quickly build visually appealing search experiences
Leverage SearchStudio search features without UI implementation concern
Seamless integration into existing Angular applications
Rapid development of stunning search interfaces

Visit the Get Started Page now to build awesome search experiences faster than ever before with searchstudio-ux-angular.

The post What is searchstudio-ux-angular appeared first on SearchStax Docs.

Getting Started with searchstudio-ux-angular

Bruce — Thu, 09 Nov 2023 16:32:56 +0000

Getting Started with searchstudio-ux-angular

Example

This is an example of using Angular with the SearchStax Site Search solution.

For a full example, see searchstudio-ux-angular.

Installation

npm install --save @searchstax-inc/searchstudio-ux-angular

Usage

Add following code to

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

Import Components

Import SearchstudioUxAngularModule:

import { SearchstudioUxAngularModule } from '@searchstax-inc/searchstudio-ux-angular';

App Module

Add SearchstudioUxAngularModule to imports[]:

@NgModule({
  imports: [
    SearchstudioUxAngularModule
  ]
})

Wrapper Component

Wrap all other components in :

<app-searchstax-wrapper>

  {/* Other SearchStudio components */}

</app-searchstax-wrapper>

Configuration

Pass search configuration to :

<app-searchstax-wrapper
  [searchURL]="config.searchURL"
  [suggesterURL]="config.suggesterURL"
  [trackApiKey]="config.trackApiKey"
  [searchAuth]="config.searchAuth"
  [beforeSearch]="beforeSearch"
  [afterSearch]="afterSearch"
>
</app-searchstax-wrapper>

Adding Components

Add any other Site Search angular component as needed:

<app-searchstax-wrapper>

  <app-searchstax-input></app-searchstax-input>

  <app-searchstax-results></app-searchstax-results>

  {/* Other components */}

</app-searchstax-wrapper>

Styles

Import the CSS:

./../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css

The post Getting Started with searchstudio-ux-angular appeared first on SearchStax Docs.

Angular Widgets

Bruce — Thu, 09 Nov 2023 16:32:07 +0000

Searchstudio-ux-Angular Widgets

The SearchStax Site Search solution offers Angular widgets to use in your custom search page.

To learn more about the Searchstudio-ux-angular Widgets, follow the links to each page to see the templates and examples:

SearchstaxInputWidget – provides a search input box with autosuggest/autocomplete functionality
SearchstaxResultWidget – displays the search results
SearchstaxFacetsWidget – displays the facet filters
SearchstaxPaginationWidget – displays pagination controls for search results
SearchstaxSearchOverviewWidget – displays search feedback and stats
SearchstaxRelatedSearchesWidget – displays related searches
SeaerchstaxExternalPromotionsWidget – displays external promotions fetched from the API
SearchstaxSortingWidget – displays sorting options for search results

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Angular Widgets appeared first on SearchStax Docs.

SearchstaxInputWidget Angular

Bruce — Thu, 09 Nov 2023 16:32:25 +0000

SearchstaxInputWidget for Angular

The SearchStax Site Search solution offers an Angular input widget to assist with you custom search page.

The SearchstaxInputWidget component for Angular provides a search input with autosuggest/autocomplete functionality.

Usage

Import the component:

import { SearchstaxInputWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add it to the template:

<app-searchstax-input></app-searchstax-input>

Inputs

afterAutosuggest: Callback function triggered after autosuggest request completes. Used to modify autosuggest response before rendering suggestions.
beforeAutosuggest: Callback function triggered before autosuggest request. Used to modify autosuggest request parameters.
searchInputId: ID of the search input element. Default is ‘searchstax-search-input’.
suggestAfterMinChars: Minimum number of characters required to trigger autosuggest. Default is 3.
templateOverride: TemplateRef to override the default UI template.

Methods

onMouseLeave(): Resets autosuggest selection highlight.
onMouseOver(): Highlights autosuggestion on mouseover.
onMouseClick(): Selects highlighted autosuggestion.

Template Binding Properties

The templateOverride template provides the following context properties:

suggestions: Array of autosuggestion objects.
onMouseLeave: Method to reset autosuggest highlight.
onMouseOver: Method

See Example of Input Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post SearchstaxInputWidget Angular appeared first on SearchStax Docs.

SearchstaxResultWidget Angular

Bruce — Thu, 09 Nov 2023 16:31:52 +0000

Searchstax ResultWidget Angular

The SearchStax Site Search solution offers an Angular results widget to assist with you custom search page.

The SearchstaxResultsWidget for Angular component displays the search results.

Usage

Import the component:

import { SearchstaxResultsWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add it to the template:

<app-searchstax-results></app-searchstax-results>

Inputs

afterLinkClick: Callback function triggered when a result link is clicked. Used to modify the clicked result.
noResultsTemplate: TemplateRef to override the default no results UI.
resultsTemplate: TemplateRef to override the default results UI.

Properties

searchResults: Array of result objects.
metadata: Object containing search metadata like spelling suggestions etc.
searchTerm: The search term for which results are displayed.

Methods

resultClicked(): Handles click on a result link. Calls afterLinkClick if defined.
isImage(): Checks if a field contains an image.

Template Binding Properties

The noResultsTemplate provides the following properties:

metadata: Search metadata object.
searchTerm: Search term entered by user.

The resultsTemplate provides:

searchResults: Array of result objects.
resultClicked: Method to handle result click.
isImage: Method to check for image.
context: Component instance context.

See Example of Results Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post SearchstaxResultWidget Angular appeared first on SearchStax Docs.

SearchstaxFacetsWidget Angular

Bruce — Thu, 09 Nov 2023 16:32:00 +0000

SearchstaxFacetsWidget Angular

The SearchStax Site Search solution offers the SearchstaxFacetsWidget for Angular to display the search facets.

Facet Selection and Order

Facet lists are configured and ordered on the Site Search Faceting Tab.

Usage

Import the component:

import { SearchstaxSearchFacetsWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add to template:

<app-searchstax-search-facets></app-searchstax-search-facets>

Inputs

templateOverrideMobile: TemplateRef to override mobile UI.
templateOverrideDesktop: TemplateRef to override desktop UI.
facetingType: Faceting mode – ‘and’, ‘or’, ‘showUnavailable’, ‘tabs’.
itemsPerPageDesktop: Facets to show per group on desktop.
itemsPerPageMobile: Facets to show per group on mobile.
specificFacets: Array of facet names to display.

Properties

facetsTemplateDataDesktop: Desktop facets data.
facetsTemplateDataMobile: Mobile facets data.
selectedFacetsCheckboxes: Array of selected checkbox facets.

Methods

Facet Selection:
- selectFacet(): Handles facet selection.
- isChecked(): Checks if facet is selected.
- unselectFacet(): Unselects given facet.
- unselectAll(): Clears all selected facets.
Facet Group Toggle:
- toggleFacetGroup(): Toggles facet group active/inactive.
- isNotDeactivated(): Checks if facet group is active.
Show More/Less:
- showMoreLessDesktop(): Handles show more/less on desktop.
- showMoreLessMobile(): Handles show more/less on mobile.
Mobile Overlay:
- openOverlay(): Opens mobile facet overlay.
- closeOverlay(): Closes mobile facet overlay.

Template Binding Properties

templateOverrideDesktop provides:

facetsTemplateDataDesktop: Desktop facets data object.
context: Component instance context.
toggleFacetGroup: Toggles facet group active/inactive.
facetValues: Gets facet values for a group.
isChecked: Checks if facet is selected.
selectFacet: Handles facet selection.
showMoreLessDesktop: Handles show more/less on desktop.

templateOverrideMobile provides:

context: Component instance context.
toggleFacetGroup: Toggles facet group active/inactive.
facetValues: Gets facet values for a group.
isChecked: Checks if facet is selected.
selectFacet: Handles facet selection.
openOverlay: Opens mobile overlay.
selectedFacetsCheckboxes: Array of selected facets.
unselectFacet: Unselects given facet.
unselectAll: Clears all selected facets.
facetMobileData: Gets mobile facets data object.
facetsTemplateDataMobile: Mobile facets data object.
closeOverlay: Closes mobile overlay.
showMoreLessDesktop: Handles show more/less on desktop.

See Example of Facets Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post SearchstaxFacetsWidget Angular appeared first on SearchStax Docs.

Searchstax-PaginationWidget Angular

Bruce — Thu, 09 Nov 2023 16:32:16 +0000

Searchstax PaginationWidget Angular

The SearchStax Site Search solution offers an Angular pagination widget to assist with you custom search page.

The SearchstaxPaginationWidget for Angular displays pagination controls for search results.

Usage

Import the component:

import { SearchstaxPaginationWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add it to the template:

<app-searchstax-search-pagination></app-searchstax-search-pagination>

Inputs

templateOverride: TemplateRef to override the default pagination UI.

Properties

paginationData: Object containing pagination data like page numbers, result ranges etc.
context: Component instance reference.

Methods

nextPage(): Advances to the next page.
previousPage(): Goes back to previous page.
attachObservables(): Subscribes to search data observables.

Template Binding Properties

The templateOverride provides:

paginationData: Pagination data object.
previousPage: Method to go to previous page.
nextPage: Method to go to next page.
context: Component instance context.

See Example of Pagination Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Searchstax-PaginationWidget Angular appeared first on SearchStax Docs.

Searchstax-RelatedSearchesWidget Angular

Bruce — Thu, 09 Nov 2023 16:31:44 +0000

Searchstax RelatedSearchesWidget Angular

The SearchStax Site Search solution offers an Angular related-searches widget for your custom search page.

The SearchstaxRelatedSearchesWidget displays related searches.

Usage

Import the component:

import { SearchstaxRelatedSearchesWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add to template:

<app-searchstax-related-searches></app-searchstax-related-searches>

Inputs

relatedSearchesURL: URL for fetching related searches.
relatedSearchesAPIKey: API key for related searches.
templateOverride: TemplateRef to override default UI.

Properties

relatedData: Object containing related searches data.
context: Component instance reference.

Methods

executeSearch(): Triggers new search for a related query.
attachObservables(): Subscribes to search data observables.

Template Binding Properties

The templateOverride provides:

relatedData: Related searches data object.
executeSearch: Method to trigger new search.
context: Component instance context.

See Example of Related Searches Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Searchstax-RelatedSearchesWidget Angular appeared first on SearchStax Docs.

Searchstax- ExternalPromotions-Widget Angular

Bruce — Thu, 09 Nov 2023 16:32:36 +0000

Searchstax ExternalPromotionsWidget Angular

The SearchStax Site Search solution offers an Angular external-promotions widget for your custom search page.

The SearchstaxExternalPromotionsWidget displays external promotions fetched from the API.

Usage

Import the component:

import { SearchstaxSearchExternalPromotionsWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add to template:

<app-searchstax-external-promotions></app-searchstax-external-promotions>

Input

templateOverride: TemplateRef to override default UI template.

Properties

externalPromotionsData: External promotions data object.

Methods

trackClick(): Handles click tracking for promotions.

Template Binding Properties

The templateOverride template provides:

externalPromotionsData: External promotions data object.
context: Component instance context.
trackClick: Handles click tracking for promotions.

See Example of External Promotions Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Searchstax- ExternalPromotions-Widget Angular appeared first on SearchStax Docs.

Searchstax-SortingWidget Angular

Bruce — Thu, 09 Nov 2023 16:32:43 +0000

SearchstaxSortingWidget Angular

The SearchStax Site Search solution provides an Angular sorting widget for your custom search page.

The SearchstaxSortingWidget displays sorting options for search results.

Usage

Import the component:

import { SearchstaxSearchSortingWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add to template:

<app-searchstax-search-sorting></app-searchstax-search-sorting>

Inputs

templateOverride: TemplateRef to override default sorting UI.

Properties

sortingData: Object containing sorting data.
context: Component instance reference.
selectedSorting: Current selected sorting.

Methods

orderChange(): Handles changing the sort order.
attachObservables(): Subscribes to search data observables.

Template Binding Properties

The templateOverride provides:

selectedSorting: Current selected sorting.
orderChange: Method to handle changing sort.
context: Component instance context.

See Example of Sorting Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Searchstax-SortingWidget Angular appeared first on SearchStax Docs.