Configuring Search

Owned by Michal Wojtas (Unlicensed)
Last updated: Feb 21, 2023 by Antonio Cosentino
3 min read

 

This documentation is outdated. We now use Algolia not only for search but also for product filtering and sorting, therefore we need some extra steps in the setup.

 

For updated instructions use this document:

 

 

Styla provides a Search module which lets you display search results from both product details as well as other content pages created with Styla Editor. The module uses an external API provided as the source of search results data, so you need a contract with such a partner (at the moment Algolia is supported) that is able to receive a source of content data provided by Styla and then provide search results API.

How this works

  1. In Algolia, you create a new config/index that Styla will use. Follow the instructions here.

  2. In addition, set up Attributes for Faceting:

    • Select your index (the one that will be used by Styla) and go to the Configuration tab

    • Select Filtering and Faceting → Facets

    • In "Attributes for faceting" add entity_type

    • Leave the dropdown to "not searchable"

    • Review and Save

  3. In addition, set up Deduplication and Grouping:

    • Select your index (the one that will be used by Styla) and go to the Configuration tab

    • Select Search Behavior → Deduplication and Grouping

    • Set "Distinct" to false (should be already by default). NOTE: this doesn't affect our functionality, but it's recommended when using the search from the Algolia UI

    • In "Attribute" for distinct select entity_type

    • Review and Save

  4. In Styla Admin, configure the Algolia API credentials so that your Search module can fetch search results from the new index and render search results. You do this in the FRONT CONFIGURATION. For Algolia, the config looks like this:

    Algolia in FRONT CONFIGURATION
    "integrations": { "searchEngine": "algolia", "services": { "algolia": { "searchOnlyAPIKey": "", "adminAPIKey": "", "applicationId": "", "index": "" } } }


    adminAPIKey - API Key used by our backend for writing access. This will not be exposed in any of our public accessible services. Can be found under API keys.
    applicationId - Identifier of the application. Can be also found under API Keys as well.
    index - the name of the index you created
    searchOnlyAPIKey - API Key used by the frontend for read-only access. Can be found under API Keys as well.

  5. Once the above are configured, Styla automatically pushes any content updates relevant for search results to Algolia via its API. This happens for products, categories and content pages created in the Editor. Algolia indexes this content and returns search results to Styla via the API. Updates triggered by BigCommerce or Styla Editor should be visible on your search results with a delay counted in seconds.

  6. In your Styla Editor, create a /search page and drop the Search module on this page:

  7. Include a search input sending your users to the above search results page in your website header custom module. Then drag the module on your Page Base in Styla Editor.

  8. The search input in your website header looks like this:

  9. Search results delivered by the module look like this: