Searchstudio-ux-js Archives - SearchStax Docs

What is searchstudio-ux-js

Tom Humbarger — Wed, 26 Jul 2023 09:55:54 +0000

What is searchstudio-ux-js

Introducing SearchStudio-UX-JS: Empowering Frontend Applications with Stunning Search Experiences

SearchStudio-UX-JS is an advanced VanillaJS components library specifically designed to streamline the development of exceptional search interfaces within your frontend application.

Goal of the Components Library

The primary goal of the library is to offer a comprehensive UI ecosystem that seamlessly integrates with your project, taking care of the frontend and UI aspects while harnessing the powerful search functionality of SearchStudio in the background.

By leveraging searchstudio-ux-js, you gain access to an assortment of ready-to-use components, including a versatile search box, results list, dynamic filters, and more. These components can be effortlessly combined to create distinctive and visually captivating search UIs. The library’s focus on performance, accessibility, and aesthetic appeal abstracts away complexities, allowing you to concentrate on crafting truly remarkable search experiences.

Strengths of searchstudio-ux-js

One of the key strengths of SearchStudio-UX-JS lies in its full integration with SearchStax Studio. As a result, you can seamlessly leverage the complete suite of search features offered by SearchStudio, such as typo tolerance, synonyms, and dynamic filters, without concerning yourself with intricate UI implementation.

Get started now to build awesome search experiences faster than ever before with searchstudio-ux-js.

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

Getting Started UX-JS

Tom Humbarger — Wed, 26 Jul 2023 09:59:45 +0000

Getting Started

Installation

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

Import

Import the Searchstax class into your code:

import Searchstax from '@searchstax-inc/searchstudio-ux-js';

Instantiation

Create a new instance of the Searchstax class:

const searchstax = new Searchstax();

Initialization

Initialize the Searchstax instance by passing a configuration object:

searchstax.initialize({
  // options
});

See the Configuration section for details on the options available.

Widgets

Add widgets by invoking the respective add methods:

searchstax.addSearchInputWidget({/* options */});
searchstax.addSearchResultsWidget({/* options */});
// etc

Refer to the Widgets section for details on each widget.

Styles

Import the default CSS styles:

@import '@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css';

See the Styling section for information on theming and customization.

The post Getting Started UX-JS appeared first on SearchStax Docs.

Widget Configuration

Bruce — Wed, 26 Jul 2023 10:40:45 +0000

Widget Configuration

The UI library provides several widgets that can be configured and added to a page. Each widget has a configuration object that defines its options.

Widget	Description	Implementation
Input	Renders the search input box and handles search suggestions/auto-complete	Input Widget Docs
Results	Displays the core search results with titles, descriptions, images etc.	Results Widget Docs
Pagination	Provides pagination controls and status for search result pages	Pagination Widget Docs
Facets	Displays faceted filters that allow drilling down search results	Facets Widget Docs
Search Feedback	Shows search feedback message with number of results and corrected queries	SearchFeedback Widget Docs
Related Searches	Displays algorithmically generated related searches for the current query	Related Searches Widget Docs
External Promotions	Renders promotional content from external sources	External Promotions Widget Docs
Sorting	Provides controls to sort search results by predefined options like date, relevance etc.	Sorting Widget Docs

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Widget Configuration appeared first on SearchStax Docs.

Styling

Tom Humbarger — Wed, 30 Aug 2023 17:51:00 +0000

Styling

The searchstudio-ux-js library comes with a default CSS theme located at:

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

To use the default styling, simply import this CSS file:

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

Customization

The default CSS classes can be overridden to customize the styling:

.searchstax-search-input {
  /* Override default input styling */
}

.searchstax-result {
  /* Override result styling */
}

/* Override other CSS class names */

For more extensive customization, the SCSS source files can be imported and modified:

@import 'node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/scss/mainTheme.scss';

// Override SCSS variables and mixins

See the source SCSS files for the various mixins, variables, and selectors that can be customized.

Theming

To create a new theme, the main SCSS file can be used as a starting point:

@import 'mainTheme.scss';

// Override variables and custom CSS

This allows building on top of the default theme with new styling and theme variables.

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Styling appeared first on SearchStax Docs.

JS Widgets

Bruce — Wed, 30 Aug 2023 17:55:02 +0000

Widgets for searchstudio-ux-js

To learn more about the SearchStudio-UX-JS Widgets, follow the links to each page to see the templates and examples:

Input Widget – provides the search input field with autosuggest/autocomplete capabilities
Results Widget – displays the search results
Facets Widget – displays faceted filters for search
Pagination Widget – displays a pagination control
Search Feedback Widget – displays search feedback and stats
Related Searches Widget – displays related searches
External Promotions Widget – displays external promotions
Sorting Widget – allows sorting of search results
Interface Reference – Interfaces used by the various JS Widgets.

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post JS Widgets appeared first on SearchStax Docs.

Input Widget JS

