Shopping cart is a very important component in any online store. There, you can look at the products you want to buy. A functional and fast shopping cart will definitely encourage users to shop. The shopping cart in Magento 2 doesn’t impress with its performance. Part of the section refreshes asynchronously, and part of it requires reloading the page. I thought to check my own solution and I made a Proof of Concept design of a shopping cart based on the Magento 2 shopping cart.

This article is part of the DivantePoC series on Proof of Concept projects implemented in Divante. PoC are mini-projects executed in advanced technologies that aim at gaining skills, proving the correctness of their concepts, sharing knowledge with other employees and outside the company by sharing their results.

Technology stack

My project is based on the following technologies/tools:

  • React
  • Flux/Redux
  • Webpack
  • Yeoman / generator-front-webpack

React

React is a framework that facilitates building user interfaces.

Flux/Redux

Flux is an application architecture used to create web applications on the web browser. In short, Flux provides data to React components using a one-way data flow. Redux is one of the most popular implementations of Flux architecture

Webpack

Webpack is a module bundler of frontend applications. It helps in combining different dependencies, such as js files, images or html code. With Webpack, you can easily build your application.

Yeoman / generator-front-webpack

Yeoman is a tool that helps you start working on a new project in a quick and easy way. With generators, you can generate a project that contains all the necessary files, a local server, and tools used for, for example, code testing.

How does it work?

Data

I wanted my project to be easy to understand, so I just focused on the front-end. All necessary product data, delivery locations, etc. are retrieved asynchronously from JSON files.

Functionalities

Functionalities of my project include:

  • displaying products in the shopping cart
  • quantity management
  • possibility to choose delivery method depending on the country.

The data is kept in the so-called Store and it’s modified by certain actions. For example, if you change the product quantity, the component responsible for displaying the product sends a request for the change in product quantity to the container. After receiving the request, the container calls up the action to change the quantity and the action is captured by the Reducer, which changes the data in the Store. Then, the data returns to the container and is passed down to the components.

 

cart-items-actions

 

You can say that Redux / Flux is responsible for modifying the data and React is responsible for displaying that data.

Summary

Working on this small project, I noticed how easy and comprehensive it was to make a frontend application using the Flux architecture. The project is a good base for further work, as it can be developed in different ways:

  • Integration with Magento Api
  • Adding backend, e.g. in NodeJS
  • Expanding further areas such as Catalog or Checkout.

Implementing a shopping cart that works fully asynchronously (without reloading the page) can significantly improve the functionality of the Magento 2-based store. This allows users to modify their shopping cart and immediately see the cost changes. With this solution, the user doesn’t have to click the “update shopping cart” button and wait for the page to reload, which can significantly affect their satisfaction with the operation of the online store.

Sources

 

Read also: Is your Magento 2 IT agency still wasting time on manual tests?