Attraqt

Since version 3.22

Front-Commerce integrates Attraqt XO Recommendations, so you can display product recommendations from your Attraqt widgets in your storefront.

This is part of the same @front-commerce/attraqt extension as Attraqt search: if you already use Attraqt for search, recommendations are available with no extra install.

note

Attraqt is now part of Crownpeak Product Discovery (Crownpeak was acquired by Rezolve Ai in December 2025). You may see these names in Attraqt's own tooling and documentation. Front-Commerce keeps the attraqt naming, and the underlying technical names (XO, widgets) are unchanged.

Installation

Displaying recommendations

Pick the approach that matches where you want the recommendations to appear.

Power the product page slots

Product pages already show related, up-sell and cross-sell products. Map a slot to an Attraqt widget when registering the extension to have Attraqt provide them, with no change to your theme:

front-commerce.config.ts

attraqt("magento2", {
  recommendations: {
    slots: {
      productRelated: "<your-widget-id>",
      productUpsells: "<your-widget-id>",
      productCrosssells: "<your-widget-id>",
    },
  },
});

A slot left unmapped keeps showing your backend's own recommendations, so you can switch them over one at a time.

Show a widget anywhere

To display a widget elsewhere, drop the AttraqtRecommendations component where you need it:

import { AttraqtRecommendations } from "@front-commerce/attraqt/react";

<AttraqtRecommendations
  widgetId="<your-widget-id>"
  variables={{ $productId: product.sku }}
/>;

Use variables to pass the visitor context the widget needs (for example $productId or $category). The heading defaults to the widget title configured in Attraqt; pass a title prop to override it. Pass a limit prop to request a specific number of products (defaults to recommendations.defaultLimit).

Custom rendering

To render the products your own way, use the useAttraqtRecommendations hook instead of the component:

import { useAttraqtRecommendations } from "@front-commerce/attraqt/react";

const { products, title, loading } = useAttraqtRecommendations({
  widgetId: "<your-widget-id>",
  variables: { $productId: product.sku },
});

Activity tracking

The extension also ships an activity tracker that feeds the Attraqt engine with behavioral signals. It loads the Attraqt XO SDK client-side and maps Front-Commerce commerce events (Product Viewed, Product Added, Product Removed, Order Completed) to Attraqt activities.

Consent and data lifecycle

The XO SDK is loaded only once the visitor grants the attraqt consent, and no activity is sent before then. Because the SDK is fetched asynchronously, events that occur during the same interaction that grants consent (typically the first page view right after opting in) happen before the SDK is ready and are not sent. This is expected: tracking starts from the next event onward.

When the visitor withdraws consent, tracking stops immediately and the session identifier the SDK stores in localStorage (attraqtsessionid) is removed on the next page load, so no Attraqt data lingers in the browser.

Attributing an interaction to a specific widget (sourceId/widgetId) is not handled yet and will come in a later iteration.

Configuration

The product page slot mapping is passed as an argument to the attraqt() extension (see above). The API endpoint is a runtime configuration:

Key	Description	Default
recommendations.endpoint	Base URL of the Attraqt Recommendations API	https://api.early-birds.io
recommendations.defaultLimit	Number of recommendations requested when no limit is given	10
recommendations.httpTimeoutInMs	Timeout (in milliseconds) for requests to the API	5000

Set these with their environment variables (FRONT_COMMERCE_ATTRAQT_RECOMMENDATIONS_ENDPOINT, FRONT_COMMERCE_ATTRAQT_RECOMMENDATIONS_TIMEOUT_IN_MS), or override them through a configuration provider.