Tom Humbarger — Wed, 30 Aug 2023 17:53:12 +0000

Input Widget JS

The Input widget provides the search input field with autosuggest/autocomplete capabilities.

Usage

searchstax.addSearchInputWidget(container, options);

container – The element to render the widget
options – Configuration options (ISearchstaxSearchInputConfig)

Template Override

The input widget template option allows customizing the UI templates.

mainTemplate

Main wrapper template for the input box.

Template model: {} (plain object)
Usage:

templates: {

  mainTemplate: {
    template: `
      
        
      
    `
  }

}

autosuggestItemTemplate

Renders each autosuggestion item.

Template model: ISearchstaxSuggestion
Usage:

templates: {
  autosuggestItemTemplate: {
    template: '{{term}}'
  }
}

This renders the input widget with customized templates and hooks for full control over the input behavior and appearance.

Example

searchstax.addSearchInputWidget("searchstax-input-container", {
    suggestAfterMinChars: 3,
    hooks: {
      afterAutosuggest: function (result: ISearchstaxSuggestResponse) {

      },
      beforeAutosuggest: function (props: ISearchstaxSuggestProps) {

      },
    },
    templates: {
    mainTemplate: {
        template: `
        
            
                
                
            
        
        `,
        searchInputId: "searchstax-search-input"
    }
    autosuggestItemTemplate: {
        template: `
        {{{term}}}
        `,
    }
    },
  });

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Input Widget JS appeared first on SearchStax Docs.

Results Widget JS

Tom Humbarger — Wed, 30 Aug 2023 18:02:20 +0000

Results Widget JS

The Results Widget for UX-JS displays the search results.

Usage

searchstax.addSearchResultsWidget(container, options);

container – The element to render the widget
options – Configuration options (ISearchstaxSearchResultsConfig)

Template Override

The result widget template option allows customizing the UI templates.

mainTemplate

Main wrapper template for the results section.

Template model: {} (plain object)
Usage:

templates: {

  mainTemplate: {
    template: `
      
        
      
    `
  }

}

searchResultTemplate

Template for each individual search result.

Template model: ISearchstaxParsedResult
Usage:

templates: {

  searchResultTemplate: {
    template: `
      
        {{title}}
        {{description}}
      
    `
  }

}

noSearchResultTemplate

Template shown when there are no results.

Template model:
- spellingSuggestion – Suggested spelling correction
- searchTerm – Search term used
Usage:

templates: {

  noSearchResultTemplate: {
    template: `
      
        No results found for {{searchTerm}}.

        {{#spellingSuggestion}}
          Did you mean {{spellingSuggestion}}?
        {{/spellingSuggestion}}
      
    `
  }

}

Example

searchstax.addSearchResultsWidget('results', {

  templates: {

    mainTemplate: {
      template: `
        
      `,
      searchResultsContainerId: 'results-container'
    },

    searchResultTemplate: {
      template: `
        
          
          
        
      `,
      searchResultUniqueIdAttribute: 'data-id'
    },

    noSearchResultTemplate: {
      template: `
        No results found.
      `
    }

  },

  hooks: {
    afterLinkClick: (result) => {
      // handle click
    }
  }

});

This renders the results widget using custom templates and hooks for handling search result clicks.

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Results Widget JS appeared first on SearchStax Docs.

Facets Widget JS

Tom Humbarger — Wed, 30 Aug 2023 18:01:31 +0000

Facets Widget JS

The Facets Widget for UX-JS displays faceted filters for search.

Usage

searchstax.addFacetsWidget(container, options);

container – The element to render the widget
options – Configuration options (ISearchstaxSearchFacetsConfig)

Multiple Instances

Multiple instances of the Facets widget can be added by calling the addFacetsWidget method multiple times with different target containers:

searchstax.addFacetsWidget('container1', options1);

searchstax.addFacetsWidget('container2', options2);

Each instance can be configured separately via its options object. This allows for the widget to be added to different locations on the page as needed.

Template Override

The facet widget template option allows customizing the UI templates.

mainTemplateDesktop

Main wrapper template for desktop facets display.

Template model: IFacetsTemplateData
Usage:

templates: {

  mainTemplateDesktop: {
    template: `
      
    `,
    facetsContainerId: 'desktop-facets'
  }

}

mainTemplateMobile

Main wrapper template for mobile facets display.

Template model: IFacetsTemplateData
Usage:

templates: {

  mainTemplateMobile: {
    template: `
      
    `,
    facetsContainerId: 'mobile-facets'
  }

}

showMoreButtonContainerTemplate

Template for the show more button when collapsing facets.

Template model: IFacetData
Usage:

templates: {

  showMoreButtonContainerTemplate: {
    template: `
      
        Show More
      
    `,
    showMoreButtonClass: 'show-more'
  }

}

facetItemContainerTemplate

Template for each facet group.

Template model: IFacetData
Usage:

