This is DHL delivery method integration for Hyvä React Checkout.
- A working Magento site with Post & DHL Shipping Extension installed and setup.
- Hyvä React Checkout is installed and setup.
-
Update the
package.jsonfile with the below content:File:
src/reactapp/package.json"config": { "shippingMethodsRepo": { "dhl": "[email protected]:hyva-themes/magento2-react-checkout-netresearch-dhl-delivery.git" }, },Depending upon the version, theme or the way in which you setup the extension, along with the GitHub URL, you may need to append the branch details also. For example, if you are using version 2.x of react checkout and you are running on Lumazon theme, then the GitHub url should be changed like
[email protected]:hyva-themes/magento2-react-checkout-netresearch-dhl-delivery.git -b lumazon-themewherelumazon-themeis the branch that holds the code base for the same.With this code in
package.jsonand runningnpm install, then you are all set. This repo will be copied into the Hyvä React Checkout and will be configured correctly. -
You need to install two more packages in order to make the integration work. To install them, run below commands:
npm i -S leaflet preact-render-to-string -
Include the css file related to
leafletin your react app. This is needed for you to see the pickup locations correctly on the google mapFile:
src/reactapp/src/index.jsximport './index.css'; import 'leaflet/dist/leaflet.css'; -
Final step is including the translations related to the dhl delievery. For this, we need to do a layout update. Do the below:
File:
src/view/frontend/layout/hyvareactcheckout_reactcheckout_index.xml<?xml version="1.0"?> <page> ... <body> ... <referenceContainer name="main" htmlClass="container column main"> <referenceContainer name="content"> <referenceBlock name="checkout.translations"> <arguments> <argument name="checkout_translations" xsi:type="array"> <item name="hyva_reactcheckout_dhl_delivery" xsi:type="string"> <![CDATA[Postcode,Search,Opening Hours,Services,Select,Remove,Your shipping option selections could not be saved.,Please enter less or equal than %1 symbols.,Please enter a valid number in this field.,HTML tags are not allowed.,Your input must not include one of the following: ,"You must not refer to a parcel shop, postal office, or similar.",Map data]]> </item> </argument> </arguments> </referenceBlock> ... </referenceContainer> </referenceContainer> .... </body> </page>
This Checkout has been built in corporation - and with the support of - our main partner, integer_net.
The MIT License (MIT). Please see License File for more information.
- Check the extension
checkout_index_index.xmlandweb/jsandweb/templatedirectories before you start with any integration. Get an understanding how checkout knockout components are used in the extension. - Mimic the behaviour of the extension. You should start with the shipping method template component. Create a react component for that and then slowly move the data binders you find in the template to the corresponding javascript part.
- Enclose the api methods related to the extension within your shipping method folder itself under
src/api/directory provided your shipping method directory is insidesrc/reactapp/src/shippingMethods/. Do not place them in the original api directory which you will find atsrc/reactapp/src/api/. Refer this code base for example. - If the shipping method you are integrating contains lot of application states, then instead of making them as part of global app state, you can create your own shipping method context and manage them there. Refer this code base for example.
- Create your own custom hooks in order to collect global states such as Formik, App, Cart etc. Refer this code base for example.