Localization search with Algolia

If you're using our Algolia integration but you have multiple languages for your project, you'll need to do a little extra setup in both Algolia and Frontastic. This article will guide you through the steps needed to do this.

1. Create a new index within your Algolia project for each new language you want to use for all your product data

For this example, we'll use English and German. We already have an index in English called Frontastic_search and we'll create a new index called Frontastic_search_German for our German version.

2. Create a unique property that will be taken as the category for all languages, this can't be the categories property

For example, we'll create a property called Frontastic_categories.

🚧

Info

You can use any property name as long as you use the same property name and property values among all indexes.

3. Add this new property to all your products in both language indexes, they must have the same values attached for both language indexes

For example, we have a vintage t-shirt in our Frontastic_search index with the property categories of vintage, tops, and unisex. We create a frontastic_categories of vintage, tops, and unisex. We'll also add the Frontastic_categories of vintage, tops, and unisex to the vintage t-shirt in our Frontastic_search_German index.

{
    "name": "vintage t-shirt",
    "categories": [
        "vintage",
        "tops",
        "unisex"
    ],
    "frontastic_categories": [
        "vintage",
        "tops",
        "unisex"
    ]
}

{
    "name": "jahrgang t-shirt",
    "categories": [
        "jahrgang",
        "oberteil",
        "unisex"
    ],
    "frontastic_categories": [
        "vintage",
        "tops",
        "unisex"
    ]
}

4. Update your project.yml configuration so you have the languages you use within your Algolia set up:

configuration:
    productSearch:
        engine: algolia
    algolia:
        appId: OurAppID
        appKey: OurAppKey
        indexName: Frontastic_search 
        languages: 
            [email protected]:
                indexName: Frontastic_search
            [email protected]:
                indexName: Frontastic_search_German

The languages need to be written in the same way as they're written in the languages section of your project. The default language index will be the same as what you've set as the default language.

5. Open the Frontastic studio and go to Facets

Here, we can enable or disable all the facets that we want to make available for our customers and we can also set the Label in all the languages. We need to make sure any of the Frontastic_<facet_name> are enabled here.

6. Open the Frontastic studio and go to the site builder

If you want to create any data source filter on the page folder, here you should use the Frontastic_<facet_name> facet as a filter.

You'll now have the search results of your products available in the different languages.