How I implemented a simple shopping cart in a React-Rails App
I have been developing WordPress websites as a freelance web developer and I am thankful to the developers who have been contributing to opensource solutions to make my life easier. I used WooCommerce for shopping cart solutions and I had some happy clients.
One of my main difficulties working as a WordPress developer, however, was implementing some core customizations since I hadn’t yet dived deeper into the world of coding.
The first thing I wanted to do when I joined Flatiron School and studied software engineering was to develop an eCommerce from scratch and to be able to align and add features as I deemed important.
So for my final project at the program, I developed an eCommerce that won the admiration of my fellow classmates. I am writing this blog to share how I managed to implement a simple shopping cart as a central focus of the project. The eCommerce is built with Ruby on Rails as a backend and React.js as a frontend.
Models —
I already had three Model, that is — User, Product and Category. To implement the shopping cart I added two more Models, Order and OrderItem. An Order belongs to a User and OrderItem belongs to an Order and a Product. It is highly recommended to create an Account Model that belongs to the User and use it to implement the shopping cart feature for security reasons. For this project, however, I will integrate the shopping cart directly with the User Model.
If a shopper(User) clicks Add To Cart button for the first time, new Order Instance that belongs to the shopper and an OrderItem instance that belongs to the newly created Order and the Product will be created. Until the User completes checkout, every Add To Cart click will create an OrderItem that belongs to the Order created at the first Add To Cart Click.
To figure out if the shopper has already created an Order or not, I added an attribute called current-order to the User Model.
By default, the current_order attribute will be set to null. As long as it is null an Add To Cart click will create a new Order Instance. After the Order is created, however, the User’s current_order attribute will be updated with the id of the newly created Order. Next time the user adds a product to cart the current_order attribute is no longer null and the id stored at the attribute will be used to identify the existing Order and a new OrderItem that belongs to the Order will be created.
I am using Redux to manage React state and whenever the Add To Cart button is clicked, the addToCart function in the Action.js file will execute.
Every product added within a session will be added to the same Order and will be populated as order items. Once the shopper check-out and completes the purchase, the current_order attribute of the User will be updated back to null. This way the shopper can make a new order and thus a new Order instance will be created.
This method is also helpful to archive a shopper’s order history. All you have to do is list all orders that belong to a shopper.
