Mondial Relay integration

This page contains information about the different ways you can 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.0

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";
// src/web/theme/modules/Checkout/ShippingMethod/AdditionalShippingInformation/getAdditionalDataComponent.js
+import MondialRelay from "theme/modules/MondialRelay";

const ComponentMap = {
+ mondialrelay: {
+   pickup: MondialRelay,
+ }
};

Integrate with Magento1

Since version 2.5.0

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";
// 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.

Edit on GitHub  or  Send us a feedback