【Ruby on Rails】同一の一覧画面でのカテゴリー別の商品の表示方法

#同じindexファイルを使用してカテゴリー毎に属する商品を表示させる為に必要な手順

ECサイト等を作成した際、**一つのindexページでカテゴリー毎に商品を表示させたい!!**なんて状況に遭遇することがあると思う。
例えばファッション系のECサイトなら、メンズのカテゴリーを押したらメンズに属した商品を表示、アウターを選択するとアウターのみが一覧画面に表示されるような処理を施したり...みたいな。
どんなサイトでも当たり前のように搭載されている機能だが、いざ開発者の立場に立って実装してみるとどのような処理をすればいいのか頭を悩ませる方は多いのではないだろうか。

その場合、下記の様な手順を踏むことでそうした条件をクリアすることができる。
それでは早速張り切っていってみよう。

①商品一覧画面にて使用するカテゴリーリンクの表記を記述した部分テンプレートを作成

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_pathに引数としてcategory_idを渡す %>
     <% end %>
   </tr>
   <% end %>
</tbody>
:

まずeach文でそれぞれのカテゴリーに対応するリンクを用意する。
リンク先にはこの記述の書かれているindexページを指定するが、その時にpathの引数にカテゴリーidを与える必要がある。
ちなみに上記の処理を行うにはアソシエーションが必要になるのでモデルの記述を忘れずに。

上記の記述は画面上のこの部分に相当
ちなみに商品がマリリンモンローになってしまっているのは私の趣味なので、ここは適当にショートケーキとかに脳内変換しておいてほしい。
　　　　　↓

##②コントローラの方で受け取った引数を元にカテゴリーに所属した商品のみをindexページに反映させる

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

次にコントローラ内でパラメーターの値を元に対象データを探し出す処理をさせる。
①の結果、パラメーターには上記のようにcategory_idが代入されて送られてきているのがわかる。
そのidを元にまずカテゴリーを特定し、その後カテゴリーに紐付けれた商品を特定するようプログラムを記述する。

app/controllers/products_controller.rb

class ProductsController < ApplicationController

  def index
    @products = Product.all
    @categories = Category.all
    @tax = TAX
    if params[:category_id].present?
      #presentメソッドでparams[:category_id]に値が含まれているか確認 => trueの場合下記を実行
      @category = Category.find(params[:category_id])
      @products = @category.products
    end
  end

これによりcategory_id = xに紐づいた商品のみをindexページに表示させることができる。
ちなみにこの際表示されたviewページのURLを確認すると(...com/products?category_id=1)のような表記になっているが、これはリンクのpathに渡した引数（category_id）が反映されたものである。
何はともあれこれで無事にカテゴリー毎の商品の表示手順が完了した。
皆さんもぜひお試しを。

記載内容に間違いがあった場合はご連絡頂けると嬉しいです。
ご連絡お待ちしております。