Drop-Down-Filter zu sortieren Produkte nach Kategorie auf Index-Seite

Question

Ich bin ziemlich neu in Schienen und bin den Aufbau eines Online-Shops. Ich habe momentan ein Produktmodell und ein Kategorienmodell mit der Assoziation: Produkte gehören zu einer Kategorie und eine Kategorie hat viele Produkte. Ich möchte, dass Käufer eine Kategorie in einem Dropdown-Menü auswählen können und die Produkte auf der Indexseite nur Artikel in dieser Kategorie anzeigen.

konnte ich unten einen Tropfen bekommen alle Kategorien zu zeigen eine form_tag verwenden, aber wenn ich auf eine Kategorie auswählen filtern die Index-Seite nicht nur um diese Kategorie zu zeigen. index.html.erb

Produkte:

<%= form_tag('products', :remote => true) do %> 
    <%= select_tag "category", options_from_collection_for_select(Category.all, "id", "name"), { :include_blank => true , :class => "product_select"} %> 
    <%= submit_tag 'Filter' %> 
<% end %> 

Produkte Controller:

def index 
    if Product.all.collect == (params[:category]) 
     @products= Product.send(params[:category]) 
    else 
     @products = Product.order(:title) 
    end 

     respond_to do |format| 
     format.html # index.html.erb 
     format.js # index.js.erb 
     format.json { render json: @products } 
     end 
    end 

application.js:

$(document).ready -> $(".product_select").on "change", -> 
    $.ajax 
     url: "/products" 
     type: "GET" 
     dataType: "script" 
     data: 
     dept_type: $(".product_select").val() 

Vielen Dank im Voraus für jede Hilfe, lassen Sie mich wissen, wenn Weitere Informationen sind erforderlich.

Answer 1

Ich bin nicht sicher, ob Sie die DB aus Ihrer Sicht so aufrufen können (ich glaube nicht). Wenn Sie es tun können, sollten Sie nicht.

ändern Category.all

hier

<%= select_tag "category", options_from_collection_for_select(Category.all, "id", "name"), { :include_blank => true , :class => "product_select"} %> 

zu @categories und es in Ihrem Controller eingestellt.

was den Wert von

$(".product_select").val() 

ist auch möglicherweise eine Viele-zu-viele-Beziehung für Produkte und Kategorien möchten. Was passiert, wenn ein Produkt in zwei verschiedenen Kategorien sein soll?

Answer 2

Sie sind auf dem richtigen Weg mit der Ajax-Anfrage auf Änderung des Wertes in der Kategorie Dropdown-Menü.

1. auf dem div für die Produkte Indexseite, der Teil, der die Produkte eine ID zu diesem div hinzufügen zeigt (etwa products_div).
   Beispielcode (_products_list.html.erb)

   <div id="products_div"> 
       <%= @products.each do |product| %> 
       # bla bla bla display product attributes 
   </div> 
   

2. dann auf dem Controller für den Index, sollten Sie sie aktualisieren, um die Daten aus dem Ajax-Request
   Beispielcode (products_controller)

   zu verwenden

   if params[:dept_type].present? 
       @products = Product.where(dept_id: params[:dept_type]) 
   else 
       @products = Product.all 
   end 
   

3. dann auf der view-Datei, products.js.erb, ersetzen Sie den Inhalt des products_div
   Beispielcode (index.js.erb)

   $("#products_div").html("<%= escape_javascript(render partial: 'products_list', locals: { products: @products }) %>"); 
   

Der Code in # 3 wird der Inhalt des products_div mit den neuen @products, die Sie auf Änderung der Kategorie Dropdown