Skip to main content
Version: 2.x

Search engine

When configured with Magento1 , Front-Commerce provides search capabilities for your website using different technologies. This guide shows you the different options available to you.

You can configure search and product lists with filters using the following platforms:

Front-Commerce supports browsing products using the native Magento API for category listing pages. Please contact us if your store uses a custom Magento search implementation to see how to make it work in your Front-Commerce project.

Elasticsearch​

Requirements​

On Magento's side, you need to install the front-commerce-oss/magento1-elasticsuite-indexer module. You can install it with composer:

composer require front-commerce-oss/magento1-elasticsuite-indexer

After the installation, you need to configure it, at least:

  1. in System > Catalog > Catalog in the Catalog Search section, make sure the search engine is set on Smile Searchandising Suite
  2. in the same section, set the server host and port
  3. take note of the alias (magento by default)

You can then run the indexer so that the products, categories and cms pages are indexed in Elasticsearch.

Front-Commerce configuration​

First, you need to make sure the Elasticsearch search client is installed with a version that matches your ElasticSearch server:

npm i @elastic/elasticsearch@6

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

.front-commerce.js
-  modules: [],
+  modules: ["./node_modules/front-commerce/modules/datasource-elasticsearch"],
   serverModules: [
     { name: "FrontCommerce", path: "server/modules/front-commerce" },
+    {
+      name: "Magento1Elasticsearch",
+      path: "datasource-elasticsearch/server/modules/magento1-elasticsearch",
+    },
     { name: "Magento1", path: "server/modules/magento1" },
   ]
Known issue

Tthe 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 and FRONT_COMMERCE_ES_ALIAS variables.

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

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

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

Alternative facet filtering​

Front-Commerce ElasticSearch module provides an alternative way of filtering with facets. By default, each active facet will "refine" (i.e. substract) results from the search and from the selectable facets. With this alternative way, active facets for one attribute will become additive instead.

In order to activate this feature, set search.refinementFacetsOnly to false in your website.js:

src/config/website.js
   themeColor: "#666699",
   search: {
     dynamicFacetSize: 10,
     ignoredAttributeKeys: [],
     attributeFacetMinimumDocumentCount: 1,
     authorizedCategoriesFacet: [],
     categoryFacetMinimumDocumentCount: 1,
-    refinementFacetsOnly: true,
+    refinementFacetsOnly: false,
   },
   phoneNumber: "01 02 03 04 05",
   email: "contact@example.com",

Algolia​

Requirements​

On Magento's side, you need to install the algolia/algoliasearch-magento module. You can install it with modman:

modman clone https://github.com/algolia/algoliasearch-magento.git

After the installation, you need to configure it, at least:

  1. in System > Algolia Search > Configuration in the Credentials & Setup section, set the Enable Indexing option
  2. in the same section, fill the credentials you can find on the Algolia Dashboard
  3. The attribute category_ids must be listed in both the facets configuration and in the indexed product attributes (and there it must be set as Searchable) as Front-Commerce relies on it to list the products in categories.

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

note

category_ids is the only required facets. Depending on your project, you can configure any other attribute to be exposed as a facet by following the same steps.

Front-Commerce configuration​

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

npm i algoliasearch

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: "FrontCommerce", path: "server/modules/front-commerce" },
+    {
+      name: "Magento1Algolia",
+      path: "datasource-algolia/server/modules/magento1-algolia",
+    },
     { name: "Magento1", path: "server/modules/magento1" },
   ]
Known issue

The Algolia server module needs to be enabled before the Magento's module.

As of Front-Commerce 2.6, Algolia's module is automatically configured. If you are using Front-Commerce 2.5, you need to define all the Algolia related environment variables in your .env file.

Front-Commerce 2.6 takes 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).

caution

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
    }
  }
}
info

Support for category or page search with Algolia has been added in Front-Commerce 2.13.

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