Search Functionality

This guide will help you effectively use the search capabilities to find the products you're looking for based on your preferences and criteria.

Table of Contents

1. Introduction
2. Using the Search Bar
3. Navigating the Category Dropdown
4. Applying Filters
5. Search Result Behavior

1. Introduction

The store's search functionality is designed to provide you with a seamless and efficient way to explore the products available in the store. It features a search bar that accepts multiple terms and a sidebar that includes a category dropdown and filtering facets. There are two options to chose from as search provider, Algolia search or Commercetools. To choose between the two options the correct variables need to be defined in the .env file. For Algolia 'SEARCH_PROVIDER_TO_USE=algolia'. For commercetools 'SEARCH_PROVIDER_TO_USE=commercetools'. The difference between the two search providers is that they use a different approach to render the filtering facets. For further reference see the more detailed documentation for developers on this link (opens in a new tab).

2. Using the Search Bar

The search bar allows you to enter multiple search terms to find products that match your criteria. Simply type in the terms you are interested in and press Enter or click the search icon.

3. Navigating the Category Dropdown

3.1 Category Selection

In the sidebar, you'll find a category dropdown that organizes products into various categories and subcategories. You can click on each category to view the products within that category.

3.2 Subcategories and Sub-subcategories

You can further explore by clicking on a subcategory to view its products. If applicable, you can even click on sub-subcategories to narrow down your search further.

4. Applying Filters

4.1 Filtering Facets

Under the category dropdown, you'll find filtering facets for refining your search. The facets available are Color, Size, and Designer.

4.2 Multiple Choice Checkboxes

Within each facet, you can select multiple checkboxes to specify your preferences. For example, you can choose multiple colors, sizes, or designers.

4.3 Applying Filters

When selecting checkboxes within a single facet, the results are additive, showing products that match any of the selected checkboxes. However, when you choose multiple facets, the results are filtered, showing products that match all the selected facets.

4.4 Applying Filters

To apply the selected filters and update the search results, click the 'Apply Filter' button.

5. Search Result Behavior

The search results update in real-time as you interact with the search bar, category dropdown, and filtering facets. However, the search result is not applied immediately when you interact with the filtering facets. You need to click the 'Apply Filter' button to see the updated results.