Skip to content

Instantly share code, notes, and snippets.

@maier-stefan
Created August 24, 2014 16:22
Show Gist options
  • Save maier-stefan/de24c059e8ac5260f0f8 to your computer and use it in GitHub Desktop.
Save maier-stefan/de24c059e8ac5260f0f8 to your computer and use it in GitHub Desktop.
select product option
my route
get 'products/:id(/:color_id(/:size_id))' => 'products#show', :as => "select_product_option"
in my product_group model
def size size_id
return nil unless size_id
product_sizes.find(size_id)
end
def color color_id
return nil unless color_id
product_colors.find(color_id)
end
def product_by_color_and_size color, size
return nil unless color
return nil unless size
products.find_by_product_color_id_and_product_size_id(color.id,size.id)
end
in my controller:
def show
@product_group = ProductGroup.find(params[:id])
@color = @product_group.color(params[:color_id])
@size = @product_group.size(params[:size_id])
@product = @product_group.product_by_color_and_size(@color, @size)
end
now in my view I need two selects like this:
select color
<ul>
<li>
blue
</li>
<li>
braun
</li>
</ul>
select size
<ul>
<li>
M
</li>
<li>
L
</li>
</ul>
Whats the best way to select/choose size and color to find the product?
@fanktom
Copy link

fanktom commented Aug 25, 2014

If there's no color, show a select with all possible colors. On select navigate the page to the value of the select option using JS.

If you have a @color, also show the size options that again navigates to the select option value.

The JS using jQuery could look something like this:

$("#colors-select").change(function() {
    location.href = "/products/5/" + $("#colors-select").val();
});

@th1agoalmeida
Copy link

you should be using spree or at least checking it's sources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment