Module to add a React minicart to Magento 2 KO frontend
This module offers a React-based minicart to replace the existing minicart of Magento itself. Please note that this is an experiment to show how easy it is to build React components. It could be used on live sites, but comes without warranties.
Before you install this module, make sure to install the Yireo_React module first. An install via
composer should pick this up right away.
Use the following commands to install this module into Magento 2:
composer config repositories.yireo-react vcs [email protected]:yireo-training/Yireo_React.git composer config repositories.yireo-react-minicart vcs [email protected]:yireo-training/Yireo_ReactMinicart.git composer require yireo/magento2-react-minicart:dev-master bin/magento module:enable Yireo_React Yireo_ReactMinicart bin/magento setup:upgrade
Make sure to read the Usage section below as well.
This module adds an additional minicart to the Magento 2 frontend, based upon ReactJS, and it removes the old code. This requires the source to be compiled into generic AMD code that works with RequireJS. To compile the source, enter the
view/frontend/ folder from a shell. Next, install all packages listed in
After this, you should be able to modify the files
view/frontend/source and compile them to browser code using Gulp:
If you want to develop this code yourself, you can also run:
Gulp is instead of Webpack, because you need most of the cool stuff that Webpack runs with: The webserver is not going be to Node-based, but is the Magento webserver instead. Because of this, hot module reloading can not be used.
customerData) so you can use this as a HOC wrapper for obtaining things like the
setState()is called within a React component (and thus that component re-renders), have a callback back to a KO observable, so UiComponents can respond to React rerenders.