如何将选项链接到订单期权数量?

时间:2019-10-01 09:39:34

标签: javascript jquery ruby-on-rails ajax activerecord

如何在订单(包括订单)中包含产品选项各个选项的数量?

->我不清楚如何处理订单和产品选项之间的多对多关系,并将它们以订单形式链接在一起。

请在下面找到一些有关我的表目前如何链接以及当前如何尝试以表格形式解决它的代码。

模型

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

订单

<%= 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>

1 个答案:

答案 0 :(得分:0)

在此示例中,我将使用经典的订单表单设置,因为它不那么令人困惑(至少对我而言)。

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 %>

这基本上是模拟纸张的“经典”订单的设置。实际上,这不是很有用,除非您与实际上必须从上到下填写的不良企业小企业打交道。

对于实际的网上商店,用户实际上是在点击GET /products/id中的表格,这些表格实际上应该将单个POST /orders/:order_id/line_item请求发送到嵌套路线以“将商品添加到购物车”。订单本身通常是隐式创建的。

通常,最大的错误是认为您可以将下订单视为一个单独的http调用,以创建整个订单并进行处理。相反,您需要将其视为一组原子操作,这些操作会导致用户最终签出。