Many-to-Many Relationships: Part Two

Topics Covered in This Ruby on Rails Tutorial:

The Has_many, Through Relationship and Setting Quantity Properties

Exercise Overview

The has_and_belongs_to_many relationship creates a direct connection between two models through a join table. Every time you relate two model objects together, Rails automatically creates an entry in this join table. While this approach works well for simple many-to-many relationships, it reveals a significant limitation: you cannot directly access or manipulate the join table itself, which means adding additional fields (like quantity, timestamps, or other metadata) becomes impossible. This constraint has led us to a common crossroads in Rails development.

Encountering this limitation is not just normal—it's expected. Professional Rails development embraces an Agile methodology that recognizes these moments as natural evolution points in your application's architecture. Rather than viewing this as a setback, we treat it as valuable feedback from our code, indicating it's time to refactor toward a more robust solution.

Implementing the Has_many, Through Relationship

Now we'll migrate from our simple join table to the more powerful has_many, through pattern. This process involves creating the new model, updating existing relationships, and ensuring data integrity throughout the transition.

1. Navigate to the nutty project folder located in Desktop > Class Files > yourname-Rails Class > nutty

   If your code editor supports project-level file management (like VS Code or Sublime Text), open the entire nutty folder as a project to streamline file navigation during this exercise.

2. Ensure you have two Terminal tabs open: one running the Rails server and another for executing commands. If your server isn't running, follow these steps to restore the proper development environment.

Implementing the Quantity Field Functionality

With our has_many, through relationship established, we can now implement quantity tracking—a feature impossible with the simple join table approach. This enhancement transforms our basic cart into a proper e-commerce solution.

1. Open the cart controller to modify how products are added: nutty > app > controllers > cart_controller.rb

   We need to update the create action to work with line_items directly, enabling quantity specification and proper inventory management.

2. Locate the product addition logic around line 10:

   @cart.products << product

3. Replace this direct product association with line_item creation:

   def create
      product = Product.find(params[:product_id])
      @cart.line_items.build(product: product, quantity: params[:quantity])
      @cart.save
   end

   The build method creates a new line_item associated with the cart while allowing us to set both the product reference and quantity in a single operation.

4. Save the controller file.

5. Update the cart view to display and manage quantities. Open nutty > app > views > cart > index.html.erb

   To properly display quantities, we need to iterate through line_items rather than products directly, since quantity is a property of the line_item, not the product itself.

6. Modify the iteration logic around line 20:

   <tbody>
      <% @cart.line_items.each do |line_item| %>
         <tr>

7. Update all product references within the loop to access products through line_items. Replace each instance of product with line_item.product:

   Pro Tip: In Sublime Text, select the word product and press Ctrl–Cmd–G (Mac) to select all instances. Use the Left Arrow key to position cursors before each instance, then type line_item. to make all changes simultaneously.

   <% @cart.line_items.each do |line_item| %>
      <tr>
         <td id="thumbnail-div" class="hidden-xs">
            <%= link_to line_item.product do %>
               <%= image_tag url_for(line_item.product.image.variant(resize_to_limit: [200,200])), alt: line_item.product.title, class: 'cart-thumbnail' %>
            <% end %>
         </td>
         <td>
            <%= link_to line_item.product do %>
               <p><%= line_item.product.title %></p>
            <% end %>
            <p class="gray-text">Item #<%= line_item.product.sku %></p>
         </td>
         <td><input type="number" name="quantity" min="1" max="100" value="1">
            <a href="#"><span class="glyphicon-refresh"></span>update</a>
            <a href="#"><span class="glyphicon-remove"></span>remove</a>
         </td>
         <td class="hidden-xs"><%= number_to_currency line_item.product.price %></td>
         <td class="total-price"><%= number_to_currency line_item.product.price %></td>
      </tr>
   <% end %>

8. Replace the static quantity input field around line 33:

   <td><input type="number" name="quantity" min="1" max="100" value="1">

9. Delete this line and replace it with a Rails form helper that displays the actual quantity:

   <td>
      <%= number_field_tag :quantity, line_item.quantity, min: 1, max: 100, class: 'form-control' %>
      <a href="#"><span class="glyphicon-refresh"></span>update</a>

   The number_field_tag creates an HTML5 number input with built-in validation, populated with the line_item's actual quantity value.

10. Save the view file.

11. Test the quantity functionality by reloading localhost:3000 in your browser.

12. Select any product from the homepage.

13. Set the quantity to 8 and click Add To Cart.

    You should be redirected to the cart page showing the product with a quantity of 8. Note that any previously added items may show no quantity since they were added before we implemented quantity tracking—this demonstrates the difference between our old and new approaches. In the next exercise, we'll implement the remove functionality to complete our cart management system.