Skip to main content

Algolia

There is a component that is a search on an algolia index. The main goal is to have the fastest search engine in a custom client database. The component is developped for a client, there is only one index available for now. It has been developped with the idea of being the most generic possible so the configuration may look a bit special.

The main required config is the the index_name that points to the index in Algolia. Then for the index, we can cusotmize display options or search options. As the display and the look and fill is specific by index, the options to configure it are in the same attribute name that the index.

So, in the following example, for the index_name "vivium_activities_staging", the component will look in the schema for an object behind vivium_activities_staging.

Vivium

{
"activity": {
"component": "algolia",
"label": "t:activity",
"placeholder": "t:search_activity",
"options": {
"search_label": "t:search_label",
"change_label": "t:change_label",
"index_name": "vivium_activities_staging",
"vivium_activities_staging": {
"results_per_page": 4,
"labels": {
"sector": "t:sector",
"division": "t:division",
"nace": "t:nace"
},
"refinements": [
{
"attribute": "nace_division",
"label": "t:division",
"limit": 2,
"position": 2
}
]
}
}
}
}

Extra items

Under the result of a vivium index search, we can show extra data by defining the extraItems

{
"activity": {
"component": "algolia",
"label": "t:activity",
"placeholder": "t:search_activity",
"options": {
"search_label": "t:search_label",
"change_label": "t:change_label",
"index_name": "vivium_activities",
"vivium_activities": {
"results_per_page": 4,
"labels": {
"sector": "t:sector",
"division": "t:division",
"nace": "t:nace"
},
"extraItems": [
{
"attribute": "nace_division_{{locale}}",
"label": "Division"
}
],
"refinements": [
{
"attribute": "nace_division",
"label": "t:division",
"limit": 2,
"position": 2
}
]
}
}
}
}

ING Machinery

ING Machinery IEE

{
"algolia_ing_iee": {
"component": "algolia",
"label": "Machinery IEE",
"placeholder": "Chercher une activité",
"options": {
"components": {
"result": "ing_machinery",
"value": "ing_machinery"
},
"search_label": "search",
"change_label": "adapt",
"index_name": "ing_machinery_iee",
"ing_machinery_iee": {
"results_per_page": 10,
"labels": {
"usage": "Usage"
},
"refinements": [
{
"attribute": "ActiviteUsage",
"label": "Usage",
"limit": 5,
"position": 1
}
]
}
}
}
}

ING Machinery Machifx

{
"algolia_ing_machfix": {
"component": "algolia",
"label": "Machinery MACHFIX",
"placeholder": "Chercher une activité",
"options": {
"components": {
"result": "ing_machinery",
"value": "ing_machinery"
},
"search_label": "search",
"change_label": "adapt",
"index_name": "ing_machinery_machfix",
"ing_machinery_machfix": {
"results_per_page": 10,
"labels": {
"usage": "Usage"
},
"refinements": [
{
"attribute": "ActiviteUsage",
"label": "Usage",
"limit": 5,
"position": 1
}
]
}
}
}
}

ING Machinery Machmob

{
"algolia_ing_machmob": {
"component": "algolia",
"label": "Machinery MACHMOB",
"placeholder": "Chercher une activité",
"options": {
"components": {
"result": "ing_machinery",
"value": "ing_machinery"
},
"search_label": "search",
"change_label": "adapt",
"index_name": "ing_machinery_machmob",
"ing_machinery_machmob": {
"results_per_page": 10,
"labels": {
"usage": "Usage"
},
"refinements": [
{
"attribute": "ActiviteUsage",
"label": "Usage",
"limit": 5,
"position": 1
}
]
}
}
}
}

Storybook Examples

Algolia#

Aloglia Validations#

Algoli Keywords#

Algolia Deletable#

Algolia Disabled#

Aloglia Locale#

Algolia Extra Items#

Aloglia Ing#