Attraqt

Since version 3.13

Front-Commerce provides an integration with Attraqt, a powerful search and merchandising platform. This extension allows you to use Attraqt's search capabilities in your Front-Commerce project.

Installation

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

http://localhost:4000/graphql

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

tip

In case of emergency, Front-Commerce provides a configuration to quickly deactivate Attraqt's search feature. Use the FRONT_COMMERCE_ATTRAQT_DISABLED=true and restart your application to temporarily deactivate the module.

Configuration

Facets

Due to facet IDs not being editable in Attraqt, facets created in your Attraqt console must be based on your Magento attributes exact names.

By example, if you have an attribute fashion_colour in your product and you want to add a facet for it, the facet in attraqt must be based on an attribute named fashion_colour as well, which will create a facet with ID facet-fashion_colour.

Add contextual information to your queries

Front-Commerce allows you to leverage Attraqt's Context feature in your application. This is a great way to add contextual information to your queries, so that you can get results adapted to your users needs.

Contexts can be provided at different levels, from the most generic to the most specific. Context values will be used as Attraqt context variables. Here's how to do it in your application.

Global context

The simplest way to add context variables to all your queries is to use a global context. Front-Commerce's Attraqt module has a configuration for it: config.attraqt.globalContext. It is defined in the Attraqt configuration provider, so you can use any extension mechanism at your disposal to customize this value.

Example: an app-wide context for every users and queries

my-extension/configProvider.ts

export default {
  name: "myAttraqtConfig",
  values: {
    attraqt: {
      globalContext: {
        source: "storefront",
        version: "1.0.0",
      },
    },
  },
};

Example: a global context dynamically determined per request

my-extension/configProvider.ts

import mem from "mem";

const getContextFromShopId = mem((shopId) => {
  return {
    attraqt: {
      globalContext: {
        source: `storefront_${shopId}`,
        // […] more compute intensive variables here
      },
    },
  };
});

export default {
  name: "myAttraqtConfig",
  slowValuesOnEachRequest: (_req, config) => {
    return getContextFromShopId(config.currentShopId);
  },
};

Layer-specific context

Contexts can also be provided at the layer level. It allows to add context variables only for search queries restricted to a single item kind (e.g: categories).

To do so, you must use the context option of datasource.buildLayer() function in your application. Example:

const layer = searchDatasource.buildLayer({
  type: "categories",
  // your context variables here
  context: {
    priority: "online_sales",
    foo: "bar",
  },
  executeQuery: executeCategoryQuery,
  formatHit: searchDatasource.formatters.category,
  fetchErrorFallback: () => () => {
    return Promise.reject();
  },
});

info

Layer-specific context replace the global context.