Versions Compared

Old Version 5

changes.mady.by.user Michal Wojtas

Saved on

compared with

New Version Current

changes.mady.by.user Antonio Cosentino

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info

This page describes how search functionality is delivered on your Styla Frontend website. It also tells you how to configure it.

On this page:

Table of Contents
minLevel1
maxLevel7
Warning

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: Algolia Setup

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 (for instance: Algolia, Klevu, Findologicat the moment Algolia is supported) that is able to crawl and index an .xml file receive a source of content data provided by Styla and then provide search results API.

How this works

...

Styla automatically provides an .xml file with all content of your Styla Frontend that an external search solution can crawl and index all the links in it. The file is provided at location needed

...

You create a new config/index in your search solution and set it to use the above .xml file as data source

...

  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

...

  1. render search results. You do this in the

...

  1. FRONT CONFIGURATION

...

  1. . For Algolia, the config looks like this:

...

  1. Image Added
    Code Block
    "integrations": {
    "searchEngine": "algolia",
    "services": {
        "algolia": {
            "searchOnlyAPIKey": "",
            "adminAPIKey": "",
            "applicationId": "",
            "index": ""
        }
    }
}

...


  1. 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 
...
  1. you created
    searchOnlyAPIKey - API Key used by the frontend for read-only access. Can be found under API Keys as well.
  2. 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. 
  3. In your Styla Editor, create a /search page 
...
  1.  and drop the Search module on this page:
    Image Modified
...
  1. Include a search input sending your users to the above search results page in your website header custom module. 
...
  1. Then drag the module on your Page Base in Styla Editor. 
  2. The search input in your website header looks like this: 
    Image Modified
  3. Search results delivered by the module look like this: 
    Image Modified