「从零开始做购物网站」第31章 新增商品多级搜索功能

文章目录

1. 1. 目标
2. 2. 步骤
   1. 2.1. Step 0:建立新分支
   2. 2.2. Step 3:增加相应的路径
   3. 2.3. Step 4:将变更 commit 进去 git 里面。
3. 3. 本章详解

大家好，本系列文章主要是对我参加全栈营JDstore魔改大赛作品「季风 & MONSOON」的复盘。由于本人也是新手，文章中一定有很多幼稚的错误或代码，希望大家帮忙指出，可反馈至我的邮箱kerzzi@outlook.com，我会持续完善本系列。非常感谢。
本系列是在全栈营JDstore教程基础之上进行魔改，本系列第1-11章节为全栈营JDstore教程，请在完成全栈营JDstore教程的基础上进行测试。

目标

新增商品多级搜索功能

步骤

Step 0:建立新分支

执行

checkout -b story23```。

### Step 1:修改navbar

打开app/views/common/_navbar.html.erb
```ruby app/views/common/_navbar.html.erb
             <li><%= link_to "关于", static_pages_about_path %></li>
            </ul>
+           <!-- 搜索框 -->
+           <%= form_tag search_products_path, method: :get, class: "navbar-form navbar-left" do %>
+             <div class="form-group">
+               <% if @category %>
+                 <input type="hidden" name="category_id" value="<%= @category.id %>" />
+              <% end %>
+              <input type="text" name="w" value="<%= params[:w] %>" class="form-control search-input" placeholder="<%= @category ? "在 #{@category.title} 下搜索.." : '搜索整站商品..' %>">

+             </div>
+             <button type="submit" class="btn btn-default">搜索</button>
+           <% end %>
            
            <ul class="nav navbar-nav navbar-right">

###Step 2:在products_controller中，实作search action

打开app/controllers/products_controller.rb，增加search action

app/controllers/products_controller.rb

+  def search
+
+    #在全栈商品中搜索
+    @products = Product.where("title like :title", title: "%#{params[:w]}%")
+      .order("id desc").page(params[:page] || 1).per_page(params[:per_page] || 12)
+      .includes(:main_product_image)
+
+    #在二级分类商品中搜索
+    unless params[:category_id].blank?
+      @products = @products.where(category_id: params[:category_id])
+    end
+
+    render file: 'products/index'
+  end

Step 3:增加相应的路径

打开config/routes.rb

config/routes.rb

  resources :categories, only: [:show]
 
   resources :products do
+    get :search, on: :collection
     member do
       post :add_to_cart
       post :favorite

Step 4:将变更 commit 进去 git 里面。

git add .
git commit -m "新增商品多级搜索功能"
git push origin story23
git checkout master
git merge story23
git push origin master

本章详解

努力更新中，上班族请理解。。。。。