💭
Rails｜ECサイトのジャンル検索機能
実装機能
ECサイトにジャンル検索機能を追加する。
ジャンル検索欄のジャンルをクリック → ジャンル検索の結果画面を表示。
開発環境
ruby 3.1.2p20
Rails 6.1.7.4
Cloud9
bootstrap5
Itemモデルは作成済み
1. searches コントローラの作成
以下コマンドを実行し、コントローラを作成する。
$ rails g controller searches
searchesコントローラに以下を追記する。
searches_controller.rb
def genre_search
@genre_id = params[:genre_id]
@items = Item.where(genre_id: @genre_id)
end
@genre_id = params[:genre_id]
ビュー（ジャンル検索部分）から、送られてきたgenre_idを @genre_idに代入する。
@items = Item.where(genre_id: @genre_id) ビュー（ジャンル検索部分）から送られてきたgenre_id`を持つ Itemを全て取得。
2. ルーティングの記述
ルーティングに追記する。
routes.rb
get '/genre/search' => 'searches#genre_search'
3. ジャンル検索部分のビューの作成
_genre.html.erb
<div class="genre_search">
<table class="table">
<tr>
<th>ジャンル検索</th>
</tr>
<%= form_with url: genre_search_path, method: :get do |f| %>
<% @genres.each do |genre| %>
<tr>
<td><%= link_to genre.name, genre_search_path(genre_id: genre.id), method: :get %></td>
</tr>
<% end %>
<% end %>
</table>
</div>
※@genres には、Genre.allが代入されている。
link_toを使って、パラメータを送付する際、pathの直後に(任意のパラメータ名: 取得したいカラム)と記述することで、任意のパラメータ名を作成できる。
→ このおかげで、コントローラで @genre_id = params[:genre_id] という記述ができる。
4. ジャンル検索結果のビューの作成
genre.search.html.erb
<div class="container p-3">
<div class="row">
<%= render 'public/shared/header.html.erb' %>
<div class="col-md-3 col-md-offset-1">
<%= render 'public/items/genre_search.html.erb' %>
</div>
<div class="col-md-8">
<h3>検索結果</h3>
<div class="search-items d-flex flex-wrap">
<% @items.each do |item| %>
<div class="search-item mr-2">
<%= link_to item_path(item.id) do %>
<%= image_tag item.image, size: "200x150" %>
<% end %>
<p><%= item.name %></p>
<p>¥<%= item.price %></p>
</div>
<% end %>
</div>
<%= paginate @items, theme: 'bootstrap-5' %>
</div>
<%= render 'public/shared/footer.html.erb' %>
</div>
</div>
参考にさせていただいた記事
Discussion