Building a Shopping Cart in Ruby on Rails (Part 1)

On my Ruby on Rails course I was tasked to build an e-commerce web application. In this post, I’ll cover creating a shopping cart that will keep track of products and their quantity and allow users to remove items. The full list of requirements was this:

  • display a list of products to the client
  • client can add any product to cart
  • the cart can contain many products
  • the client can remove stuff from the cart
  • at the end, the client can “confirm” the cart, which clears the cart
  • when a client starts adding stuff to the cart, they can come back a day later and still see their cart
  • as for now, the “confirm” feature doesn’t need to do anything – in the next phase, we’ll make it an order, but for now it’s not needed
I’ll try to give you an outline of everything you need to make a robust shopping cart for your web application.
You need at least four models for an e-commerce site: Products, Carts, Orders and Cart Items (which is a join table between products and carts).

Creating and Retrieving the cart

Because a client should be able add products to the cart and have his products in his cart even after he leaves and comes back later we need a way to figure out whether he already has a cart or not. You can create a private method where you retrieve the right cart object based on the cart ID stored in the session, or create the cart if it doesn’t yet exist and store it in the session.
zrzut-ekranu-z-2017-02-05-130331
Because we need to handle this right after the user enters the web site a great place to set this functionality is in the Application Controller.
You also need to make sure to handle an exception when a cart cannot be retrieved from the database for some reason and rescue ActiveRecord::RecordNotFound and create a new one.
You may wonder, what happens when a customer creates a cart but then abandons it? Well, you may use it as a good source of information, for example to check what products are added the most, which shows what products interest the clients the most. On the other hand, you may not want to destroy the carts, especially if you add users later on and associate carts with users.

Adding products to cart

In order to add products to the cart we need the actual cart. You can use your set_cart method that you’ve just defined in your Application Controller then you can use a before_action filter to specify which actions need to retrieve or create a cart.
zrzut-ekranu-z-2017-02-05-135417
You probably noticed the add_product method on cart. This is a special method we create on the cart model that allows us to create initial Cart Items records, as well as keep track of the quantity of the same product. If we simply used @cart.ordered_items.build, we’d be creating individual records of the same product each time.
Let’s take a look at add_product method:
zrzut-ekranu-z-2017-02-05-132603

Instead of creating a separate record of the same product each at a time users can choose the quantity of items they want to add. So a quantity parameter is always being passed to the controller action inside of product_params.

So what happens is add_product checks for the existence of the Cart Item record in the cart. If  you have the same product in your cart, it simply updates the quantity and saves the record. Otherwise, you create the relationship and return the item.

Adding and removing products

Like most e-commerce sites, we’ve built a page where customers can look at their cart and update the quantity of items or remove them entirely. This calls for one more action in our Cart Items controller: destroy:zrzut-ekranu-z-2017-02-05-134047

Now we have everything we need to keep track of products in a customer’s cart.

In my next post, I’ll cover user authentication, how to handle check out and processing orders as well as admin panel where an admin can add/manage products and prices, see existing orders and see reports of selling products in the last 30 days.

Advertisements

2 thoughts on “Building a Shopping Cart in Ruby on Rails (Part 1)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s