Developers
Start building
Themes/Theme SDK/Modules/search/Parts

Parts

The parts of @poltura/theme-sdk/search.

On this page
import { … } from '@poltura/theme-sdk/search';

SearchInput

The search field with its icon and clear button; inside SearchCombobox it is the combobox the arrow keys drive.

SearchInput(props: SearchInputProps): ReactElement

Props: SearchInputProps

Example

import { SearchInput, useSearch } from '@poltura/theme-sdk/search';

export function SearchField() {
  const search = useSearch();
  return <SearchInput value={search.query} onChange={search.setQuery} onSubmit={search.submit} />;
}

SearchResults

The products matching the query, with the searching and no-results notes.

SearchResults(props: SearchResultsProps): ReactElement | null

Props: SearchResultsProps

Example

import { SearchResults, useSearch } from '@poltura/theme-sdk/search';

export function LiveResults() {
  const search = useSearch({ limit: 5 });
  return search.hasQuery ? <SearchResults state={search} /> : null;
}

SearchSuggestions

What search offers before the shopper types: popular searches as chips and the featured products.

SearchSuggestions(props: SearchSuggestionsProps): ReactElement | null

Props: SearchSuggestionsProps

Example

import { SearchSuggestions, useSearch } from '@poltura/theme-sdk/search';

export function SearchStart() {
  const search = useSearch({ popularSearches: ['Coffee', 'Tea'] });
  return (
    <SearchSuggestions
      items={search.suggestions}
      featured={search.featured}
      onPick={(suggestion) => search.setQuery(suggestion.label)}
    />
  );
}

SearchDialog

A search icon button that opens its content in a dialog near the top of the page.

SearchDialog(props: SearchDialogProps): ReactElement

Props: SearchDialogProps

Example

import { SearchDialog, SearchInput, SearchResults, useSearch } from '@poltura/theme-sdk/search';

export function SearchOverlay() {
  const search = useSearch();
  return (
    <SearchDialog label="Search">
      <SearchInput value={search.query} onChange={search.setQuery} onSubmit={search.submit} />
      <SearchResults state={search} />
    </SearchDialog>
  );
}

SearchCombobox

The search field as a combobox: suggestions before typing, live results after, the arrow keys walking both and Enter opening the highlighted one.

SearchCombobox(props: SearchComboboxProps): ReactElement

Props: SearchComboboxProps

Example

import { SearchCombobox } from '@poltura/theme-sdk/search';

export function SidebarSearch() {
  return <SearchCombobox floating placeholder='Search the store' popularSearches={['Coffee']} />;
}

See also: useSearch, SearchInput, SearchResults, SearchSuggestions

Last updated