Skip to main content
Version: next

Netup

This extension integrates the Netup Suiter recommendation system with Front-Commerce applications. It performs the following functions:

  • monitors user actions and sends them to the recommendation engine
  • requests recommendations from the Netup API for specific publishing zones
  • displays the received recommendations in the appropriate places on the page

The Netup recommendation engine tracks visitor activity and uses this data to recommend products similar visitors were interested in.

Prerequisites​

  • A Netup account and configuration slug
  • A compatible e-commerce backend (currently supports Gezy)

Installation​

First ensure you have installed the package:

$ pnpm install @front-commerce/netup@latest

Setup Netup Extension​

Update your front-commerce.config.ts to include the Netup Extension:

front-commerce.config.ts
import { defineConfig } from "@front-commerce/core/config";
import themeChocolatine from "@front-commerce/theme-chocolatine";
import netup from "@front-commerce/netup";
import storesConfig from "./app/config/stores";
import cacheConfig from "./app/config/caching";

export default defineConfig({
  extensions: [
    netup("gezy"), // Currently only supports "gezy" flavor
    themeChocolatine(),
  ],
  stores: storesConfig,
  cache: cacheConfig,
  configuration: {
    providers: [],
  },
});

Environment Configuration​

Add the following variables to your .env file:

.env
# Netup slug provided by Netup
FRONT_COMMERCE_NETUP_SLUG=your-netup-slug

Analytics Setup​

The extension provides built-in analytics tracking. To enable it, you need to:

React Components Setup​

The extension provides React components for displaying recommendations. Wrap your application with the NetupProvider:

app/root.tsx
import { NetupProvider } from "@front-commerce/netup/react";

export default function App() {
  return <NetupProvider>{/* Your app content */}</NetupProvider>;
}
info

Alternatively, you can wrap the theme/layouts/GenericLayout by using theme-overrides.

Feature Integration​

The extension automatically registers feature components for different recommendation contexts:

  • Product Page: Shows related products on product pages
  • Cart Page: Shows recommendations in the cart
  • Category Page: Category-specific recommendations
  • Product Added Pop-in: Cross-sell recommendations when adding products to cart

Next Steps​

Now that you have the basic setup configured, you can: