[教學][JDStore] 4步驟輕鬆做出「搜索商品」功能

成果:

預計時間:3分鐘

先安裝GEM

gemfile
gem 'ransack' #搜索
gem 'will_paginate' #分頁
gem 'will_paginate-bootstrap'# 美化分頁

bundle install
然後重啟伺服器

  1. 在navbar加入搜索欄位

    app/views/common/navbar.html.erb
      <div class="navbar-form navbar-left">
        <%= form_tag search_products_path, :method => :get do %>
        <div class="input-group" id="search-id" >
          <input type="text" class="form-control" name="q" value="<%= params[:q] %>" placeholder="想找什么呢?">
        </div>
        <button type="submit" class="btn btn-default">Search</button>
        <% end %>
      </div>
    
  2. 修改route

config/routes.rb
  resources :products do
    member do
      post :add_to_cart
    end
+    collection do
+      get :search
+    end
  end
  1. 修改application_controller
controller/application_controller.rb
+        before_action :validate_search_key, only: [:search]

+    def search
+      if @query_string.present?
+        search_result = Product.ransack(@search_criteria).result(:distinct => true)
+        @products = search_result.paginate(:page => params[:page], :per_page => 5 )
+      end
+    end

+    protected

+    def validate_search_key
+      @query_string = params[:q].gsub(/\\|\'|\/|\?/, "") if params[:q].present?
+      @search_criteria = search_criteria(@query_string)
+    end

+    def search_criteria(query_string)
+      { :title_cont => query_string }
+    end

    放在private上面
helpers/application_helper.rb
def render_highlight_content(product,query_string)
  excerpt_cont = excerpt(product.title, query_string, radius: 500)
  highlight(excerpt_cont, query_string)
end
  1. 建立搜索頁面

touch app/views/products/search.html.erb

app/view/products/search.html.erb
<div class="row">
  <% if @query_string.blank? %>
      <div class="search-info-title">
        你没有输入东西,找不着商品啊
      </div>

    <% elsif @products.blank? %>
      <br>
      <h2 class="search-info-title">沒有找到相关信息,请重新输入关键字搜索</h2>
    <% else %>
      <h2 class="search-info-title"> 有关"<%= @query_string %>"的產品信息 </h2>

      <div class="search-result">
        <% @products.each do |product| %>
          <div class="col-xs-6 col-md-3">
            <%= link_to product_path(product) do %>
              <% if product.image.present? %>
                <%= image_tag(product.image.thumb.url, class: "thumbnail") %>
              <% else %>
                <%= image_tag("http://placehold.it/200x200&text=No Pic", class: "thumbnail") %>
              <% end %>
            <% end %>
            <%= product.title %> ¥ <%= product.price %>
          </div>
        <% end %>
      </div>
      
      <div class="text-center">
        <%= will_paginate(@products, renderer: BootstrapPagination::Rails) %>
      </div>
    <% end %>
</div>

如果有安裝[「一個商品多張圖片」功能](http://logdown.com/account/posts/1843556-multi-pics
上面顯示圖要改

-    <% if product.image.present? %>
-   <%= image_tag(product.image.thumb.url, class: "thumbnail") %>
+    <% if product.photos.present? %>
+   <%= image_tag(product.photos[0].avatar.thumb.url, class: "thumbnail") %>

參考 - 如何在navbar上添加搜索栏并实现搜索结果



希望您喜歡這篇文章,請抽空幫我投一票,謝謝!



如果获得2等奖,我会从投票给我的VIP学员里抽出1位赠送这本有香气的励志书


comments powered by Disqus