This is Paazl shipping integration for Hyvä React Checkout.
- A working Magento site with Paazl 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": { "paazl": "[email protected]:hyva-themes/magento2-react-checkout-paazl.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. -
Final step is including the translations related to the Paazl extension. 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_paazl" xsi:type="string"> <![CDATA[]]> </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.