Search engine

When configured with Magento2, Front-Commerce can leverage Elasticsearch 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
      }
    }
    category {
      name
    }
    pages {
      identifier
      title
    }
  }
}

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

Edit on GitHub