Searchstudio-ux-react Archives - SearchStax Docs Documentation Thu, 07 Dec 2023 18:11:51 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 https://www.searchstax.com/docs/wp-content/uploads/2023/10/cropped-favicon-32x32.png Searchstudio-ux-react Archives - SearchStax Docs 32 32 What is searchstudio-ux-react https://www.searchstax.com/docs/searchstudio/overview-searchstudio-ux-react/ Tue, 10 Oct 2023 18:17:40 +0000 https://www.searchstax.com/docs/?post_type=searchstudio&p=16443 What is searchstudio-ux-react Searchstudio-ux-react offers the power of SearchStax Studio search within React applications. It provides ready-made React components that integrate seamlessly to deliver exceptional search experiences. Goal of the… Continue reading What is searchstudio-ux-react

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

]]> What is searchstudio-ux-react

Searchstudio-ux-react offers the power of SearchStax Studio search within React applications. It provides ready-made React components that integrate seamlessly to deliver exceptional search experiences.

Goal of the Components Library

The goal of SearchStudio-UX-React is to streamline the development of stunning search UIs in React apps by handling all frontend and UI complexities.

It offers a suite of React components like search box, results, filters etc. that can be easily combined to create engaging search interfaces. The focus on performance, accessibility and visual appeal allows you to craft remarkable search UIs with minimal effort.

Key Benefits of Using SearchStudio-UX-React

  • Fully integrates with SearchStudio search capabilities like typo tolerance, synonyms, facets etc.
  • Ready-made performant and accessible React 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 React applications

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

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

]]> Getting Started with searchstudio-ux-react https://www.searchstax.com/docs/searchstudio/getting-started-with-searchstudio-ux-react/ Tue, 10 Oct 2023 18:19:48 +0000 https://www.searchstax.com/docs/?post_type=searchstudio&p=16445 Getting Started with searchstudio-ux-react Installation Usage Add following code to <head> Import Components Import the necessary components: Wrapper Component Wrap all other SearchStudio components in SearchstaxWrapper: Configuration Pass search configuration to… Continue reading Getting Started with searchstudio-ux-react

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

]]> Getting Started with searchstudio-ux-react

Installation

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

Usage

Add following code to <head>

<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 the necessary components:

import { 
  SearchstaxWrapper,
  SearchstaxInputWidget,
  SearchstaxResultsWidget
} from '@searchstax-inc/searchstudio-ux-react';

Wrapper Component

Wrap all other SearchStudio components in SearchstaxWrapper:

<SearchstaxWrapper>

  {/* Other SearchStudio components */}

</SearchstaxWrapper>

Configuration

Pass search configuration to SearchstaxWrapper:

<SearchstaxWrapper
  language={sampleConfig.language}
  searchURL={sampleConfig.searchURL}
  suggesterURL={sampleConfig.suggesterURL}
  trackApiKey={sampleConfig.trackApiKey}
  searchAuth={sampleConfig.searchAuth}
  authType={sampleConfig.authType}
  router={sampleConfig.router}
  beforeSearch={sampleConfig.hooks.beforeSearch}
  afterSearch={sampleConfig.hooks.afterSearch}
>
</SearchstaxWrapper>

Initialization example:

const sampleConfig = {
  language: 'en',
  searchURL: '',
  suggesterURL: '',
  trackApiKey: '',
  searchAuth: '',
  authType: 'basic',
  router: {
    enabled: true,
    routeName: 'searchstax',
    title: (result) => `Search results for: ${result.query}`,
    ignoredKeys: []
  },
  hooks: {
    beforeSearch: (props) => {
// modify props
      return props;
    },
    afterSearch: (results) => {
// modify results
      return results;
    }
  }
};

The sampleConfig needs to match the ISearchstaxConfig interface.

