caboose-cms 0.4.151 → 0.5.1

data/app/views/caboose/products/admin_edit_variant_columns.html.erb

@@ -0,0 +1,75 @@
+<%
+p = @product    
+%>
+<%= render :partial => 'caboose/products/admin_header' %>
+
+<p class='note'>Check which columns you want to show in the list of variants.</p>
+<table>
+  <tr>
+    <td valign='top'>
+<div id='variantcol_1_option1'           ></div>
+<div id='variantcol_1_option2'           ></div>
+<div id='variantcol_1_option3'           ></div>
+    </td><td valign='top'>
+<div id='variantcol_1_status'            ></div>
+<div id='variantcol_1_sku'               ></div>          
+<div id='variantcol_1_barcode'           ></div>
+<div id='variantcol_1_price'             ></div>
+<div id='variantcol_1_quantity_in_stock' ></div>
+    </td><td valign='top'>
+<div id='variantcol_1_weight'            ></div>
+<div id='variantcol_1_length'            ></div>
+<div id='variantcol_1_width'             ></div>
+<div id='variantcol_1_height'            ></div>
+<div id='variantcol_1_cylinder'          ></div>
+    </td><td valign='top'>
+<div id='variantcol_1_requires_shipping' ></div>
+<div id='variantcol_1_allow_backorder'   ></div>
+<div id='variantcol_1_taxable'           ></div>
+    </td>
+  </tr>
+</table>
+<div id='message'></div>
+<p><input type='button' value='< Back' onclick="window.location='/admin/products/<%= p.id %>/variants';" /></p>
+
+<%= render :partial => 'caboose/products/admin_footer' %>
+<% content_for :caboose_js do %>
+<script type='text/javascript'>
+
+$(document).ready(function() {
+  <% p.variants.each do |v| %>
+  new ModelBinder({
+    name: 'VariantCol',
+    id: 1,
+    update_url: '/admin/products/<%= p.id %>/variant-cols',
+    authenticity_token: '<%= form_authenticity_token %>',
+    attributes: [
+      <% if p.option1 %>{ name: 'option1' , nice_name: <%= raw Caboose.json(p.option1) %> , type: 'checkbox', align: 'right', value: <%= @cols['option1'          ] == true ? true : false %>, width: 150 },<% end %>
+      <% if p.option2 %>{ name: 'option2' , nice_name: <%= raw Caboose.json(p.option2) %> , type: 'checkbox', align: 'right', value: <%= @cols['option1'          ] == true ? true : false %>, width: 150 },<% end %>
+      <% if p.option3 %>{ name: 'option3' , nice_name: <%= raw Caboose.json(p.option3) %> , type: 'checkbox', align: 'right', value: <%= @cols['option1'          ] == true ? true : false %>, width: 150 },<% end %>
+      { name: 'status'                    , nice_name: 'Status'                           , type: 'checkbox', align: 'right', value: <%= @cols['status'           ] == true ? true : false %>, width: 150 },
+      { name: 'sku'                       , nice_name: 'SKU'                              , type: 'checkbox', align: 'right', value: <%= @cols['sku'              ] == true ? true : false %>, width: 150 },                         
+      { name: 'barcode'                   , nice_name: 'Barcode'                          , type: 'checkbox', align: 'right', value: <%= @cols['barcode'          ] == true ? true : false %>, width: 150 }, 
+      { name: 'price'                     , nice_name: 'Price'                            , type: 'checkbox', align: 'right', value: <%= @cols['price'            ] == true ? true : false %>, width: 150 }, 
+      { name: 'quantity_in_stock'         , nice_name: 'Quantity'                         , type: 'checkbox', align: 'right', value: <%= @cols['quantity_in_stock'] == true ? true : false %>, width: 150 }, 
+      { name: 'weight'                    , nice_name: 'Weight (grams)'                   , type: 'checkbox', align: 'right', value: <%= @cols['weight'           ] == true ? true : false %>, width: 175 }, 
+      { name: 'length'                    , nice_name: 'Length (in)'                      , type: 'checkbox', align: 'right', value: <%= @cols['length'           ] == true ? true : false %>, width: 175 }, 
+      { name: 'width'                     , nice_name: 'Width (in)'                       , type: 'checkbox', align: 'right', value: <%= @cols['width'            ] == true ? true : false %>, width: 175 }, 
+      { name: 'height'                    , nice_name: 'Height (in)'                      , type: 'checkbox', align: 'right', value: <%= @cols['height'           ] == true ? true : false %>, width: 175 }, 
+      { name: 'cylinder'                  , nice_name: 'Cylinder'                         , type: 'checkbox', align: 'right', value: <%= @cols['cylinder'         ] == true ? true : false %>, width: 175 }, 
+      { name: 'requires_shipping'         , nice_name: 'Requires shipping'                , type: 'checkbox', align: 'right', value: <%= @cols['requires_shipping'] == true ? true : false %>, width: 200 }, 
+      { name: 'taxable'                   , nice_name: 'Taxable'                          , type: 'checkbox', align: 'right', value: <%= @cols['taxable'          ] == true ? true : false %>, width: 200 },
+      { name: 'allow_backorder'           , nice_name: 'Allow backorder'                  , type: 'checkbox', align: 'right', value: <%= @cols['allow_backorder'  ] == true ? true : false %>, width: 200 }, 
+      
+    ]
+  });
+  <% end %>
+});
+
+var modal = false;
+$(window).load(function() {
+  modal = new CabooseModal(800);
+});
+
+</script>
+<% end %>

