Basic components

Basic Components collects additional components to create search experiences and can act like a template tos build a search experience.

The Basic Components comes with:

Parameters

  • Search Box Parameters: This corresponds to the <SearchBox> react hook provided by Algolia. Through this parameter you can bring a search box into a composition.
  • Refinement List Parameters: This corresponds to the <RefinementList> react hook provided by Algolia. Through this parameter you can filter the dataset using multi-select facets.
  • Hits Parameters: This corresponds to the <Hits> react hook provided by Algolia. Through this parameter search hits are displayed in a composition.
  • Pagination Parameters: This corresponds to the <Pagination> react hook provided by Algolia. Through this parameter search results display in a paginated experience.

Slots

  • hitComponent The hitComponent slot allows the Hit component to be added into a composition. Additional components can be configured to appear in the slot.

There are no default configurations for Variants. Learn more about configuring components

When you add the Basic Components component to a composition, you will need to configure these parameters to bring in data from the Algolia search index.

  1. Click the "Edit Value" button in the Parameters section.

    algoglia-search-box-parameter

  2. Enter the placeholder text to be displayed in the search box.

  3. Toggle the "Search As You Type" box to the desired state. If checked, a search is initiated on every change to the query. If not checked, new searches will only be triggered by pressing the Enter key with the search box selected.

  4. Click the red "Save" button to save your changes to the composition.

  1. Click the "Edit Value" button in the Parameters section.

    algoglia-refinement-list-parameter

  2. Select the appropriate index from the list provided.

  3. Select the attribute of the index on which you want to refine results from the list provided.

  4. Choose "and" or "or" in the Operator field for how you wish facets to be combined.

    • or: Returns results matching any of the selected values
    • and: Returns results matching all selected values

  5. Enter the number of facets that should be retrieved in the Limit field. The default value is 10. When you set showMore and showMoreLimit, this is the number of facet values to display before clicking the Show more button.

  6. Enter the maximum number of items to display (if the widget is showing more items) in the Show More Limit field.

  7. Enter the text that appears in the search field in the Searchable Placeholder field. For example, "Search our products."

  8. Toggle each of the following on and off as desired for your experience:

    • Show More: Whether to display a button that expands the number of items
    • Searchable: Whether to add a search input to let users search for more facet values
    • Escape Facet Values: Escapes the content of the facet values returned by Algolia.

  9. Click the red "Save" button to save your changes to the composition.

When you add the Hits component to a composition, the parameter doesn't need any additional configuration. Additional settings can be specified within your application code.

  1. Click the "Edit Value" button in the Parameters section.

    algoglia-pagination-parameter

  2. Enter the maximum number of pages of results users can browse.

  3. Enter the number of page that should be displayed on each side of the current page. The default value is 3.

  4. Toggle each of the following on and off as desired for your experience:

    • Show First: Whether to display the first page link
    • Show Previous: Whether to display the previous page link
    • Show Next: Whether to display the next page link
    • Show Last: Whether to display the last page link

  5. Click the red "Save" button to save your changes to the composition.

You can add additional components within the Widgets slot provided.

Last modified
Next
Hit and hits