ChronoRelais integration

This guide explains how Front-Commerce can be configured to expose the ChronoRelais shipping method.

Prerequisites

The ChonoRelais 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.19

The integration of ChronoRelais in Magento2 & Front-Commerce relies on the official Chronopost Magento2 module and our headless Chronorelais module for Magento2 so both need to be installed. For the official Chronopost module, please refer to the official documentation. For our headless Chronoless module, you can use composer:

composer require front-commerce-magento/module-headless-chronorelais

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-chronorelais"
      "./src"
    ],
    serverModules: [
      { name: "FrontCommerce", path: "server/modules/front-commerce" },
      { name: "Magento2", path: "server/modules/magento2" },
      {
        name: "ChronoRelais",
        path: "shipping-mondialrelay/server/modules/magento2-chronorelais",
      },
    ],
    webModules: [
      { name: "FrontCommerce", path: "./src/web" },
    ],
  };

• Import styles of related components by overriding the _modules.scss, for instance:

  src/web/theme/modules/_modules.scss

  @import "~front-commerce/theme-chocolatine/web/theme/modules/modules";
  
  @import "~theme/modules/ChronoRelais/ChronoRelais";

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

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

  import ChronoRelais from "theme/modules/ChronoRelais";
  
  const ComponentMap = {
    chronorelais: {
      chronorelais: ChronoRelais,
    },
  };
  
  const getAdditionalDataComponent = (method) => {
    return (
      ComponentMap[method.carrier_code] &&
      ComponentMap[method.carrier_code][method.method_code]
    );
  };
  
  export default getAdditionalDataComponent;