Magento 2

This extension contains the connector to use Front-Commerce with a headless Magento 2 backend.

Prerequisites

Install the module on Magento.

WIP

https://developers.front-commerce.com/docs/2.x/magento2/installation

Installation

First ensure you have installed the package:

$ pnpm install @front-commerce/magento2@latest

Setup Magento2 Extension

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

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 storesConfig from "./app/config/stores";
import cacheConfig from "./app/config/caching";

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

Add the following variables to your .env file:

.env

FRONT_COMMERCE_MAGENTO2_ENDPOINT=https://magento2.example.com
FRONT_COMMERCE_MAGENTO2_CONSUMER_KEY=xxxxxxxxx
FRONT_COMMERCE_MAGENTO2_CONSUMER_SECRET=xxxxxxxxx
FRONT_COMMERCE_MAGENTO2_ACCESS_TOKEN=xxxxxxxxx
FRONT_COMMERCE_MAGENTO2_ACCESS_TOKEN_SECRET=xxxxxxxxx

Feature Flags

The Magento 2 extension supports the following feature flags: Click to expand.

• Cart (default: true) - Enable the cart feature
• Catalog (default: true) - Enable the catalog feature
• Checkout (default: true) - Enable the checkout feature
• Cms (default: true) - Enable the CMS feature
• CmsSearch (default: true) - Enable the CMS search feature
• Contact (default: true) - Enable the contact feature
• Customer (default: true) - Enable the customer feature
• DownloadableProduct (default: true) - Enable the downloadable product feature
• InStockAlert (default: true) - Enable the in stock alert feature
• Invoice (default: true) - Enable the invoice feature
• MagentoAdmin (default: true) - Enable the Magento admin feature
• Order (default: true) - Enable the order feature
• Refund (default: true) - Enable the refund feature
• Reviews (default: true) - Enable the reviews feature
• Store (default: true) - Enable the store feature
• Wishlist (default: true) - Enable the wishlist feature
• Wysiwyg (default: true) - Enable the WYSIWYG feature

All these features are active by default. To disable a feature you should return a falsy value for the feature flag in your extension options:

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 storesConfig from "./app/config/stores";
import cacheConfig from "./app/config/caching";

export default defineConfig({
  extensions: [
    magento2({
      storesConfig
      features: {
        Contact: false, // Contact feature will be disabled
        Refund: false, // Refund feature will be disabled
        Reviews: false, // Reviews feature will be disabled
        // all other features will be enabled by default
      },
    }),
    themeChocolatine(),
  ],
  stores: storesConfig,
  cache: cacheConfig,
  configuration: {
    providers: [],
  },
});

tip

If a feature is not defined in the feature flags, it will be enabled by default.