Hyvä Themes - React Checkout
Compatible with Magento 2.3.4 and higher.
What does it do?
It loads a React Checkout at
[store-url]/hyva/reactcheckout. When enabled in
hyva_react_checkout/general/enable it replaces the default checkout.
It depends on these two variables in
signin_tokento the customer section
cartIdto the cart section
For Hyvä Themes or default Magento frontend,
hyva-themes/magento2-graphql-tokens is needed to add these tokens to the customerSections.
What it is not
Hyvä React Checkout is not a drop-in replacement for the default Luma checkout; it does not have feature parity. Rather, it provides you a base on which you can build your own custom checkout for your site. It is a powerful tool with which you can develop the checkout in the most efficient way.
It basically avoids the frustration you have when you want to customize the Luma checkout by making the development process super fun.
What are the benefits?
By default, the checkout works out of box. But, in most of the time you need to customize the checkout page to bring some custom functionalities or modifying existing checkout behaviour or change the look and feel. To make this tedious process simpler, you can launch the embedded ReactApp as a stand alone App and by providing a cartId, you can work on the checkout page exclusively. This development mode supports by Hot Module Reloading (HMR) which will enable us to see the changes we have been making on the code almost immediately reflect on the browser and that will eventually going to save a huge amount of time in the development.
Where can we use it?
Hyvä React Checkout can be used in any Luma based themes or with Hyvä Theme directly. With some modifications, we can also use this with a headless approach too.
In a Luma based theme
You would encounter some CSS problems. This is because we are using Tailwind CSS for the styling of the checkout page and since this is a different CSS approach that is being used in the Luma theme, some CSS conflicts should be expected.
In a headless approach
There are some configurations we are passing through the data attribute via HTML DOM. This needs to be implemented in the headless approach to make it work there.
In order to use Hyvä React Checkout, you would require the following
- React knowledge. This is essential to work with Hyvä React Checkout as it is completely build with React.
- A magento 2 site with graphql API.
- Nodejs >= 10 is required in order to make it work.
Technologies/ Terminologies Used
The following technologies are used in the Hyvä React Checkout.
- React : React is used to build the UI.
- Tailwind CSS : This is used for styling the react components.
- Formik : This is used to store the checkout form states.A popular library in React realm.
- Yup : This is used for the validation of the checkout form. It works well with Formik.
- GraphQL : It uses the Magento 2 GraphQL API in order to update the quote from the checkout page.