CMS

The CMS extension adds an editor-based content management system to Front-Commerce: build editable pages from reusable sections, illustrate them with a media library, and edit everything in the CMS Studio with a live storefront preview.

Since version 3.21

With @front-commerce/cms, content managers build and edit pages in the CMS Studio, a dedicated screen with the real storefront page as a live, resizable preview. Pages are composed of sections (hero banners, title + text blocks, …) and illustrated with assets from a built-in media library.

Compatibility

The CMS extension is compatible with Gezy (@front-commerce/gezy), Magento 1 (@front-commerce/magento1), and Magento 2 (@front-commerce/magento2). The flavor passed to cms(flavor) selects which connector backend stores the content events. To discuss compatibility with other connectors, please

contact us.

Installation

Install the CMS extension:

$ pnpm install @front-commerce/cms@latest

Enable it

Register the extension in your front-commerce.config.ts file. cms(flavour) must be added after your connector's extension — on startup it reads the connector's services to wire up content storage and the media library.

Example with the Gezy connector :

front-commerce.config.ts

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

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

With the Magento 1 connector, pass "magento1" instead:

front-commerce.config.ts

cms("magento1"),

With the Magento 2 connector, pass "magento2":

front-commerce.config.ts

cms("magento2"),

The flavor must match the connector registered in the same config.

No backend yet?

cms("filesystem") needs no connector at all: pages are stored on the local machine, which lets you design sections and demo the Studio before the e-commerce backend exists. See Maquettage without a backend.

The extension wires up its routes, GraphQL, theme, and media library on its own. The connector backend, however, has its own prerequisites — see Set up a backend before you start editing content.

What you can do

• Edit pages in context with the Page Editor — see Using the CMS.
• Manage media — browse, upload, and organise images from the media library — see Manage media.
• Add your own section types to the editor — see Create custom sections.