data/app/views/caboose/products/admin_edit_variant_sort_order.html.erb

@@ -0,0 +1,63 @@
+<%
+p = @product
+%>
+
+<%= render :partial => 'caboose/products/admin_header' %>
+
+<div id='options'>
+<% if p.option1 %><div id='option1_container'><h2><%= p.option1 %></h2><ul id='option1'><% p.option1_values.each do |option| %><li id='values_<%= option %>'><%= option %></li><% end %></ul></div><% end %>
+<% if p.option2 %><div id='option2_container'><h2><%= p.option2 %></h2><ul id='option2'><% p.option2_values.each do |option| %><li id='values_<%= option %>'><%= option %></li><% end %></ul></div><% end %>
+<% if p.option3 %><div id='option3_container'><h2><%= p.option3 %></h2><ul id='option3'><% p.option3_values.each do |option| %><li id='values_<%= option %>'><%= option %></li><% end %></ul></div><% end %>
+</div>                                                               
+
+<div id='message'></div>
+
+<%= render :partial => 'caboose/products/admin_footer' %>
+
+<% content_for :caboose_css do %>
+<style type='text/css'>
+#options div { width: 33%; float: left; }
+#options ul { margin: 0 10px 0 0; padding: 0; list-style: none; }
+#options li { margin: 0; padding: 4px 8px; list-style: none; border: #ccc 1px solid; }
+#message { clear: left; }
+</style>
+<% end %>
+
+<% content_for :caboose_js do %>
+<script type='text/javascript'>
+
+$(document).ready(function() {  
+  $('#option1').sortable({    
+    update: function(event, ui) {
+      $.ajax({
+        url: '/admin/products/<%= p.id %>/variants/option1-sort-order',
+        type: 'put',
+        data: $('#option1').sortable('serialize'),
+        success: function(resp) {}
+      });        
+    }    
+  });
+  $('#option2').sortable({    
+    update: function(event, ui) {
+      $.ajax({
+        url: '/admin/products/<%= p.id %>/variants/option2-sort-order',
+        type: 'put',
+        data: $('#option2').sortable('serialize'),
+        success: function(resp) {}
+      });        
+    }    
+  });
+  $('#option3').sortable({    
+    update: function(event, ui) {
+      $.ajax({
+        url: '/admin/products/<%= p.id %>/variants/option3-sort-order',
+        type: 'put',
+        data: $('#option3').sortable('serialize'),
+        success: function(resp) {}
+      });        
+    }    
+  });
+});
+
+</script>
+<% end %>

data/app/views/caboose/products/admin_edit_variants.html.erb

