Spree下拉框用于变体选项值

我正在学习Spree 3.0，我设置了一个卖短裤的测试店。

短裤有多种选择类型：尺寸，颜色，长度

我想改变它从前端复选框到下拉框显示前端变体选项的方式。

目前，Spree将选项类型显示为单选按钮：

我想更改此选项以使用每个选项类型的下拉菜单，如下所示：

我尝试过以下方法：

但它只显示每个标记中所有选项类型的值：

我想知道将选项值拆分为单独下拉菜单的最佳方法吗？

任何帮助都非常感谢，谢谢。

Answer 1

这并不像它看起来那么容易，因为你将使用Spree::OptionValue记录而不是变体，并且在某些时候你会想要转换回变体以便将它添加到你的购物车。 组合可能无法和/或缺货，因此使用option_values非常不实用。

但是，你想知道我是如何设置以下内容的：

 @options = Spree::OptionValue.joins(:option_value_variants).where(spree_option_value_variants: { variant_id: @product.variant_ids }).group_by(&:option_type) 

这将为您提供一个哈希，哈希的键是option_types（大小，颜色，长度），值是option_values的数组。

您可以轻松地将其形成为这样的无线电：

 <% @options.each do |option_type, option_values| %> <%= content_tag :h2, option_type.presentation %> <% option_values.each do |option_value| %> <%= radio_button_tag option_type.name, option_value.id %> <%= label_tag option_value.presentation %> <% end %> <% end %> 

或者下拉：

 <% @options.each do |option_type, option_values| %> <%= content_tag :h2, option_type.presentation %> <%= collection_select :variants, option_type.name, option_values, :id, :presentation %> <% end %> 

在您的控制器中，您可能希望找到符合这3个条件的变体，检查它是track_inventory? ， backorderable还是track_inventory? 是false并回复错误或更新的购物车:)

我希望这有帮助

Answer 2

这就是我为解决这个问题所做的。 它基本上采用由单选按钮控制的variant_id参数，并将其转换为由jQuery和AJAX控制的隐藏字段以及其他通知。

我希望这可以帮助别人。

配置/ routes.rb中

 # Mount the core routes Rails.application.routes.draw do mount Spree::Core::Engine, at: '/' end # Create new routes Spree::Core::Engine.routes.draw do post "products/:product_id/get_variant", to: "products#toggle_like", as: "get_variant", constraints: { :format => /(js)/ } end 

应用程序/模型/大礼包/ product_decorator.rb

 Spree::Product.class_eval do # Find the Product's Variant from an array of OptionValue ids def find_variant_by_options(array) option_values = Spree::OptionValue.where(id: array) variants = [] option_values.each do |option_value| variants.push(option_value.variants.ids) end self.variants.find_by(:id => variants.inject(:&).first) end end 

应用程序/控制器/礼包/ products_controller_decorator.rb

 Spree::ProductsController.class_eval do # Get the Variant from params[:ids], respond with JavaScript def get_variant @product = Spree::Product.find_by :slug => params[:product_id] @variant = @product.find_variant_by_options(params[:ids].split(',')) respond_to do |format| format.js end end end 

应用程序/视图/大礼包/产品/ get_variant.js.erb

 // Update hidden field #varient_id's value. $("#variant_id").val("<%= @variant.id %>") // Update price $(".price.selling").html("<%= number_to_currency @variant.price %>"); <% if @variant.in_stock? && @variant.available? %> // If in stock and available $("#add-to-cart-button").prop("disabled", false); // Enable button $(".out-of-stock").hide(); // Hide 'out of stock' message <% else %> // Otherwise $("#add-to-cart-button").prop("disabled", true); // Disable button $(".out-of-stock").show(); // Show 'out of stock' message <% end %> 

应用程序/视图/大礼包/产品/ _cart_form.html.erb

 <%= form_for order, url: populates_orders_path do |f| %> ... <% if @product.variants_and_option_values(current_currency).any? %> 
 
<%= Spree.t(:variants) %>
 <% @product.option_types.each do |option_type| %> <%= f.label "option_type_#{option_type.id}", option_type.name %> 
 <%= f.select "option_type_value_#{option_type.id}", option_type.option_values.all.collect { |v| [ v.name, v.id ] }, { include_blank: true }, { class: "form-control" } %> 
 <% end %> <%= hidden_field_tag "variant_id", value: "0" %> ... 
 <% else %> <%= hidden_field_tag "variant_id", @product.master.id %> <% end %> ...  <%= display_price(@product) %>  ... <%= button_tag class: "btn btn-success", id: "add-to-cart-button", disabled: @product.variants.any?, type: :submit do %> <%= Spree.t(:add_to_cart) %> <% end %> ...  <%= Spree.(:out_of_stock) %>  <% end %>