interface ISearchstaxConfig {
  language: string; // language code. Example: 'en'
  searchURL: string; // SearchStudio select endpoint
  suggesterURL: string; //SearchStudio suggest endpoint
  trackApiKey: string; // Api key used for tracking events
  searchAuth: string; // Authentication value. based on authType it's either a token value or basic auth value
  authType: "token" | "basic"; // Type of authentication
  autoCorrect?: boolean; // if set to true it will autoCorrect misspelled words. Default is false
  router?: IRouterConfig; // optional object containing router settings
  hooks?: {
    // optional object that provides various hook options
    beforeSearch?: (props: ISearchObject) => ISearchObject | null; // this function gets called before firing search. searchProps are being passed as a property and can be modified, if passed along further search will execute with modified properties, if null is returned then event gets canceled and search never fires.
    afterSearch?: (results: ISearchstaxParsedResult[]) => ISearchstaxParsedResult[]; // this function gets called after firing search and before rendering. It needs to return array of results that are either modified or untouched.
  };
}

Adding Components

Add any other SearchStudio components as needed:

<SearchstaxWrapper>

  <SearchstaxInputWidget />

  <SearchstaxResultsWidget />

  {/* Other components */}

</SearchstaxWrapper>

Styles

Import the CSS:

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

See the React Styling section for information on theming and customization.

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

]]> SearchstaxInputWidget React https://www.searchstax.com/docs/searchstudio/searchstaxinputwidget-react/ Tue, 10 Oct 2023 18:56:15 +0000 https://www.searchstax.com/docs/?post_type=searchstudio&p=16449 SearchstaxInputWidget for React The SearchstaxInputWidget component for React provides a search input with autosuggest/autocomplete functionality. Usage Props inputTemplate The inputTemplate prop allows customizing the input UI. It receives the following… Continue reading SearchstaxInputWidget React

The post SearchstaxInputWidget React appeared first on SearchStax Docs.

]]> SearchstaxInputWidget for React

The SearchstaxInputWidget component for React 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 post SearchstaxInputWidget React appeared first on SearchStax Docs.

]]> SearchstaxResultWidget React https://www.searchstax.com/docs/searchstudio/searchstaxresultwidget-react/ Tue, 10 Oct 2023 19:03:10 +0000 https://www.searchstax.com/docs/?post_type=searchstudio&p=16453 Searchstax ResultWidget React The SearchstaxResultsWidget for React component displays the search results. Usage Props noResultTemplate Customize the no results UI. It receives: resultsTemplate Customize the results UI. It receives: Example… Continue reading SearchstaxResultWidget React

The post SearchstaxResultWidget React appeared first on SearchStax Docs.

]]> Searchstax ResultWidget React

The SearchstaxResultsWidget for React component 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 post SearchstaxResultWidget React appeared first on SearchStax Docs.

]]> SearchstaxFacetsWidget React https://www.searchstax.com/docs/searchstudio/searchstaxfacetswidget-react/ Tue, 10 Oct 2023 20:45:28 +0000 https://www.searchstax.com/docs/?post_type=searchstudio&p=16455 SearchstaxFacetsWidget React The SearchstaxFacetsWidget component displays the search facets. Usage Props Template Props Customize the UI by passing template functions. facetsTemplateDesktop Renders the desktop facets UI. Receives: facetsTemplateMobile Renders the… Continue reading SearchstaxFacetsWidget React

The post SearchstaxFacetsWidget React appeared first on SearchStax Docs.

]]> SearchstaxFacetsWidget React

The SearchstaxFacetsWidget component 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

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post SearchstaxFacetsWidget React appeared first on SearchStax Docs.

]]> Searchstax-PaginationWidget React https://www.searchstax.com/docs/searchstudio/searchstax-paginationwidget-react/ Tue, 10 Oct 2023 23:12:03 +0000 https://www.searchstax.com/docs/?post_type=searchstudio&p=16457 Searchstax PaginationWidget React The SearchstaxPaginationWidget for React displays pagination controls for search results. Usage Props paginationTemplate Customize the pagination UI. It receives: Example The paginationData object contains: Questions? Do not… Continue reading Searchstax-PaginationWidget React

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

]]> Searchstax PaginationWidget React

The SearchstaxPaginationWidget for React 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 post Searchstax-PaginationWidget React appeared first on SearchStax Docs.

]]> React Widgets https://www.searchstax.com/docs/searchstudio/react-widgets/ Tue, 10 Oct 2023 23:26:40 +0000 https://www.searchstax.com/docs/?post_type=searchstudio&p=16447 Searchstudio-ux-React Widgets To learn more about the Searchstudio-ux-react Widgets, follow the links to each page to see the templates and examples: Questions? Do not hesitate to contact the SearchStax Support… Continue reading React Widgets