@@ -0,0 +1,171 @@
+<% content_for :caboose_css do %>
+  <style>
+    ul {
+      list-style-type: square;
+      padding: 0 0 0 24px;
+      margin: 12px 0 24px;
+    }
+  </style>
+<% end %>
+
+<%
+p = @product
+v = @variant    
+%>
+
+<%= render :partial => 'caboose/products/admin_header' %>
+
+<p style='font-size: 75%;'><a href='/admin/products/<%= p.id %>/variant-cols'>Edit visible columns</a></p>
+
+<div id='message'><%
+# Make sure we're not trying to highlight a deleted variant
+if @highlight_variant_id
+  v = Variant.where(:id => @highlight_variant_id).first
+  if v.nil?
+    %><p class='note error'>The variant you want to highlight is not in the database.</p><%
+  elsif v.status == 'Deleted'
+    %><p class='note error'>The variant you want to highlight has been deleted.</p><%
+  end
+end 
+%></div>
+
+<div id='variants_wrapper'>
+  <table id='variants'>
+    <tr>
+      <th>&nbsp;</th>
+      <% if @cols['option1'           ] && p.option1 %><th valign='bottom'><%= p.option1    %></th><% end %>
+      <% if @cols['option2'           ] && p.option2 %><th valign='bottom'><%= p.option2    %></th><% end %>
+      <% if @cols['option3'           ] && p.option3 %><th valign='bottom'><%= p.option3    %></th><% end %>
+      <% if @cols['status'            ] == true      %><th valign='bottom'>Status             </th><% end %>
+      <% if @cols['alternate_id'      ] == true      %><th valign='bottom'>Alternate ID       </th><% end %>
+      <% if @cols['barcode'           ] == true      %><th valign='bottom'>Barcode            </th><% end %>
+      <% if @cols['price'             ] == true      %><th valign='bottom'>Price              </th><% end %>
+      <% if @cols['quantity_in_stock' ] == true      %><th valign='bottom'>Quantity           </th><% end %>
+      <% if @cols['weight'            ] == true      %><th valign='bottom'>Weight             </th><% end %>
+      <% if @cols['length'            ] == true      %><th valign='bottom'>Length             </th><% end %>
+      <% if @cols['width'             ] == true      %><th valign='bottom'>Width              </th><% end %>
+      <% if @cols['height'            ] == true      %><th valign='bottom'>Height             </th><% end %>
+      <% if @cols['cylinder'          ] == true      %><th valign='bottom'>Cylinder           </th><% end %>
+      <% if @cols['requires_shipping' ] == true      %><th valign='bottom'>Requires Shipping  </th><% end %>
+      <% if @cols['allow_backorder'   ] == true      %><th valign='bottom'>Allow Backorder    </th><% end %>
+      <% if @cols['taxable'           ] == true      %><th valign='bottom'>Taxable            </th><% end %>
+      <th>&nbsp;</th>
+      <th>&nbsp;</th>
+    </tr>
+    <tbody id='variants_tbody'>
+      <% p.variants.where(:status => ['Active', 'Inactive']).each do |v| %>      
+        <tr id='variant_<%= v.id %>' <% if @highlight_variant_id && v.id == @highlight_variant_id %>class='highlight'<% end %>>
+          <td class='sort_handle'>&nbsp;</td>
+          <% if @cols['option1'           ] && p.option1 %><td><div id='variant_<%= v.id %>_option1'           ></div></td><% end %>
+          <% if @cols['option2'           ] && p.option2 %><td><div id='variant_<%= v.id %>_option2'           ></div></td><% end %>
+          <% if @cols['option3'           ] && p.option3 %><td><div id='variant_<%= v.id %>_option3'           ></div></td><% end %>
+          <% if @cols['status'            ] == true      %><td><div id='variant_<%= v.id %>_status'            ></div></td><% end %>
+          <% if @cols['alternate_id'      ] == true      %><td><div id='variant_<%= v.id %>_alternate_id'      ></div></td><% end %>
+          <% if @cols['barcode'           ] == true      %><td><div id='variant_<%= v.id %>_barcode'           ></div></td><% end %> 
+          <% if @cols['price'             ] == true      %><td><div id='variant_<%= v.id %>_price'             ></div></td><% end %> 
+          <% if @cols['quantity_in_stock' ] == true      %><td><div id='variant_<%= v.id %>_quantity_in_stock' ></div></td><% end %> 
+          <% if @cols['weight'            ] == true      %><td><div id='variant_<%= v.id %>_weight'            ></div></td><% end %> 
+          <% if @cols['length'            ] == true      %><td><div id='variant_<%= v.id %>_length'            ></div></td><% end %> 
+          <% if @cols['width'             ] == true      %><td><div id='variant_<%= v.id %>_width'             ></div></td><% end %> 
+          <% if @cols['height'            ] == true      %><td><div id='variant_<%= v.id %>_height'            ></div></td><% end %> 
+          <% if @cols['cylinder'          ] == true      %><td><div id='variant_<%= v.id %>_cylinder'          ></div></td><% end %> 
+          <% if @cols['requires_shipping' ] == true      %><td><div id='variant_<%= v.id %>_requires_shipping' ></div></td><% end %>
+          <% if @cols['allow_backorder'   ] == true      %><td><div id='variant_<%= v.id %>_allow_backorder'   ></div></td><% end %>
+          <% if @cols['taxable'           ] == true      %><td><div id='variant_<%= v.id %>_taxable'           ></div></td><% end %>
+          <td class='edit'><a href='/admin/products/<%= p.id %>/variants/<%= v.id %>/edit'>Edit</a></td>
+          <td class='delete'><a href='#' onclick='delete_variant(<%= v.id %>);'>Delete</a></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<p><input type='button' value='New Variant' onclick="add_variant(<%= p.id %>);" /></p>
+
+<form id="add-multiple" action="/admin/products/<%= @product.id %>/variants/add-multiple" method="post">
+  <p style="margin: 0 0 12px"><small>CSV format: Alternate ID, Quantity, Price<%= ', ' if @product.option1 || @product.option2 || @product.option3 %><%= [@product.option1, @product.option2, @product.option3].compact.join(', ') %></small></p>
+  <textarea id="variants_csv" name="variants_csv" rows="8" cols="12" style="min-width: 500px; min-height: 250px; margin: 0 0 16px; padding: 12px"></textarea><br />
+  <input type="submit" value="Submit" />
+  <p class="message" style="margin: 12px 0 0; color: red"></p>
+</form>
+
+<%= render :partial => 'caboose/products/admin_footer' %>
+
+<% content_for :caboose_css do %>
+<style type='text/css'>
+tr.highlight td { background: #ffff99 }
+td.sort_handle { background: #ccc; width: 20px; }
+</style>
+<% end %>
+
+<% content_for :caboose_js do %>
+<script type='text/javascript'>
+
+$(document).ready(function() {
+  $('form#add-multiple').on('submit', function(event) {
+    event.preventDefault();
+    var $form = $(event.target);
+    
+    $.ajax({
+      type: $form.attr('method'),
+      url: $form.attr('action'),
+      data: $form.serialize(),
+      success: function(response) {
+        console.log(response);
+        if (response.success) {
+          location.reload();
+        } else {
+          $form.find('.message').empty().text(response.error);
+        }
+      }
+    });
+  });
+  
+  <% p.variants.each do |v| %>
+  new ModelBinder({
+    name: 'Variant',
+    id: <%= v.id %>,
+    update_url: '/admin/variants/<%= v.id %>',
+    authenticity_token: '<%= form_authenticity_token %>',
+    attributes: [
+      <% if @cols['option1'           ] && p.option1 %>{ name: 'option1'            , nice_name: <%= raw Caboose.json(p.option1) %> , type: 'text'     , align: 'left'  , value: <%= raw Caboose.json(v.option1             ) %>, width: 75, fixed_placeholder: false },<% end %>
+      <% if @cols['option2'           ] && p.option2 %>{ name: 'option2'            , nice_name: <%= raw Caboose.json(p.option2) %> , type: 'text'     , align: 'left'  , value: <%= raw Caboose.json(v.option2             ) %>, width: 75, fixed_placeholder: false },<% end %>
+      <% if @cols['option3'           ] && p.option3 %>{ name: 'option3'            , nice_name: <%= raw Caboose.json(p.option3) %> , type: 'text'     , align: 'left'  , value: <%= raw Caboose.json(v.option3             ) %>, width: 75, fixed_placeholder: false },<% end %>
+      <% if @cols['status'            ] == true      %>{ name: 'status'             , nice_name: 'Status'                           , type: 'text'     , align: 'left'  , value: <%= raw Caboose.json(v.status              ) %>, width: 75, fixed_placeholder: false },<% end %>
+      <% if @cols['alternate_id'      ] == true      %>{ name: 'alternate_id'       , nice_name: 'Alternate ID'                     , type: 'text'     , align: 'left'  , value: <%= raw Caboose.json(v.alternate_id        ) %>, width: 75, fixed_placeholder: false },<% end %>
+      <% if @cols['sku'               ] == true      %>{ name: 'sku'                , nice_name: 'SKU'                              , type: 'text'     , align: 'left'  , value: <%= raw Caboose.json(v.sku                 ) %>, width: 75, fixed_placeholder: false },<% end %>                         
+      <% if @cols['barcode'           ] == true      %>{ name: 'barcode'            , nice_name: 'Barcode'                          , type: 'text'     , align: 'left'  , value: <%= raw Caboose.json(v.barcode             ) %>, width: 75, fixed_placeholder: false },<% end %> 
+      <% if @cols['price'             ] == true      %>{ name: 'price'              , nice_name: 'Price'                            , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.price               ) %>, width: 75, fixed_placeholder: false },<% end %> 
+      <% if @cols['quantity_in_stock' ] == true      %>{ name: 'quantity_in_stock'  , nice_name: 'Quantity'                         , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.quantity_in_stock   ) %>, width: 50, fixed_placeholder: false },<% end %> 
+      <% if @cols['weight'            ] == true      %>{ name: 'weight'             , nice_name: 'Weight (grams)'                   , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.weight              ) %>, width: 50, fixed_placeholder: false },<% end %> 
+      <% if @cols['length'            ] == true      %>{ name: 'length'             , nice_name: 'Length (in)'                      , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.length              ) %>, width: 50, fixed_placeholder: false },<% end %> 
+      <% if @cols['width'             ] == true      %>{ name: 'width'              , nice_name: 'Width (in)'                       , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.width               ) %>, width: 50, fixed_placeholder: false },<% end %> 
+      <% if @cols['height'            ] == true      %>{ name: 'height'             , nice_name: 'Height (in)'                      , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.height              ) %>, width: 50, fixed_placeholder: false },<% end %> 
+      <% if @cols['cylinder'          ] == true      %>{ name: 'cylinder'           , nice_name: 'Cylinder'                         , type: 'checkbox' , align: 'center', value: <%= raw Caboose.json(v.cylinder            ) %>, width: 50, fixed_placeholder: false },<% end %> 
+      <% if @cols['requires_shipping' ] == true      %>{ name: 'requires_shipping'  , nice_name: 'Requires shipping'                , type: 'checkbox' , align: 'center', value: <%= raw Caboose.json(v.requires_shipping   ) %>, width: 50, fixed_placeholder: false },<% end %> 
+      <% if @cols['taxable'           ] == true      %>{ name: 'taxable'            , nice_name: 'Taxable'                          , type: 'checkbox' , align: 'center', value: <%= raw Caboose.json(v.taxable             ) %>, width: 50, fixed_placeholder: false },<% end %>
+      <% if @cols['allow_backorder'   ] == true      %>{ name: 'allow_backorder'    , nice_name: 'Allow backorder'                  , type: 'checkbox' , align: 'center', value: <%= raw Caboose.json(v.allow_backorder     ) %>, width: 50, fixed_placeholder: false } <% end %>     
+    ]
+  });
+  <% end %>
+  
+  $('#variants_tbody').sortable({
+    handle: '.sort_handle',
+    update: function(event, ui) {
+      $.ajax({
+        url: '/admin/products/<%= p.id %>/variants/sort-order',
+        type: 'put',
+        data: $('#variants_tbody').sortable('serialize', { key: 'variant_ids[]' }),
+        success: function(resp) {}
+      });        
+    }    
+  });
+});
+
+var modal = false;
+$(window).load(function() {
+  modal = new CabooseModal('100%');
+});
+
+</script>
+<% end %>

