Search engine

When configured with Magento2, Front-Commerce can leverage Elasticsearch or Algolia to bring a search engine to your website.

Elasticsearch

Requirements

On Magento2 side, Front-Commerce requires Elasticsuite and its CMS Page search plugin to be installed.

The Elasticsuite installation and configuration procedure can be found in a dedicated page on the project wiki while for the CMS Page search plugin, the setup is detailed in its readme document.

Front-Commerce configuration

First, you need to make sure the Elasticsearch search client is installed with a version that matches your Elasticsearch server version (6 or 7):

npm i @elastic/elasticsearch@7

On Front-Commerce side, you need to enable the Elasticsearch datasource by making changes in your .front-commerce.js file similar to:

// .front-commerce.js
-  modules: [],
+  modules: ["./node_modules/front-commerce/modules/datasource-elasticsearch"],
   serverModules: [
     { name: "FrontCommerceCore", path: "server/modules/front-commerce-core" },
+    {
+      name: "Magento2Elasticsearch",
+      path: "datasource-elasticsearch/server/modules/magento2-elasticsearch",
+    },
     { name: "Magento2", path: "server/modules/magento2" },
   ]
⚠️ Known issue: the Elasticsearch server module needs to be enabled before the Magento’s module.

Then, in your .env file, you need to define the FRONT_COMMERCE_ES_HOST, FRONT_COMMERCE_ES_ALIAS and FRONT_COMMERCE_ES_ELASTICSUITE_VERSION variables.

The prefix value can be found in the admin interface under Stores > Elasticsuite > Base Settings > Indices Settings in the field Indices Alias Name (the default value is magento2).

After restarting Front-Commerce, you should be able run a GraphQL query to search for products, categories and/or pages, for instance:

query Search {
  search(query: "whatever you want to search for") {
    query
    products {
      total
      products {
        sku
        name
      }
    }
    categories {
      name
    }
    pages {
      identifier
      title
    }
  }
}

If you are using the default theme or the theme Chocolatine, the search bar should now be visible.

Algolia

This feature has been added in Front-Commerce 2.13.0

Requirements

On Magento’s side, you need to install and configure the Algolia module for Magento2.

In addition, the attribute category_ids must be configured as both an indexed attribute and as a facet:

  1. under Stores > Configuration > Algolia Search > Products, add category_ids as Searchable in the Attributes parameter
  2. under Stores > Configuration > Algolia Search > Instant Search Result Page, add category_ids in the Facets parameter

You can then run the indexer so that the products are indexed in Algolia’s index.

Front-Commerce configuration

First, you need to make sure the Algolia’s search client is installed:

npm i algoliasearch@4.8

On Front-Commerce side, you need to enable the Algolia datasource by making the changes in your .front-commerce.js file similar to:

// .front-commerce.js
-  modules: [],
+  modules: ["./node_modules/front-commerce/modules/datasource-algolia"],
   serverModules: [
     { name: "FrontCommerceCore", path: "server/modules/front-commerce-core" },
+    {
+      name: "Magento2Algolia",
+      path: "datasource-algolia/server/modules/magento2-algolia",
+    },
     { name: "Magento2", path: "server/modules/magento2" },
   ]
⚠️ Known issue: the Algolia server module needs to be enabled before the Magento’s module.

Front-Commerce retrieves the following parameters from Magento:

On the configured facets, only the attribute name is taken into account (Facet type, Label, Searchable and Create Query rule are ignored for now).

⚠️ For performance reason, the configuration retrieved from Magento is cached. As a result, after changing a parameter in the backoffice, the new parameter will be taken into account after at most one minute by Front-Commerce.

After restarting Front-Commerce, you should be able to run a GraphQL query to search for products, categories or pages, for instance:

query Search {
  search(query: "whatever you want to search for") {
    query
    products(params: { from: 0, size: 5 }) {
      total
      products {
        sku
        name
      }
    }
    categories(size: 5) {
      name
    }
    pages(size: 5) {
      title
    }
  }
}

If you are using the default theme or the Chocolatine theme, the search bar should now be visible.

Since version 2.15

If no search module is configured Front-Commerce will default to using the native Magento search API to do the search.

native Magento search API uses the price without tax value to achieve its price filtering capabilities. This is not what customers typically expect. To overcome this you need to set FRONT_COMMERCE_MAGENTO_SEARCH_TAX_RATE to the expected tax rate on your site. Please note this may not work for all scenarios as you may have different tax rates depending on country. So we recommend you use the tax rate that most applies to your customers.

Edit on GitHub  or  Send us a feedback