Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Minor updates to grammar, spelling in documentation #1363

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Minor updates to grammar, spelling in documentation #1363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04ff639
Minor updates to copy for React Quickstart
davidshq May 1, 2024
e392528
Minor updates to copy for Search Box and Snippet
davidshq May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 5 additions & 5 deletions apps/web/pages/docs/components/results/snippet.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,28 @@ Snippet is a widget that displays highlighted attributes from a hit. It is commo

## Differences between highlighting and snippets

Highlighting and snippets are very similar. The main difference is that highlighting is returns the whole field value, highlighting the matches while snippets returns a part of the field value, highlighting the matches.
Highlighting and snippets are very similar. The main difference is that highlighting returns the whole field value, highlighting the matches while snippets return a part of the field value, highlighting the matches.

Highlighting would be useful for short value fields like title.

Snippets would be useful for long value fields like description.

## Setup

The following document indexed in Elasticsearch:
Index the following document into Elasticsearch:

```json
{
"brand": "Apple",
"product": "Macbook Pro 14",
"in_stock": true,
"shipping": 10
"shipping": 10
}
```

## Searchkit Setup

Within `highlight_attributes` in `search_settings`:
Within `snippet_attributes` in `search_settings`:

```ts
{
Expand Down Expand Up @@ -77,4 +77,4 @@ const hitView = ({ hit }) => {
## Troubleshooting

1. Make sure you have the `highlight_attributes` in the `search_settings` configuration.
2. Make sure the attributes are also specified in the `search_attributes` too, and match the same field.
2. Make sure the attributes are also specified in the `search_attributes` too, and match the same field.
22 changes: 11 additions & 11 deletions apps/web/pages/docs/components/search-box.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,28 @@ The search box widget is used to let the user perform a text-based query.

Configure the `search_attributes` to include the fields you want to search on.

he search attributes define what Elasticsearch fields should be searched when a user performs a search.
The search attributes define what Elasticsearch fields should be searched when a user performs a search.

The search attributes can be configured as follows:

```js
{
{
search_settings: {
search_attributes: [
"description",
"actors",
{ field: "title", weight: 3 },
"description",
"actors",
{ field: "title", weight: 3 },
"released.year"
]
}
}
```

The following configuration will search the `description`, `actors` and an object field `released.year` fields with the default weight of 1. The `title` field will be weighted 3 times more than the `actors` field.
The following configuration will search the `description`, `actors` fields and an object field `released.year` with the default weight of 1. The `title` field will be weighted 3 times more than the `actors` field.

### Example: Adjusting the organic query

Out the box, Searchkit provides a Elasticsearch query that is designed to work well for most search use cases. However, you may want to customise the query to improve the relevance of the search results.
Out of the box, Searchkit provides an Elasticsearch query that is designed to work well for most search use cases. However, you may want to customise the query to improve the relevance of the search results.

This example shows how to use the `getQuery` function to customise the query for a given request.

Expand All @@ -52,9 +52,9 @@ const results = await apiClient.handleRequest(req.body, {
});
```

### Example: Vector Search
### Example: Vector Search

The KNN Search is a special type of search that is designed to find similar items based on a vector field.
The KNN Search is a special type of search that is designed to find similar items based on a vector field.

```ts
const results = await client.handleRequest(req.body, {
Expand All @@ -64,7 +64,7 @@ The KNN Search is a special type of search that is designed to find similar item
k: 10,
num_candidates: 100,
// supported in latest version of Elasticsearch
query_vector_builder: {
query_vector_builder: {
text_embedding: {
model_id: 'msmarco-distilbert-base-tas-b',
model_text: query
Expand Down Expand Up @@ -96,4 +96,4 @@ export function App() {
- [React InstantSearch](https://www.algolia.com/doc/api-reference/widgets/search-box/react/)
- [JS Widgets](https://www.algolia.com/doc/api-reference/widgets/search-box/js/)
- [Vue InstantSearch](https://www.algolia.com/doc/api-reference/widgets/search-box/vue/)
- [Angular InstantSearch](https://www.algolia.com/doc/api-reference/widgets/search-box/angular/)
- [Angular InstantSearch](https://www.algolia.com/doc/api-reference/widgets/search-box/angular/)
44 changes: 22 additions & 22 deletions apps/web/pages/docs/getting-started/with-react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ const searchClient = Client(sk, {
k: 10,
num_candidates: 100,
// supported in Elasticsearch 8.7+
query_vector_builder: {
query_vector_builder: {
text_embedding: {
model_id: 'cookie_model',
model_text: query
Expand Down Expand Up @@ -313,7 +313,7 @@ const searchClient = Client(sk, {

## Refinements

Refinements (or also known as facets) allow your users to narrow down their search results. You can easily add refinements with the many refinement components provided by Instantsearch.
Refinements (also known as facets) allow your users to narrow down their search results. You can easily add refinements with the many refinement components provided by Instantsearch.

In this example we are going to add a `brand` refinement facet. We will also add a `categories` refinement facet to show how to use a hierarchical facet.

Expand All @@ -322,7 +322,7 @@ In this example we are going to add a `brand` refinement facet. We will also add
First you must add the `brand` field to the `search_settings` in Searchkit.

<Callout type="info">
The field must be a keyword field in Elasticsearch. By default, Elasticsearch will create a keyword field for each text field. To use, you must specify the field name with the `.keyword` suffix.
The field must be a keyword field in Elasticsearch. By default, Elasticsearch will create a keyword field for each text field. To use the keyword field, you must specify the field name with the `.keyword` suffix.
</Callout>

```tsx
Expand Down Expand Up @@ -360,7 +360,7 @@ const App = () => (
![overview](../../../public/docs/getting-started/screen4.png)

### Show more
Refinement list will display the top 10 brands by default. You can use the `showMore` prop to show more brands.
The `RefinementList` will display the top 10 brands by default. You can use the `showMore` prop to show more brands.

```tsx
<RefinementList attribute="brand" showMore />
Expand All @@ -369,21 +369,21 @@ Refinement list will display the top 10 brands by default. You can use the `show
![overview](../../../public/docs/getting-started/screen5.png)

### Searchable
Refinement list will also allow you to search for a specific brand.
The `RefinementList` will also allow you to search for a specific brand.

```tsx
<RefinementList attribute="brand" searchable />
```

![overview](../../../public/docs/getting-started/screen6.png)

and many more options are available for refinement + components for different types of refinements.
There are many more options available for refinements as well as other components for different types of refinements.

### Hierarchical Facet

One of the most common use cases for refinements is to filter by categories. You can use a hierarchical facet to display the categories in a tree structure.

First you must add the `categories` levels to the `search_settings` in Searchkit.
First you must add the `categories` levels to the `search_settings` in Searchkit.

```tsx
search_settings: {
Expand Down Expand Up @@ -431,7 +431,7 @@ and then you should see the categories in a tree structure.

![overview](../../../public/docs/getting-started/screen7.png)

### Other refinement Components
### Other Refinement Components

There are many other refinement components available in Instantsearch. You can find the full list of refinement components [here](/docs/components/refinements/refinement-list).

Expand All @@ -442,17 +442,17 @@ Searchkit supports nested fields for refinements. Read more about nested fields
```tsx
{
facet_attributes: [
{
attribute: 'marketplace.supplier',
field: 'supplier.keyword',
{
attribute: 'marketplace.supplier',
field: 'supplier.keyword',
type: 'string',
nestedPath: 'marketplace'
}
]
}
```

### Numeric based Refinement
### Numeric Based Refinement

Numeric based refinements are useful if you want to filter by price or other numeric values.

Expand Down Expand Up @@ -504,11 +504,11 @@ const App = () => (
);
```

Then you should see a range input to adjust from and to pricing.
Now you should see a range input to adjust from and to pricing.

## Filter Attributes

Filter attributes are attributes that are used to filter the search results.
Filter attributes are attributes that are used to filter the search results.

Filters are useful for fields that you do not want facets for, but you want to be able to filter by.

Expand Down Expand Up @@ -604,7 +604,7 @@ To illustrate their use, we will add a query rule that will boost the results fo

Add a query rule to Searchkit `search_settings`

When the customer types in "cheap tvs", the query rule will be applied and the results will be filtered to be televisions and price range between 0 to 500, and the results for the brand LG will be boosted.
When the customer types in "cheap tvs", the query rule will be applied and the results will be filtered to televisions with a price range between 0 to 500, and the results for the brand LG will be boosted.

```tsx
search_settings: {
Expand All @@ -617,7 +617,7 @@ When the customer types in "cheap tvs", the query rule will be applied and the r
{ // true when the query is "cheap tvs"
context: 'query',
value: 'cheap tvs',
match_type: 'exact'
match_type: 'exact'
}
]
],
Expand Down Expand Up @@ -647,7 +647,7 @@ When the customer types in "cheap tvs", the query rule will be applied and the r

Another example of query rules is to show different facets depending on the query or filters.

When a customer selects TV category, we will display the brand facet.
When a customer selects the TV category, we will display the brand facet.

```tsx
search_settings: {
Expand Down Expand Up @@ -700,7 +700,7 @@ When a customer selects TV category, we will display the brand facet.
}
```

on the frontend, you need to use the `DynamicWidgets` component to control which facets are displayed, based on the query rules.
On the frontend, you need to use the `DynamicWidgets` component to control which facets are displayed, based on the query rules.

```tsx
import { DynamicWidgets } from 'react-instantsearch'
Expand Down Expand Up @@ -731,7 +731,7 @@ import { DynamicWidgets } from 'react-instantsearch'

Another example of query rules is to display a banner based on the query.

This could be used to display a banner with more TV info when the customer selects the TV category.
This could be used to display a banner with more TV info when the customer selects the TV category.

```tsx
search_settings: {
Expand Down Expand Up @@ -767,7 +767,7 @@ This could be used to display a banner with more TV info when the customer selec
}
```

on the frontend, you use the `useQueryRules` hook to display the banner.
On the frontend, you use the `useQueryRules` hook to display the banner.

```tsx
import { useQueryRules } from 'react-instantsearch'
Expand Down Expand Up @@ -802,14 +802,14 @@ const App = () => (

![overview](../../../public/docs/getting-started/screen11.png)

and the banner will be displayed when the customer selects the TV category.
Now the banner will be displayed when the customer selects the TV category.

### Query Rules Next Steps

Query rules are super amazing! Read more about them in [Query Rules](/docs/query-rules).

#### More Conditions not covered in this guide
* [Context](/docs/query-rules/conditions/context) - Activate certain actions with context based on the user (segments, location, a/b experiment etc)
* [Context](/docs/query-rules/conditions/context) - Activate certain actions with context based on the user (segments, location, a/b experiments, etc)

#### More Actions not covered in this guide
* [Pin Results](/docs/query-rules/actions/pin-result) - Pin certain results to the top, regardless of the ranking. This is useful if you want to show a specific product in the search results.
Expand Down