如何将选项链接到订单，包括。 期权的数量？

Question

How can I include product options to an order incl. the quantities for the respective options?

--> It is unclear to me how to deal with the many to many relationship between orders and product options and linking them all together in an order form.

Please find below some code on how my tables are linked at the moment and how I currently try to solve it in a form.

models

class Order < ApplicationRecord
  has_many :order_options, dependent: :destroy
end

class OrderOption < ApplicationRecord
  belongs_to :option
  belongs_to :order
end

class Option < ApplicationRecord
 belongs_to :product_type
 has_many :order_options, dependent: :destroy
end

class ProductType < ApplicationRecord
 has_many :options, dependent: :destroy
end

orders_controller

class OrdersController < ApplicationController

  def new
    @shop = Shop.find(params[:shop_id])
    @order = Order.new
    @orders = @shop.orders
    @order.order_products.build
    @order.order_options.build
    @product_type_list = @shop.product_types
    @order.build_order_contact
    @products = []
    @options = []

    # Display products/options for type
    if params[:product_type].present?
      @products = ProductType.find(params[:product_type]).products
      @options = ProductType.find(params[:product_type]).options
    end
    if request.xhr?
      respond_to do |format|
        format.json {
        render json: {products: @products, options: @options}
      }
    end
  end

order form

<%= simple_form_for [@shop, @order] do |f|%>
 <%= f.simple_fields_for :order_products do |order_product| %>

#select product for which options are shown -->

  <%= order_product.simple_fields_for :products do |product| %>
    <%= product.input :product_type_id, collection: @product_type_list, 
        input_html:{
         value: @product_type_list.object_id,
         id: "product_type"
         }
     %>
   <% end %>

#area to display options belonging to the product 
chosen above incl. dropdown field where users 
can select a quantity. -->

<h4>Options:</h4>
 <div id="render-options">
   # Place where Javascript and Ajax can be rendered with possible options and dropdown field for quantity
 </div>

<%= f.button :submit%>

Javascript/Ajax

    <script >
  // Grab selected product_type on which options are based -->

  $(document).on("change", "#product_type", function(){
    var product_type = $(this).val();

    $.ajax({
      url: "/shops/<%= @shop.id %>/orders/new",
      method: "GET",
      dataType: "json",
      data: {product_type: product_type},
      error: function (xhr, status, error) {
        console.error('AJAX Error: ' + status + error);
      },
      success: function (response) {
        console.log(response);


      // dynamic rendered options -->
      var options = response["options"];

      $("#render-options").html("");
      $("#render-options").append("");
      for(var i=0; i< options.length; i++){
        $("#render-options").append('<option value="' + options[i]["id"] + '">' + options[i]["name"] + '</option>');
        console.log(options[i].orders)
      }
    }
  });
  });
</script>

Answer 1

For this example I'm going to go with a classic order form setup as its less confusing (at least to me).

class Order < ApplicationRecord
  has_many :line_items, dependent: :destroy
  has_many :products, through: :line_items
  accepts_nested_attributes_for :line_items
end

class LineItem
   belongs_to :order
   belongs_to :product
end

---

class OrdersController
  def new
     @order = Order.new
     # seed the form with 5 empty lines
     5.times { @order.line_options.new }
  end

  def create
     @order = Order.new(order_params)
     # ...
  end

  # ...
  private
  def order_params
    params.require(:order).permit( line_items_attributes: [:product_id, :quantity] )
  end
end

---

<%= simple_form_for [@order] do |f| %>
  <%= f.simple_fields_for :line_items do |item| %>
    <%= f.association :product %>
    <%= f.input :quantity %>
  <% end %>
<% end %>

This is basically the setup for a "classic" order form which emulates paper. In reality this is not very useful unless your dealing with poor corporate minions that actually have to fill it out from top to bottom.

For an actual web shop the users are actually clicking on forms from GET /products/id that should actually be sending individual POST /orders/:order_id/line_item requests to a nested route to "add items to the cart". The order itself is often created implicitly.

In general the greatest misstake is thinking that you can treat placing an order as one single http call which creates the whole order and processes it. Instead you need to treat it as a set of atomic operations that lead the user to eventually checking out.