The post React Widgets appeared first on SearchStax Docs.

]]> Searchstudio-ux-React Widgets

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

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post React Widgets appeared first on SearchStax Docs.

]]> Searchstax-RelatedSearchesWidget React https://www.searchstax.com/docs/searchstudio/searchstax-relatedsearcheswidget-react/ Tue, 10 Oct 2023 23:36:16 +0000 https://www.searchstax.com/docs/?post_type=searchstudio&p=16468 Searchstax RelatedSearchesWidget React The SearchstaxRelatedSearchesWidget displays related searches. Usage Props searchRelatedSearchesTemplate Renders custom related searches UI. Receives: Example Questions? Do not hesitate to contact the SearchStax Support Desk.

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

]]> Searchstax RelatedSearchesWidget React

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 post Searchstax-RelatedSearchesWidget React appeared first on SearchStax Docs.

]]> Searchstax-SearchOverviewWidget React https://www.searchstax.com/docs/searchstudio/searchstax-searchoverviewwidget-react/ Mon, 06 Nov 2023 23:23:53 +0000 https://www.searchstax.com/docs/?post_type=searchstudio&p=16628 Searchstax-SearchOverviewWidget React The SearchstaxOverviewWidget for React displays search feedback and stats. Usage Import the component: Add to template: Inputs Properties Methods Template Binding Properties The templateOverrides provides: See Example of… Continue reading Searchstax-SearchOverviewWidget React

The post Searchstax-SearchOverviewWidget React appeared first on SearchStax Docs.

]]> Searchstax-SearchOverviewWidget React

The SearchstaxOverviewWidget for React 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.

The post Searchstax-SearchOverviewWidget React appeared first on SearchStax Docs.

]]> Searchstax- ExternalPromotions-Widget React https://www.searchstax.com/docs/searchstudio/searchstax-externalpromotions-widget-react/ Tue, 10 Oct 2023 23:29:06 +0000 https://www.searchstax.com/docs/?post_type=searchstudio&p=16459 Searchstax ExternalPromotionsWidget React The **SearchstaxExternalPromotionsWidget** displays external promotions fetched from the API. Usage searchExternalPromotionsTemplate Renders custom promotions UI. Receives: Example Questions? Do not hesitate to contact the SearchStax Support Desk.

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

]]> Searchstax ExternalPromotionsWidget React

The **SearchstaxExternalPromotionsWidget** displays external promotions fetched from the API.

Usage

<SearchstaxExternalPromotionsWidget />

searchExternalPromotionsTemplate

Renders custom promotions UI.

Receives:

  • externalPromotionsData – Promotions data
  • trackClick – Handles click tracking

Example

function searchExternalPromotionsTemplate(
    externalPromotionsData: null | ISearchstaxExternalPromotionsData,
    trackClick: (externalPromotion: IExternalPromotion, event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
  ) {
    return (
      <>
        {externalPromotionsData &&
          externalPromotionsData?.searchExecuted &&
          externalPromotionsData?.hasExternalPromotions &&
          externalPromotionsData.externalPromotions.map((externalPromotion) => (
            <div className="searchstax-external-promotion searchstax-search-result" key={externalPromotion.id}>
              <div className="icon-elevated"></div>
              {externalPromotion.url && (
                <a
                  href={externalPromotion.url}
                  onClick={(event) => {
                    trackClick(externalPromotion, event);
                  }}
                  className="searchstax-result-item-link"
                ></a>
              )}
              <div className="searchstax-search-result-title-container">
                <span className="searchstax-search-result-title">{externalPromotion.name}</span>
              </div>
              {externalPromotion.description && (
                <p className="searchstax-search-result-description searchstax-search-result-common">
                  {" "}
                  {externalPromotion.description}{" "}
                </p>
              )}
              {externalPromotion.url && (
                <p className="searchstax-search-result-description searchstax-search-result-common">
                  {" "}
                  {externalPromotion.url}{" "}
                </p>
              )}
            </div>
          ))}
      </>
    );
  }
<SearchstaxExternalPromotionsWidget
                searchExternalPromotionsTemplate={searchExternalPromotionsTemplate}
              ></SearchstaxExternalPromotionsWidget>

Questions?

Do not hesitate to contact the SearchStax Support Desk.

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

]]>