data/app/views/caboose/products/admin_edit_variants_single.html.erb

@@ -0,0 +1,68 @@
+<%
+p = @product
+v = @variant    
+%>
+<%= render :partial => 'caboose/products/admin_header' %>
+
+<p style='font-size: 75%;'><a href='/admin/products/<%= p.id %>/options'>Need options like color or size?</a></p>
+
+<table>
+  <tr>
+    <td valign='top'>
+<div id='variant_<%= v.id %>_alternate_id'       ></div>
+<div id='variant_<%= v.id %>_sku'                ></div>
+<div id='variant_<%= v.id %>_barcode'            ></div>                
+<div id='variant_<%= v.id %>_price'              ></div>
+<div id='variant_<%= v.id %>_quantity_in_stock'  ></div>
+<div id='variant_<%= v.id %>_allow_backorder'    ></div>
+<div id='variant_<%= v.id %>_taxable'            ></div>
+    </td><td valign='top'>
+<div id='variant_<%= v.id %>_status'             ></div>
+<div id='variant_<%= v.id %>_requires_shipping'  ></div>
+<div id='variant_<%= v.id %>_weight'             ></div>
+<div id='variant_<%= v.id %>_cylinder'           ></div>
+<div id='variant_<%= v.id %>_length'             ></div>
+<div id='variant_<%= v.id %>_width'              ></div>
+<div id='variant_<%= v.id %>_height'             ></div>
+    </td>
+  </tr>
+</table>
+<div id='message'></div>
+
+<%= render :partial => 'caboose/products/admin_footer' %>
+
+<% content_for :caboose_js do %>
+<script type='text/javascript'>
+
+$(document).ready(function() {
+  m = new ModelBinder({
+    name: 'Variant',
+    id: <%= v.id %>,
+    update_url: '/admin/variants/<%= v.id %>',
+    authenticity_token: '<%= form_authenticity_token %>',
+    attributes: [
+      { name: 'status'                    , nice_name: 'Status'                           , type: 'select'   , align: 'right' , value: <%= raw Caboose.json(v.status                     ) %>, text: <%= raw Caboose.json(v.status) %>, width: 250, options_url: '/admin/variants/status-options' },
+      { name: 'alternate_id'              , nice_name: 'Alternate ID'                     , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.alternate_id               ) %>, width: 250 },
+      { name: 'sku'                       , nice_name: 'SKU'                              , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.sku                        ) %>, width: 250 },                         
+      { name: 'barcode'                   , nice_name: 'Barcode'                          , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.barcode                    ) %>, width: 250 }, 
+      { name: 'price'                     , nice_name: 'Price'                            , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(sprintf("%.2f", v.price || 0 ) ) %>, width: 250 }, 
+      { name: 'quantity_in_stock'         , nice_name: 'Quantity'                         , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.quantity_in_stock          ) %>, width: 250 }, 
+      { name: 'weight'                    , nice_name: 'Weight (grams)'                   , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.weight                     ) %>, width: 250 }, 
+      { name: 'length'                    , nice_name: 'Length (in)'                      , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.length                     ) %>, width: 250 }, 
+      { name: 'width'                     , nice_name: 'Width (in)'                       , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.width                      ) %>, width: 250 }, 
+      { name: 'height'                    , nice_name: 'Height (in)'                      , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.height                     ) %>, width: 250 }, 
+      { name: 'cylinder'                  , nice_name: 'Cylinder'                         , type: 'checkbox' , align: 'right' , value: <%= raw Caboose.json(v.cylinder                   ) %>, width: 250 }, 
+      { name: 'requires_shipping'         , nice_name: 'Requires shipping'                , type: 'checkbox' , align: 'right' , value: <%= raw Caboose.json(v.requires_shipping          ) %>, width: 250 }, 
+      { name: 'taxable'                   , nice_name: 'Taxable'                          , type: 'checkbox' , align: 'right' , value: <%= raw Caboose.json(v.taxable                    ) %>, width: 250 },
+      { name: 'allow_backorder'           , nice_name: 'Allow backorder'                  , type: 'checkbox' , align: 'right' , value: <%= raw Caboose.json(v.allow_backorder            ) %>, width: 250 }             
+    ]
+  });
+});
+
+var modal = false;
+$(window).load(function() {
+  modal = new CabooseModal(800);
+});
+
+</script>
+<% end %>

