Creating your own omnisearch design

Overlay structure

When omnisearch is initiated, it creates an element with the class clerk-omnisearch-overlay and is injected into the bottom of the body. This is where we will inject the design, as we have the input element as part of the design we need to have a structual demands to ensure we don’t re-render the input element on each load. The structure should look like the following underneath the overlay:

<div>
    <input type="text" id="clerk-omnisearch-input"/>

    <div id="clerk-omnisearch-content">
        Content!
    </div>

</div>

Input field

To find the input field it needs to have the following identifier clerk-omnisearch-input. Ones the trigger element has been fired, we are moving the cursor focus to this element, and add whatever query we have to it, so we can keep the user experience somewhat seamless.

Content Wrapper

The content wrapper is where most of the things are happening, the wrapper around it needs to have the identifier clerk-omnisearch-content. In here should be the facets, the sliders and everything else that is not the input field.

Classes and Their Functionalities

Overview

Functionality can be added to the design by adding specific classes to elements.

Details

Close Button

When attaching the class clerk-omnisearch-close to an element inside the design, that element will hide the overlay.

Sorting

To get a sorting element in the design, add the class clerk-omnisearch-sort to the selecting element, e.g. a dropdown. To work, the element needs to be the following value:[desc|asc], so the value we want to sort, with a colon and then either desc or asc. Optionally you can add a data-sort-type attribute if you want it to sort categories or pages.

Search Facet

The clerk-facet-search class, when present in a webpage, checks for the existence of any facet search elements. Facetsearches provide a way for users to search in the facets. For it to work, the element need to have a string value.

Full Clear

Elements with the clerk-omnisearch-full-reset class will, when clicked clear all selected facets and reset the query.

Facets Clear

Elements with the clerk-omnisearch-facet-full-reset class will, when activated, deselect all of the active facets. This would be typically seen on a ‘Clear all’ style button within a group of facets, allowing users to reset their selected filters in one easy action.

Group Clear

To provide the feature of deselecting an entire group of facets, an element can be given the clerk-omnisearch-facet-group-reset class. Once the element is activated (e.g., clicked), all elements within its group become deselected, resetting that facet group. For it to work, the element must have the group we want to clear as an attribute with the name data-facet-group.

Facet Clear

This class is designed for scenarios where it’s necessary to deselect a single facet. An element with the clerk-omnisearch-facet-reset class can be associated with a specific facet in a group by giving it both an data-facet-group and a data-facet-value. Upon activation, it will only deselect its associated facet based on the given group/value attribute pair, leaving other selected facets unchanged.

Facet Click

All facets should have a clerk-facet class with the data-facet-group and a data-facet-value attributes, so we know what the customer is pressing.