Page Comparison

...

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 crawl and index an .xml file receive a source of content data provided by Styla and then provide search results API.

How this works

1. 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.

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

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

4. 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

5. 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

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

   Image RemovedImage Added

   Code Block
   "integrations": { "searchEngine": "algolia", "services": { "algolia": { "searchOnlyAPIKey": "", "adminAPIKey": "", "applicationId": "", "index": "" } } }

   The index field is

   
   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 /config you created in your search provider.You you created
   searchOnlyAPIKey - API Key used by the frontend for read-only access. Can be found under API Keys as well.

7. 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.

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

   

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

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

    

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