Skip to main content
Version: 3.x

Prismic

The Front-Commerce Prismic module brings support for the headless CMS Prismic to Front-Commerce. It allows exposing content coming from a Prismic repository in your GraphQL API and creates relationships with data from other systems.

Prerequisites​

Before you can use the Prismic extension, you need to have the following:

Installation​

To install the Prismic extension, run the following command:

$ pnpm install @front-commerce/prismic@latest

Configuration​

To use the Prismic extension, you need to configure your environment and your Front-Commerce application.

Environment variables​

In the .env file, you have to define the following environment variables:

FRONT_COMMERCE_PRISMIC_REPOSITORY_NAME=your-repository
FRONT_COMMERCE_PRISMIC_ACCESS_TOKEN=the-very-long-access-token-from-prismic
FRONT_COMMERCE_PRISMIC_WEBHOOK_SECRET=a-secret-defined-in-webhook-configuration
#FRONT_COMMERCE_PRISMIC_API_CACHE_TTL_IN_SECONDS=60
  • FRONT_COMMERCE_PRISMIC_REPOSITORY_NAME is the Prismic repository name
  • FRONT_COMMERCE_PRISMIC_ACCESS_TOKEN is the access token for the repository, go to Settings > API & Security and create an application and copy the Permanent access token generated for this application
  • FRONT_COMMERCE_PRISMIC_WEBHOOK_SECRET is a secret key used to clear caches in Front-Commerce and to secure Integration Fields API endpoints. To define it, go to Settings > Webhook and create a webhook pointing to your Front-Commerce URL https://my-shop.example.com/prismic/webhook. In the webhook form, you can configure a Secret. This is the one you should use in this environment variable.
  • FRONT_COMMERCE_PRISMIC_API_CACHE_TTL_IN_SECONDS is an optional configuration that allows to customize the TTL of Prismic API cache. Shortening it allows to prioritize data freshness in environments not targeted by a Prismic webhook over performance. It defaults to 23h in production environments and 1min in staging and dev environments.
tip

In case of trouble, front-commerce:prismic (or front-commerce:prismic* to include more specific namespaces) can be added to the DEBUG environment variable value, this value turns the debug on for Prismic module and make it verbose. For more information see Debug Flags

Front-Commerce application​

To use the Prismic extension in your Front-Commerce application, you need to register the extension in your front-commerce.config.ts file:

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

export default defineConfig({
  extensions: [
    magento2({ storesConfig }),
    themeChocolatine(),
    prismic(),
  ],
  stores: storesConfig,
  cache: cacheConfig,
  configuration: {
    providers: [],
  },
});

The module is ready!

You can now use the Prismic loader to Expose Prismic Content in your project.