Introducing the SearchStax Site Search solution’s 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.

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.

The SearchStax Site Search solution includes a JavaScript package to help you assemble a custom search page.

Example

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

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 with searchstudio-UX-JS appeared first on SearchStax Docs.

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

The post Widget Configuration appeared first on SearchStax Docs.

The SearchStax Site Search solution’s 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.

To learn more about the SearchStax Site Search solution’s 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
• Using Hooks – to customize data flowing back and forth from the UI to Solr.
• Interface Reference – Interfaces used by the various JS Widgets.

The post JS Widgets appeared first on SearchStax Docs.

searchstax.addSearchInputWidget(container, options);

templates: {

  mainTemplate: {
    template: `
      <div class="input-wrap">
        <input id="search-input">
      </div>
    `
  }

}

templates: {
  autosuggestItemTemplate: {
    template: '<div>{{term}}</div>'
  }
}

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

      },
      beforeAutosuggest: function (props: ISearchstaxSuggestProps) {

      },
    },
    templates: {
    mainTemplate: {
        template: `
        <div class="searchstax-search-input-container">
            <div class="searchstax-search-input-wrapper">
                <input type="text" id="searchstax-search-input" class="searchstax-search-input" placeholder="SEARCH FOR..." />
                <button class="searchstax-spinner-icon" id="searchstax-search-input-action-button"></button>
            </div>
        </div>
        `,
        searchInputId: "searchstax-search-input"
    }
    autosuggestItemTemplate: {
        template: `
        <div class="searchstax-autosuggest-item-term-container">{{{term}}}</div>
        `,
    }
    },
  });

The post Input Widget JS appeared first on SearchStax Docs.

searchstax.addSearchResultsWidget(container, options);

templates: {

  mainTemplate: {
    template: `
      <div class="results-wrap">
        <div id="results"></div>
      </div>
    `
  }

}

templates: {

  searchResultTemplate: {
    template: `
      <div class="result">
        <h3>{{title}}</h3>
        <p>{{description}}</p>
      </div>
    `
  }

}

templates: {

  noSearchResultTemplate: {
    template: `
      <div>
        No results found for <b>{{searchTerm}}</b>.

        {{#spellingSuggestion}}
          Did you mean <b>{{spellingSuggestion}}</b>?
        {{/spellingSuggestion}}
      </div>
    `
  }

}

searchstax.addSearchResultsWidget('results', {

  templates: {

    mainTemplate: {
      template: `
        <div id="results-container"></div>
      `,
      searchResultsContainerId: 'results-container'
    },

    searchResultTemplate: {
      template: `
        <div class="result">
          <a href="{{url}}" data-id="{{id}}"></a>
          <!-- result content -->
        </div>
      `,
      searchResultUniqueIdAttribute: 'data-id'
    },

    noSearchResultTemplate: {
      template: `
        <div>No results found.</div>
      `
    }

  },

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

});

The post Results Widget JS appeared first on SearchStax Docs.

The SearchStax Site Search solution’s 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: `
      <div class="desktop-facets"></div>
    `,
    facetsContainerId: 'desktop-facets'
  }

}

mainTemplateMobile

Main wrapper template for mobile facets display.

• Usage:

templates: {

  mainTemplateMobile: {
    template: `
      <div class="mobile-facets"></div>
    `,
    facetsContainerId: 'mobile-facets'
  }

}

showMoreButtonContainerTemplate

Template for the show more button when collapsing facets.

• Template model: IFacetData
• Usage:

templates: {

  showMoreButtonContainerTemplate: {
    template: `
      <div class="show-more">
        Show More
      </div>
    `,
    showMoreButtonClass: 'show-more'
  }

}

facetItemContainerTemplate

Template for each facet group.

• Template model: IFacetData
• Usage:

templates: {

  facetItemContainerTemplate: {
    template: `
      <div class="facet-group">
        <div class="facet-group-name"></div>
        <div class="facet-options"></div>
      </div>
    `,

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

}

clearFacetsTemplate

Template for clear all filters button.

• Template model: {shouldShow: boolean}
• Usage:

templates: {

  clearFacetsTemplate: {
    template: `
      <div class="clear-filters">
        Clear All Filters
      </div>
    `
  }

}

facetItemTemplate

Template for each facet value item.

• Template model: IFacetValueData
• Usage:

templates: {

  facetItemTemplate: {
    template: `
      <input type="checkbox" class="facet-checkbox">
      <div class="facet-label">{{label}} ({{count}})</div>
    `
  }

}

filterByTemplate

Template for the filter by pill.

• Template model: {} (plain object)
• Usage:

templates: {

  filterByTemplate: {
    template: `
      <div class="filter-pill">
        Filter By
      </div>
    `
  }

}

selectedFacetsTemplate

Template for selected facet pills.

• Template model: IFacetValue | IFacetValueRange
• Usage:

templates: {

  selectedFacetsTemplate: {
    template: `
      <div class="selected-facet-pill">
        {{label}} ({{count}})
        <span class="remove"></span>
      </div>
    `
  }

}

The IFacetValueRange interface is for numeric range facets.

Example

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

  facetingType: 'and',

  itemsPerPageDesktop: 5,
  itemsPerPageMobile: 3,

  templates: {

    mainTemplateDesktop: {
      template: `
        <div class="desktop-facets"></div>
      `,
      facetsContainerId: 'desktop-facets'
    },

    mainTemplateMobile: {
      template: `
        <div class="mobile-facets"></div>
      `,
      facetsContainerId: 'mobile-facets'
    },

    showMoreButtonContainerTemplate: {
      template: `
        <div class="show-more">
          Show More
        </div>
      `,
      showMoreButtonClass: 'show-more' 
    },

    facetItemContainerTemplate: {
      template: `
        <div class="facet-group">
          <div class="facet-group-name"></div>
          <div class="facet-options"></div>
        </div>
      `,
      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.

The SearchStax Site Search solution’s Pagination Widget 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: `
      <div class="pagination">

        <button class="previous {{#isFirstPage}}disabled{{/isFirstPage}}">
          Previous
        </button>

        <span class="page-info">
          {{startIndex}} - {{endIndex}} of {{totalResults}}
        </span>

        <button class="next {{#isLastPage}}disabled{{/isLastPage}}">
          Next
        </button>

      </div>
    `
  }

}

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

Example

searchstax.addPaginationWidget('pagination', {

  templates: {

    mainTemplate: {
      template: `
        <div class="pagination">
          <a class="prev-btn"></a>
          <div class="page-info">1-10 of 100</div>
          <a class="next-btn"></a>
        </div>
      `,
      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.

The SearchStax Site Search solution’s Feedback Widget 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: `
      <div class="search-feedback">

        Showing <b>{{startIndex}} - {{endIndex}}</b> of <b>{{totalResults}}</b> results for <b>{{searchTerm}}</b>

        <div class="searchstax-feedback-container-suggested">
                  {{#autoCorrectedQuery}}
                    Search instead for <a href="#" class="searchstax-feedback-original-query">{{originalQuery}}</a>
                  {{/autoCorrectedQuery}}
                </div>

      </div>
    `
  }

}

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

Example

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

  templates: {

    main: {
      template: `
        <div class="feedback">
          Showing X-Y of Z results for "<query>"
          
          <a class="original-query">Did you mean <b>original</b>?</a> 
        </div>
      `,
      originalQueryClass: 'original-query'
    }

  }

});

Questions?

Do not hesitate to contact the SearchStax Support Desk.

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