Spree how to display variants in drop down Ruby on Rails?

Question

I'm using spree 2.0.0 stable in my application. On product show page all variants display as a radio buttons. I just want to show them in a drop down. Any thoughts on this?

Thanks.

Answer 1

Note: This solution implements Spree "Template Replacement method" especially, when u have extensive design change in your application design or using your custom design. See here

http://guides.spreecommerce.com/developer/view.html

Otherwise use "deface" method if u are using default design of Spree store or minor changes.

Go to:

app/views/spree/products/_cart.html.erb. and wrote following line at inside cart Form.

<%= select_tag "products[#{@product.id}]",     options_for_select(@product.variants_and_option_values(current_currency).collect{|v| ["#{variant_options(v)}  #{variant_price(v)}", v.id]})%>

#(if you don't have this file(app/views/spree/products/_cart_form.html.erb) go to github spree2.0.0 branch and use it in your product.)

Hope this works for you too.

Thanks

Answer 2

The select tag also appears to need an ID of "variant_id" otherwise you'll get a 404 error on the order populate action.

Answer 3

As of Spree 2.2.0.beta (and probably earlier), you should be using the included Deface gem to be making this modification instead of directly editing the core files.

To replace the contents of the code located in the spree frontend view file app/views/spree/products/_cart_form.html.erb (notice the name has changed since Spree v2.0):

Create a folder at app/overrides/spree/products/_cart_form/ and add a .deface file with the name of your choice eg. variant_dropdown.html.erb.deface In this case, since the replacement code contains dynamic ruby code, the .erb is necessary.

Then, in the contents of this file, select the code that you are trying to edit out of the core and replace it with your own custom code. Here's what my .deface file looks like.

<!-- replace_contents "[data-hook='inside_product_cart_form'] #product-variants, #inside-product-cart-form[data-hook] #product-variants" -->

<h6 class="product-section-title"><%= Spree.t(:licenses) %></h6>
<%= select_tag "products[#{@product.id}]", 
    options_for_select(@product.variants_and_option_values(current_currency).collect{ |v| ["#{variant_options(v)}  #{variant_price(v)}", v.id] })%>

The point of this is that any future updates of Spree would otherwise overwrite your code or require you to manually rewrite your code every time. This attempts to futureproof your changes by hooking into the data selector that will persist over updates.

Answer 4

here's what i did for spree 3.0. this was put in a file \app\overrides\use_drop_down_for_variants.rb

Deface::Override.new(:virtual_path => 'spree/products/_cart_form',
                     :name => 'use_drop_down_for_product_variants',
                     :replace_contents => '[id="product-variants"]',
                     :text => '
                                  <h3 class="product-section-title"><%= Spree.t(:variants) %></h3>
                              <%= select_tag "variant_id",
    options_for_select(@product.variants_and_option_values(current_currency).collect{ |v| ["#{variant_options(v)}  #{variant_price(v)}", v.id] })%>
');