Mondial Relay integration

This guide explains how Front-Commerce allows using Mondial Relay in a headless commerce project.

There are different ways for you to ship orders with Mondial Relay in your Front-Commerce application.

Prerequisites

No matter the backend solution, the MondialRelay Front-Commerce modules requires a Map component to display pickup points. Thus, before proceeding, please make sure that you've chosen a Map implementation from Display a map.

Integrate with Magento2

Since version 2.10

The integration of MondialRelay in Magento2 & Front-Commerce relies on Magentix' module for pickup points. So you first need to install and configure this module (at least the version 100.10.7).

Then, within your Front-Commerce project, you have to:

• Use the module in your .front-commerce.js

  .front-commerce.js

    module.exports = {
    name: "Front-Commerce DEV",
    url: "http://www.front-commerce.test",
    modules: [
  + "./node_modules/front-commerce/modules/shipping-mondialrelay"
    "./src"
    ],
    serverModules: [
    { name: "FrontCommerce", path: "server/modules/front-commerce" },
    { name: "Magento2", path: "server/modules/magento2" },
  + {
  +     name: "MondialRelay",
  +     path: "shipping-mondialrelay/server/modules/magento2-mondialrelay",
  + },
    ],
    webModules: [
    { name: "FrontCommerce", path: "./src/web" },
    ],
    };

• Import styles of MondialRelay related components by overriding the _modules.scss

  src/web/theme/modules/_modules.scss

  
  +@import "~theme/modules/MondialRelay/MondialRelay";

• Import MondialRelay component in by overriding the getAdditionalDataComponent used for Shipping methods

  src/web/theme/modules/Checkout/ShippingMethod/AdditionalShippingInformation/getAdditionalDataComponent.js

  +import MondialRelay from "theme/modules/MondialRelay";
  
  const ComponentMap = {
  + mondialrelay: {
  +   pickup: MondialRelay,
  + }
  };

Integrate with Magento1 (OpenMage LTS)

Since version 2.5

The integration of MondialRelay in Magento1 & Front-Commerce relies on man4x's module for pickup points. You will also need the front-commerce/mondialrelay-magento1-module for extra endpoints needed in Front-Commerce.

So you first need to install and configure those modules.

Then, within your Front-Commerce project, you have to:

• Use the module in your .front-commerce.js

  .front-commerce.js

  module.exports = {
    name: "Front-Commerce DEV",
    url: "http://www.front-commerce.test",
    modules: [
  +   "./node_modules/front-commerce/modules/shipping-mondialrelay"
      "./src"
    ],
    serverModules: [
      { name: "FrontCommerce", path: "server/modules/front-commerce" },
      { name: "Magento1", path: "server/modules/magento1" },
  +   {
  +     name: "MondialRelay",
  +     path: "shipping-mondialrelay/server/modules/magento1-mondialrelay",
  +   },
    ],
    webModules: [
      { name: "FrontCommerce", path: "./src/web" },
    ],
  };

• Import styles of Mondial Relay by overriding the _modules.scss

  src/web/theme/modules/_modules.scss

  +@import "~theme/modules/MondialRelay/MondialRelay";

• Import MondialRelay component in by overriding the getAdditionalDataComponent used for Shipping methods

  src/web/theme/modules/Checkout/ShippingMethod/AdditionalShippingInformation/getAdditionalDataComponent.js

  
  +import MondialRelay from "theme/modules/MondialRelay";
  
  const ComponentMap = {
  +  "24R": {
  +    mondialrelaypickup: MondialRelay,
  +  },
  };

After following this guide, customers will be able to choose MondialRelay as a shipping method and will be able to choose a pickup point on a map.