Magento 1

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

Prerequisites

Install the module on Magento.

Installation

First ensure you have installed the package:

$ pnpm install @front-commerce/magento1@latest

Setup Magento1 Extension

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

front-commerce.config.ts

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

export default defineConfig({
  extensions: [magento1({ storesConfig }), themeChocolatine()],
  stores: storesConfig,
  cache: cacheConfig,
  configuration: {
    providers: [],
  },
  v2_compat: {
    useApolloClientQueries: true,
    useFormsy: true,
  },
  pwa: {
    appName: "Front-Commerce",
    shortName: "Front-Commerce",
    description: "My e-commerce application",
    themeColor: "#fbb03b",
    icon: "assets/icon.png",
    maskableIcon: "assets/icon.png",
  },
});

Add the following variables to your .env file:

.env

FRONT_COMMERCE_MAGENTO1_ENDPOINT=https://magento1.example.com
FRONT_COMMERCE_MAGENTO1_CONSUMER_KEY=xxxxxxxxx
FRONT_COMMERCE_MAGENTO1_CONSUMER_SECRET=xxxxxxxxx
FRONT_COMMERCE_MAGENTO1_ACCESS_TOKEN=xxxxxxxxx
FRONT_COMMERCE_MAGENTO1_ACCESS_TOKEN_SECRET=xxxxxxxxx

Feature Flags

The Magento 1 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
• Configuration (default: true) - Enable the Configuration 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 magento1 from "@front-commerce/magento1";
import storesConfig from "./app/config/stores";
import cacheConfig from "./app/config/caching";

export default defineConfig({
  extensions: [
    magento1({
      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.

Disable Health Checks

By default, Front-Commerce enables Health Checks to monitor the availability of the Magento1 backend. These checks run on the FRONT_COMMERCE_MAGENTO1_ENDPOINT URL. If you want to disable these health checks, you can pass the disabled option to your extension configuration.

front-commerce.config.ts

import { defineConfig } from "@front-commerce/core/config";
import magento1 from "@front-commerce/magento1";

export default defineConfig({
  extensions: [
    magento1({
      healthChecks: {
        disabled: true,
      },
    }),
  ],
});