The SearchStax Site Search solution’s SearchStudio-ux-react comes with default CSS styling that can be customized for your React or Next.js search page.

Using Default Styles

The default CSS stylesheet is located at:

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

To use it, simply import this file:

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

Customization

The default CSS classes can be overridden to customize styling:

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

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

/* Override other class names */

Advanced Customization

For more advanced 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

Refer the SCSS source for available variables, mixins and selectors.

Theming

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

@import 'mainTheme.scss';

// Override variables and add custom CSS

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

Questions?

Do not hesitate to contact the SearchStax Support Desk.

Questions?

Do not hesitate to contact the SearchStax Support Desk.

SearchStax Site Search solution offers React and Next.js widgets to assist in building your custom search page.

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

Usage

<SearchstaxInputWidget
  afterAutosuggest={afterAutosuggest}
  beforeAutosuggest={beforeAutosuggest}
  suggestAfterMinChars={3}
/>

Props

• afterAutosuggest – Callback function invoked after autosuggest results are received. Allows modifying the suggestions.
• beforeAutosuggest – Callback function invoked before making the autosuggest API call. Allows modifying the request parameters.
• searchInputId – ID of the search input element. Default: "searchstax-search-input"
• suggestAfterMinChars – Minimum number of characters required to trigger autosuggest. Default: 3

inputTemplate

The inputTemplate prop allows customizing the input UI.

It receives the following props:

• suggestions – Array of autosuggestion results
• onMouseLeave – Handler for mouse leave event
• onMouseOver – Handler for mouse over event
• onMouseClick – Handler for mouse click event

Example

  <div
    className={`searchstax-autosuggest-container ${suggestions.length === 0 ? 'hidden' : ''}`}
    onMouseLeave={onMouseLeave}
  >
    {suggestions.map(suggestion => (
      <div
        className="searchstax-autosuggest-item"
        key={suggestion.term}
        onMouseOver={() => onMouseOver(suggestion)}
        onClick={onMouseClick}
      >
        <div
          className="searchstax-autosuggest-item-term-container"
          dangerouslySetInnerHTML={{__html: suggestion.term}}
        />
      </div>
    ))}
  </div>

  <button
    className="searchstax-spinner-icon"
    id="searchstax-search-input-action-button"
  />
</div>
)}
/

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The SearchStax Site Search solution offers a React and Next.js results widget to assist with your custom search page.

The SearchstaxResultsWidget displays the search results.

Usage

<SearchstaxResultsWidget
  afterLinkClick={afterLinkClick}
/>

Props

• afterLinkClick – Callback when a result link is clicked. Allows handling link click behavior.
• noResultTemplate – Renders custom UI when no results are returned.
• resultsTemplate – Renders custom UI for the results list.

noResultTemplate

Customize the no results UI.

It receives:

• searchTerm – The search term used
• metaData – Search metadata object

resultsTemplate

Customize the results UI.

It receives:

• searchResults – Array of result items
• resultClicked – Handler when a result is clicked

Example

<SearchstaxResultsWidget
  afterLinkClick={afterLinkClick}

  noResultTemplate={(searchTerm, metaData) => (
    <div>
      {/* Custom no result UI */}
    </div>
  )}

  resultsTemplate={(searchResults, resultClicked) => (
    <div>
      {searchResults.map(result => (
        <div
          key={result.uniqueId}
          onClick={() => resultClicked(result)}
        >
          {/* Custom result UI */}
        </div>
      ))}
    </div>
  )}
/>

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The SearchStax Site Search solution offers a SearchstaxFacetsWidget component for React and Next.js. This widget displays the search facets.

Usage

<SearchstaxFacetsWidget
                facetingType="and"
                itemsPerPageDesktop={2}
                itemsPerPageMobile={3}
                specificFacets={undefined}
                facetsTemplateDesktop={facetsTemplateDesktop}
                facetsTemplateMobile={facetsTemplateMobile}
 ></SearchstaxFacetsWidget>

Props

• facetingType – Faceting logic type: "and" | "or" | "showUnavailable" | "tabs"
• itemsPerPageDesktop – Number of facets to show per group on desktop
• itemsPerPageMobile – Number of facets to show per group on mobile
• specificFacets – Array of facet names to display

Template Props

Customize the UI by passing template functions.

facetsTemplateDesktop

Renders the desktop facets UI.

Receives:

• facetsTemplateDataDesktop – Facets data object
• facetContainers – Refs for facet containers
• toggleFacetGroup – Toggles facet group expanded/collapsed
• selectFacet – Handles facet selection
• isChecked – Checks if a facet is selected
• showMoreLessDesktop – Shows more/less facets

facetsTemplateMobile

Renders the mobile facets UI.

Receives:

• facetsTemplateDataMobile – Facets data object
• selectedFacetsCheckboxes – Selected facets
• facetContainers – Refs for facet containers
• toggleFacetGroup – Toggles facet group
• selectFacet – Handles facet selection
• isChecked – Checks if facet is selected
• unselectFacet – Unselects a facet
• showMoreLessMobile – Shows more/less facets
• openOverlay – Opens the mobile overlay
• closeOverlay – Closes the overlay
• unselectAll – Unselects all facets

Example

• Read more

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The SearchStax Site Search solution offers a pagination widget for React and Next.js search pages.

The SearchstaxPaginationWidget displays pagination controls for search results.

Usage

<SearchstaxPaginationWidget />

Props

• paginationTemplate – Renders custom pagination UI.

paginationTemplate

Customize the pagination UI.

It receives:

• paginationData – Pagination data object
• nextPage – Handles next page click
• previousPage – Handles previous page click

Example

<SearchstaxPaginationWidget
  paginationTemplate={(paginationData, nextPage, previousPage) => (
    <div>
      {/* Custom pagination UI */}

      <button onClick={previousPage}>Prev</button>

      <button onClick={nextPage}>Next</button>
    </div>
  )}
/>

The paginationData object contains:

• totalResults – Total number of results
• startResultIndex – Start index of current page
• endResultIndex – End index of current page
• isFirstPage – Whether on first page
• isLastPage – Whether on last page

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The SearchStax Site Search solution offers a related-searches widget for React and Next.js search pages.

The SearchstaxRelatedSearchesWidget displays related searches.

Usage

<SearchstaxRelatedSearchesWidget
  relatedSearchesURL={config.relatedSearchesURL}
  relatedSearchesAPIKey={config.relatedSearchesAPIKey}
/>

Props

• relatedSearchesURL – Related searches API endpoint
• relatedSearchesAPIKey – API key for related searches API

searchRelatedSearchesTemplate

Renders custom related searches UI.

Receives:

• relatedData – Related searches data
• executeSearch – Handles search when result clicked

Example

function searchRelatedSearchesTemplate(
    relatedData: null | ISearchstaxRelatedSearchesData,
    executeSearch: (result: ISearchstaxRelatedSearchResult) => void
  ) {
    return (
      <>
        {relatedData && relatedData?.searchExecuted && relatedData?.hasRelatedSearches && (
          <div className="searchstax-related-searches-container" id="searchstax-related-searches-container">
            {" "}
            Related searches: <span id="searchstax-related-searches"></span>
            {relatedData.relatedSearches && (
              <span className="searchstax-related-search">
                {relatedData.relatedSearches.map((related) => (
                  <span
                    key={related.related_search}
                    onClick={() => {
                      executeSearch(related);
                    }}
                    className="searchstax-related-search searchstax-related-search-item"
                  >
                    {" "}
                    {related.related_search}
                    {!related.last && <span>,</span>}
                  </span>
                ))}
              </span>
            )}
          </div>
        )}
      </>
    );
  }
  <SearchstaxRelatedSearchesWidget
                relatedSearchesURL={config.relatedSearchesURL}
                relatedSearchesAPIKey={config.relatedSearchesAPIKey}
                searchRelatedSearchesTemplate={searchRelatedSearchesTemplate}
              ></SearchstaxRelatedSearchesWidget>

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The SearchStax Site Search solution offers a search-overview widget to assist with your React and Next.js search pages.

The SearchstaxOverviewWidget displays search feedback and stats.

Usage

Import the component:

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

Add to template:

<app-searchstax-search-feedback></app-searchstax-search-feedback>

Inputs

• templateOverride: TemplateRef to override default feedback UI.

Properties

• searchFeedbackData: Object containing feedback data like result count, search term etc.
• context: Component instance reference.

Methods

• onOriginalQuery(): Handles click on original misspelled query.
• attachObservables(): Subscribes to search data observables.

Template Binding Properties

The templateOverrides provides:

• searchFeedbackData: Feedback data object.
• onOriginalQueryClick: Handles click on original query.
• context: Component instance context.

See Example of Search Overview Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.