templates: {

  facetItemContainerTemplate: {
    template: `
      
        
        
      
    `,

    facetListTitleContainerClass: 'facet-group-name',
    facetListContainerClass: 'facet-options'
  }

}

clearFacetsTemplate

Template for clear all filters button.

Template model: {shouldShow: boolean}
Usage:

templates: {

  clearFacetsTemplate: {
    template: `
      
        Clear All Filters
      
    `
  }

}

facetItemTemplate

Template for each facet value item.

Template model: IFacetValueData
Usage:

templates: {

  facetItemTemplate: {
    template: `
      
      {{label}} ({{count}})
    `
  }

}

filterByTemplate

Template for the filter by pill.

Template model: {} (plain object)
Usage:

templates: {

  filterByTemplate: {
    template: `
      
        Filter By
      
    `
  }

}

selectedFacetsTemplate

Template for selected facet pills.

Template model: IFacetValue | IFacetValueRange
Usage:

templates: {

  selectedFacetsTemplate: {
    template: `
      
        {{label}} ({{count}})
        
      
    `
  }

}

The IFacetValueRange interface is for numeric range facets.

Example

searchstax.addFacetsWidget('searchstax-facets-container', {

  facetingType: 'and',

  itemsPerPageDesktop: 5,
  itemsPerPageMobile: 3,

  templates: {

    mainTemplateDesktop: {
      template: `
        
      `,
      facetsContainerId: 'desktop-facets'
    },

    mainTemplateMobile: {
      template: `
        
      `,
      facetsContainerId: 'mobile-facets'
    },

    showMoreButtonContainerTemplate: {
      template: `
        
          Show More
        
      `,
      showMoreButtonClass: 'show-more' 
    },

    facetItemContainerTemplate: {
      template: `
        
          
          
        
      `,
      facetListTitleContainerClass: 'facet-group-name',
      facetListContainerClass: 'facet-options'
    },

    // other templates

  }

});

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Facets Widget JS appeared first on SearchStax Docs.

Pagination Widget JS

Tom Humbarger — Wed, 30 Aug 2023 18:00:39 +0000

Pagination Widget JS

Displays a pagination control for UX-JS.

Usage

searchstax.addPaginationWidget(container, options);

container – Element to render widget into
options – Configuration options (Read more)

Multiple Instances

Multiple instances of the Pagination widget can be added by calling the addPaginationWidget method multiple times with different target containers:

searchstax.addPaginationWidget('container1', options1);

searchstax.addPaginationWidget('container2', options2);

Each instance can be configured separately via its options object. This allows for the widget to be added to different locations on the page as needed.

Template Override

The pagination widget template option allows customizing the UI templates.

mainTemplate

Main template for the pagination controls.

Template model: IPaginationData
Usage:

templates: {

  mainTemplate: {
    template: `
      

        

        
          {{startIndex}} - {{endIndex}} of {{totalResults}}
        

        

      
    `
  }

}

The IPaginationData interface provides pagination metadata to use in the template.

Example

searchstax.addPaginationWidget('pagination', {

  templates: {

    mainTemplate: {
      template: `
        
          
          1-10 of 100
          
        
      `,
      previousButtonClass: 'prev-btn',
      nextButtonClass: 'next-btn'
    }

  }

});

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Pagination Widget JS appeared first on SearchStax Docs.

Search Feedback Widget JS

Tom Humbarger — Wed, 26 Jul 2023 23:14:37 +0000

Search Feedback Widget JS

Displays search feedback and stats for UX-JS.

Usage

searchstax.addSearchFeedbackWidget(container, options);

container – Element to render widget into
options – Configuration options (Read more)

Multiple Instances

Multiple instances of the SearchFeedback widget can be added by calling the addSearchFeedbackWidget method multiple times with different target containers:

searchstax.addSearchFeedbackWidget('container1', options1);

searchstax.addSearchFeedbackWidget('container2', options2);

Each instance can be configured separately via its options object. This allows for the widget to be added to different locations on the page as needed.

Template Override

The searchFeedback widget template option allows customizing the UI templates.

mainTemplate

Main template for the search feedback message.

Template model: ISearchstaxSearchFeedbackData
Usage:

templates: {

  main: {
    template: `
      

        Showing {{startIndex}} - {{endIndex}} of {{totalResults}} results for {{searchTerm}}

        
                  {{#autoCorrectedQuery}}
                    Search instead for {{originalQuery}}
                  {{/autoCorrectedQuery}}
                

      
    `
  }

}

The ISearchstaxSearchFeedbackData interface provides search metadata to use in the template.

Example

searchstax.addSearchFeedbackWidget('search-feedback-container', {

  templates: {

    main: {
      template: `
        
          Showing X-Y of Z results for ""
          
          Did you mean original? 
        
      `,
      originalQueryClass: 'original-query'
    }

  }

});

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Search Feedback Widget JS appeared first on SearchStax Docs.