How to display products by category on the same list screen

Steps required to display products belonging to each category using the same index file

When creating an EC site, etc., ** I want to display products for each category on one index page !! ** I think that you may encounter a situation. For example, on a fashion e-commerce site, if you press the men's category, the products that belong to men's will be displayed, and if you select the outerwear, only the outerwear will be displayed on the list screen. It is a function that is installed in any site as a matter of course, but if you try to implement it from the developer's point of view, many people may be wondering what kind of processing should be done.

In that case, such a condition can be cleared by following the procedure below. Let's get excited now.

(1) Create a partial template that describes the notation of the category link used on the product list screen.

erb:app/views/products/category_search.html.erb

:
<tbody>
    <% categories.each do |category| %>
    <tr>
      <% if category.is_active == true %>　
      <td>
        <%= link_to category.name, products_path(category_id: category.id), class: "text-secondary" %>
      </td>                    <%# products_category as an argument to path_pass id%>
      <% end %>
    </tr>
    <% end %>
</tbody>
:

First, prepare a link corresponding to each category in each statement. Specify the index page where this description is written as the link destination, but at that time it is necessary to give the category id to the argument of path. By the way, don't forget to describe the model because an association is required to perform the above processing.

** The above description corresponds to this part on the screen ** By the way, it's my hobby that the product has become Marilyn Monroe, so I'd like you to convert it to shortcake in your brain. 　　　　　↓

(2) Reflect only the products that belong to the category on the index page based on the arguments received by the controller.

Started GET "/products?category_id=1" for 118.240.8.212 at 2020-12-25 12:54:22 +0000
Cannot render console from 118.240.8.212! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by ProductsController#index as HTML
  Parameters: {"category_id"=>"1"}
  Category Load (0.2ms)  SELECT  "categories".* FROM "categories" WHERE "categories"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/products_controller.rb:8
  Rendering products/index.html.erb within layouts/application

Next, the process of finding the target data based on the parameter value is performed in the controller. As a result of ①, it can be seen that ** category_id ** is assigned to the parameter and sent as described above. Write a program to first identify the category based on that id, and then identify the product associated with the category.

app/controllers/products_controller.rb

class ProductsController < ApplicationController

  def index
    @products = Product.all
    @categories = Category.all
    @tax = TAX
    if params[:category_id].present?
      #params with present method[:category_id]Check if the value is included in=>If true, execute the following
      @category = Category.find(params[:category_id])
      @products = @category.products
    end
  end

This makes it possible to display only the products associated with ** category_id = x ** on the index page. By the way, if you check the URL of the view page displayed at this time, it will be written as (... com/products? Category_id = 1), but this reflects the argument (category_id) passed to the path of the link. What was done `. Anyway, this completes the procedure for displaying products in each category. Please give it a try.

If you find any mistakes in the information, please contact us. We are looking forward to hearing from you.