data/app/views/caboose/products/admin_group_variants.html.erb

@@ -0,0 +1,433 @@
+<% content_for :caboose_css do %>
+	<style>
+		
+		/**
+		 * Sidebar
+		 */
+		
+		.sidebar { padding: 0 12px; }
+		.sidebar, .sidebar > section { overflow: hidden; }
+		
+		.sidebar > aside {
+			float: left;
+			margin-right: 12px;
+			width: 300px;
+		}
+		
+		/**
+		 * Media
+		 */
+		
+		.media, .media > section { overflow: hidden; }
+		
+		.media > aside {
+			float: left;
+			margin-right: 6px;
+		}	
+		
+		/**
+		 * Forms
+		 */
+		
+		form { overflow: hidden; }
+		form *, button { outline: none !important; }
+		button { cursor: pointer; }
+		
+		/* filters */
+		
+		form#filters { display: none; }
+		
+		form#filters fieldset {
+			border: none;
+			margin: 12px 0;
+			padding: 0;
+		}
+		
+		form#filters select {
+			height: 350px;
+			padding: 6px;
+		}
+		
+		form#filters label,
+		form#filters input[type=text],
+		form#filters select {
+			box-sizing: border-box;
+			display: block;
+			width: 100%;
+		}
+		
+		form#filters label + input,
+		form#filters input + label,
+		form#filters label + select,
+		form#filters select + label { margin: 12px 0 0; }
+		
+		input#category-filter,
+		input#vendor-filter { border-bottom: none; }
+		
+		/*select#categories.filtered option { display: none; }
+		select#categories.filtered option.show { display: block; }*/
+		
+		/* variants */
+		
+		form#variants fieldset {
+			border: none;
+			margin: 0;
+			padding: 0;
+		}
+		form#variants fieldset + fieldset { margin: 24px 0 0; }
+		
+		form#variants label {
+			background: #eee;
+			display: block;
+			margin: 0 0 12px;
+			padding: 12px;
+		}
+		form#variants label,
+		form#variants label * { cursor: pointer; }
+		
+		form#variants input[type=checkbox] {
+			height: 16px;
+			left: auto;
+			position: relative;
+			top: auto;
+		}
+		
+		form#variants ul.info {
+			font-size: 12px;
+			list-style-type: none;
+			padding: 0 0 0 12px;
+		}
+		
+		form#variants ul.info li { margin: 0 0 6px; }
+		
+	</style>
+<% end %>
+
+<%= render partial: 'caboose/products/admin_header' %>
+
+<button id="toggle-filters">Toggle Filters</button>
+<button id="toggle-info">Toggle Variant Info</button>
+
+<div class="sidebar">
+	<aside>
+		<form id="filters" action="/admin/products/<%= @product.id %>/variants/group" method="get">
+			<h4><label for="title">Title</label></h4>
+			<input id="title" name="title" type="text" />
+			
+			<h4><label for="categories">Categories</label></h4>
+			<input id="category-filter" type="text" autocomplete="off" />
+			<select id="categories" name="category_ids[]" multiple>
+				
+				<% @categories.each do |category| %>
+					<option value="<%= category.id %>"
+						<%= 'selected="selected"' if params[:category_ids] and params[:category_ids].include?(category.id.to_s) %>
+					><%= category.url.gsub('/products/', '') %></option>
+				<% end %>
+			</select>
+			
+			<h4><label for="vendors">Vendors</label><h4>
+			<input id="vendor-filter" type="text" autocomplete="off" />
+			<select id="vendors" name="vendor_ids[]" multiple>
+				<% @vendors.each do |vendor| %>
+					<option value="<%= vendor.id %>"
+						<%= 'selected="selected"' if params[:vendor_ids] and params[:vendor_ids].include?(vendor.id.to_s) %>
+					><%= vendor.name %></option>
+				<% end %>
+			</select>
+			
+			<fieldset>
+				<input id="clear" type="button" value="Clear" />
+				<input type="submit" value="Filter" />
+			</fieldset>
+		</form>
+	</aside>
+	
+	<section>
+		<h4>Variants</h4>
+		
+		<% if @variants.any? %>
+			<form id="variants" action="/admin/products/<%= @product.id %>/variants/add" method="post" data-product-id="<%= @product.id %>">
+				<fieldset>
+					<input class="remove" type="button" value="Remove these variants" />
+					<input class="check" type="button" value="Toggle Variants" />
+					<input type="submit" value="Add To Product" />
+				</fieldset>
+				
+				<fieldset>
+					<% @variants.each do |variant| %>
+						<label>
+							<div class="media">
+								<aside><input name="variant_ids[]" type="checkbox" value="<%= variant.id %>" /></aside>
+								
+								<section>
+									<%= variant.product.title %>
+									
+									<ul class="info">
+										<li><strong>SKU:</strong> <%= variant.sku %></li>
+										<li><strong>Vendor:</strong> <%= variant.product.vendor.name %></li>
+										
+										<% if variant.option1 %>
+											<li><strong><%= variant.product.option1 %>:</strong> <%= variant.option1 %></li>
+										<% end %>
+										
+										<% if variant.option2 %>
+											<li><strong><%= variant.product.option2 %>:</strong> <%= variant.option2 %></li>
+										<% end %>
+										
+										<% if variant.option3 %>
+											<li><strong><%= variant.product.option3 %>:</strong> <%= variant.option3 %></li>
+										<% end %>
+									</ul>
+								</section>
+							</div>
+						</label>
+					<% end %>
+				</fieldset>
+				
+				<fieldset>
+					<input class="remove" type="button" value="Remove these variants" />
+					<input class="check" type="button" value="Toggle Variants" />
+					<input type="submit" value="Add To Product" />
+				</fieldset>
+			</form>
+		<% else %>
+			<p>No variants to show.</p>
+		<% end %>
+	</section>
+</div>
+
+<%= render partial: 'caboose/products/admin_footer' %>
+
+<% content_for :caboose_js do %>
+	<%= javascript_include_tag 'underscore' %>
+	
+	<script>
+		window.count = <%= @variants.count %>;
+		
+		// Define categories
+		window.categories = <%= @categories.collect { |category|
+			{ id: category.id.to_s, url: category.url.gsub('/products/', ''), selected: false }
+		}.compact.to_json.html_safe %>;
+		
+		// Define vendors
+		window.vendors = <%= @vendors.collect { |vendor|
+			{ id: vendor.id.to_s, name: vendor.name, selected: false }
+		}.compact.to_json.html_safe %>;
+		
+		$(document).ready(function() {
+			
+			// Events
+			$('form#variants').on('submit', check_for_variants);
+			$('button#toggle-filters').on('click', toggle_filters);
+			$(document).on('click', '#categories option', persist_categories);
+			$(document).on('click', '#vendors option', persist_vendors);
+			$('input#category-filter').on('keyup', filter_categories);
+			$('input#vendor-filter').on('keyup', filter_vendors);
+			$('form#filters input#clear').on('click', clear_filters);
+			$('button#toggle-info').on('click', toggle_variant_info);
+			$('form#variants input.remove').on('click', remove_variants);
+			$('form#variants input.check').on('click', toggle_variants);
+			
+			// Show filters if there are no variants
+			if (window.count == 0) toggle_filters();
+			
+			// Check for filters to persist initially
+			
+			$('#categories option:selected').each(function(value, option) {
+				window.categories[ _.indexOf(_.pluck(window.categories, 'id'), $(this).val()) ].selected = true;
+			});
+			
+			$('#vendors option:selected').each(function(value, option) {
+				window.vendors[ _.indexOf(_.pluck(window.vendors, 'id'), $(this).val()) ].selected = true;
+			});
+		});
+		
+		// submit form#variants
+		function check_for_variants(event) {
+			event.preventDefault();
+			
+			var $form = $('form#variants');
+			
+			if ($('input:checked', $form).length) {
+				$form.off('submit').submit();
+			} else {
+				alert('No variants selected');
+			}
+		}
+		
+		// click button#toggle
+		function toggle_filters() {
+			$('form#filters').toggle();
+		}
+		
+		// click #categories option
+		function persist_categories() {
+			var selected_ids          = _.map($('#categories option:selected'), function(option) { return option.value })
+				, persisted_categories  = _.where(window.categories, {selected: true})
+				, clicked_id            = $(this).val()
+				, clicked_selected      = $(this).prop('selected');
+				
+			// Make sure the clicked_id is in the selected_ids selected or no
+			// It will be disabled if the selected status is false
+			if (!_.contains(selected_ids, clicked_id)) selected_ids.push(clicked_id);
+			
+			// Set the selected status
+			_.each(persisted_categories, function(category) {
+				
+				// Only change the selected status if it's listed on the page; for usability
+				if ($('#categories option[value=' + category.id + ']').length) {
+					category.selected = _.contains(selected_ids, category.id);
+				}
+			});
+			
+			// For each selected ID set the selected status
+			_.each(selected_ids, function(id) {
+				var selected = id == clicked_id ? clicked_selected : true;
+				window.categories[ _.indexOf(_.pluck(window.categories, 'id'), id) ].selected = selected;
+			});
+		}
+		
+		// click #vendors option
+		function persist_vendors() {
+			var selected_ids      = _.map($('#vendors option:selected'), function(option) { return option.value })
+				, persisted_vendors = _.where(window.vendors, {selected: true})
+				, clicked_id        = $(this).val()
+				, clicked_selected  = $(this).prop('selected');
+			
+			// Make sure the clicked_id is in the selected_ids selected or no
+			// It will be disabled if the selected status is false
+			if (!_.contains(selected_ids, clicked_id)) selected_ids.push(clicked_id);
+			
+			// Set the selected status
+			_.each(persisted_vendors, function(vendor) {
+				
+				// Only change the selected status if it's listed on the page; for usability
+				if ($('#vendors option[value=' + vendor.id + ']').length) {
+					vendor.selected = _.contains(selected_ids, vendor.id);
+				}
+			});
+			
+			// For each selected ID set the selected status
+			_.each(selected_ids, function(id) {
+				var selected = id == clicked_id ? clicked_selected : true;
+				window.vendors[ _.indexOf(_.pluck(window.vendors, 'id'), id) ].selected = selected;
+			});
+		}
+		
+		// keyup #category-filter
+		function filter_categories() {
+			var $categories = $('#categories');
+			
+			// Get value to test against from input
+			var string = $('#category-filter').val().toLowerCase();
+			
+			// Filter category names
+			var filtered_categories = _.filter(window.categories, function(category) {
+				return category.url.toLowerCase().indexOf(string) != -1;
+			});
+			
+			// Empty category select box
+			$categories.empty();
+			
+			// Append filtered category names
+			_.each(filtered_categories, function(category) {
+				var $option = $('<option/>');
+				
+				// Add value and text
+				$option.val(category.id);
+				$option.text(category.url);
+				
+				// Mark as selected if it was persisted
+				if (category.selected) $option.attr('selected', 'selected');
+				
+				// Append to container
+				$categories.append($option);
+			});
+		}
+		
+		// keyup #vendor-filter
+		function filter_vendors() {
+			var $vendors = $('#vendors');
+			
+			// Get value to test against from input
+			var string = $('#vendor-filter').val().toLowerCase();
+			
+			// Filter category names
+			var filtered_vendors = _.filter(window.vendors, function(vendor) {
+				return vendor.name.toLowerCase().indexOf(string) != -1;
+			});
+			
+			// Empty category select box
+			$vendors.empty();
+			
+			// Append filtered category names
+			_.each(filtered_vendors, function(vendor) {
+				var $option = $('<option/>');
+				
+				// Add value and text
+				$option.val(vendor.id);
+				$option.text(vendor.name);
+				
+				// Mark as selected if it was persisted
+				if (vendor.selected) $option.attr('selected', 'selected');
+				
+				// Append to container
+				$vendors.append($option);
+			});
+		}
+		
+		// form#filters input#clear
+		function clear_filters() {
+			var $filters = $('form#fitlers');
+			
+			// Clear all textboxes
+			$('form#filters input[type=text]').val('');
+			
+			// Clear all selects
+			$('form#filters option:selected').removeAttr('selected');
+			
+			// Clear persisted options
+			_.each(window.categories, function(category) { category.selected = false });
+			_.each(window.vendors, function(vendor) { vendor.selected = false });
+		}
+		
+		// click button#toggle-info
+		function toggle_variant_info() {
+			$('ul.info').toggle();
+		}
+		
+		// click form#variants input.check
+		function toggle_variants() {
+			var $variants = $('form#variants input[type=checkbox]:checked');
+			
+			// If there are checked checkboxes, uncheck them; Otherwise, check everything
+			if ($variants.length > 0) {
+				$variants.prop('checked', false)
+			} else {
+				$('form#variants input[type=checkbox]').prop('checked', true);
+			}
+		}
+		
+		// click form#variants input.remove
+		function remove_variants() {
+			var confirmed = confirm('Are you sure you want remove these items?');
+			
+			if (confirmed) {
+				var $variants = $('form#variants input[type=checkbox]:checked');
+				
+				if ($variants.length > 0) {
+					$.ajax({
+						type: 'post',
+						url: '/admin/products/' + $('form#variants').data('product-id') + '/variants/remove',
+						data: $('form#variants').serialize(),
+						success: function(response) {
+							console.log('foobar');
+						}
+					})
+				} else {
+					alert('No variants selected');
+				}
+			}
+		}
+	</script>
+<% end %>