# Customizing the UI

Up until this point the options available regarding UI were fairly limited. By using the Algolia provided components out of the box we gain speed but we lose the ability to fully customize how we want to display things. Luckily, Algolia provides a set of function to allow for fully customizable UI.

#### **customize\_Widget\_() function**

As a rule of thumb, Algolia provides a "connect\_\_\_\_\_\_" function for every UI component so that it can be rendered differently. Each widget will have its own set of properties that will be injected in the new component, so checking the [documentation](https://www.algolia.com/doc/guides/building-search-ui/widgets/showcase/react/) is crucial. 

Lets look at `<SearchBox />` as an example, the function we will need is `connectSearchBox()`

```jsx
// 1. Create a React component
const SearchBox = () => {
  // Your custom processing and dom
};

// 2. Call the connect function
const ConnectedSearchBox = connectSearchBox(SearchBox);
```

Now, what are the [properties](https://www.algolia.com/doc/api-reference/widgets/search-box/react/#create-a-react-component) the `connectSearchBox` will pass?

```typescript
{
  // The current value of the search
  currentRefinement: string,
  // The function to trigger a new search
  refine(searchQuery: string): void,
  //InstantSearch has detected that searches are stalled
  isSearchStalled: boolean,
}
```

Also, all the original [optional parameters](https://www.algolia.com/doc/api-reference/widgets/search-box/react/) still work as before, so now you can define your component as:

```jsx
const SearchBox = ({ currentRefinement, refine }) => (
  <input
    type="search"
    value={currentRefinement}
    onChange={event => refine(event.currentTarget.value)}
    className="someSpecificClass"
  />
);

const ConnectedSearchBox = connectSearchBox(SearchBox);

<ConnectedSearchBox autoFocus/>
```

Similarly, the other components we used before each have a `connect` function to allow for this handling:

* [\<Hits /> -> connectHits](https://www.algolia.com/doc/api-reference/widgets/hits/react/#connector)
* [\<InfiniteHits> -> connectInfiniteHits](https://www.algolia.com/doc/api-reference/widgets/infinite-hits/react/#connector)
* [\<RefinementsList /> -> connectRefinementsList](https://www.algolia.com/doc/api-reference/widgets/refinement-list/react/#connector)

### Custom Labels

Jane allows for specific labels to be update to conform to local regulations, compliance reasons, etc.

To edit those labels you go to <br>

<figure><img src="/files/lfDNtOkxQljh17n89fpB" alt=""><figcaption><p>Business app V1</p></figcaption></figure>

<figure><img src="/files/Pdzf637dLeeoIcpkMqvK" alt=""><figcaption><p>Business app V2</p></figcaption></figure>

There you can find the sections:<br>

<figure><img src="/files/z9KhXZ6cs4EWaKkWW3sl" alt="" width="375"><figcaption><p>Business app V1</p></figcaption></figure>

\
Those fields can be found in the store operations API:

{% openapi src="/files/Fr5vK2GLfpmKhozqZMYO" path="/roots/store\_operations\_api/v1/stores/{id}" method="get" %}
[store\_operations\_api.json](https://338810739-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FS4Bq28Gj1vy78MuGEwRE%2Fuploads%2F4Vp1C2vbhnOy9YAaKGQQ%2Fstore_operations_api.json?alt=media\&token=91ff188a-1f23-4840-9319-aca55c8684a2)
{% endopenapi %}

The fields on the response object for those labels are:

```json
"custom_lineage_labels": {}
```

If there are no keys, set custom lineage labels won't have any attributes

```json
"reservation_mode_labels": {  
  "pickup": null,
  "delivery": null,
  "curbside": null
},
```

```json
"store_compliance_language_settings": {
  "specials": "",
  "specials_badge": "", 
  "bundle": "",
  ...
}
```

#### Custom categories and subcategories

We also allow for creating custom categories and subcategories labels to be displayed across the application. It can be found on the same interface as shown above:<br>

<figure><img src="/files/k4dwHYhy6gBm5UmO28vj" alt=""><figcaption><p>Business app v2</p></figcaption></figure>

The mappings configured in this section can be found also on the store endpoint, in the attribute:

```json
"custom_product_type_labels": {
   "flower": "custom label",
   "subcategory":" "subcategory custom label"
   ...
},
```

In this attribute, both category and subcategory will show all at the base level.

#### Usage

Those custom labels are not items that are changed often or changed automatically, since those have to be manually input by someone with access to the store configuration. This allows us to make a single top-level request for store information, possibly cache it, and have it available without the need for multiple fetches.

The goal is that for every section/component/view where you know labels are displayed (Menu rows, product display pages, etc) the "global" store information is accessible and a mapping for the labels is built using the custom fields from the store.

Here is a simplified example of our CustomRowDisplay:

<pre class="language-javascript"><code class="lang-javascript">const titleToRender = formatLabel(
    title, // the default title
    store.custom_product_type_labels, // the collection of custom labels
);

// then on the helper function
const formatLabel = (
  label,
  customLabels
) => {
<strong>  // (...)
</strong>   let formattedLabel = label; 
<strong>  
</strong><strong>   // if there is a custom label for the default label, return the custom label
</strong>   const customLabel =
      customLabels &#x26;&#x26;
      (hasCustomLabels[label] || hasCustomLabels[formattedLabel]);
  
    if (customLabel) {
      return customLabel;
    }
  //(...)
}
</code></pre>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.iheartjane.com/jane-docs/implementing-roots/building-your-menu/using-react-and-instant-search/customizing-the-ui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.