caboose-store 0.0.2

data/app/views/caboose_store/products/details.html.erb

@@ -0,0 +1,437 @@
+<style type='text/css'>
+.heads { 
+  display: none; 
+}
+#easy_zoom img { min-width: 1200px; } 
+#easy_zoom {
+  width:550px;
+  height:400px; 
+  border:5px solid #eee;
+  background:#fff;
+  color:#333;
+  position:absolute;
+  top:148px;
+  left:635px;
+  overflow:hidden;
+  -moz-box-shadow:0 0 10px #777;
+  -webkit-box-shadow:0 0 10px #777;
+  box-shadow:0 0 10px #777;
+  /* vertical and horizontal alignment used for preloader text */
+  line-height:400px;
+  text-align:center;
+}
+#login-btn { cursor: pointer; }
+.thumbnail {
+  width: 60px !important; 
+  height: 60px !important; 
+  overflow: hidden !important;
+  padding: 1px !important; 
+  background-color: #ccc !important;
+}
+#itemsingle .carousel-indicators li:nth-child(3n) {
+  margin-right: 13px !important; 
+}
+a.zoom-image {
+  position: relative;
+  display: block;
+}
+a.zoom-image .fullsize-loading {
+  position:absolute;
+  z-index:150;
+}
+div.product_thumb_image {
+  overflow: hidden;
+}
+div.product_thumb_image img {
+  margin: 0 auto;
+}
+ol.carousel-indicators li.thumbnail { 
+  width: 100px; 
+  height: 100px; 
+}
+.product-review {
+  list-style:none;
+  margin-left:0;
+  padding:15px;
+}
+.product-review:nth-child(odd) {
+  background-color: rgb(240, 240, 240);
+}
+</style>
+<% p = @product %>
+
+<div class="page-content">
+    <div class="container">
+      <div class="row-fluid">
+        <div class="span12">
+          <ul class="breadcrumb">
+          <li><a href="/">Home</a>
+          <% if p.categories[1] %>
+          <span class="divider">/</span></li>
+          <% p.categories[1].ancestry.each do |c| %>
+            <% if c != p.categories[1] %> 
+              <li><a href="<%= c.url %>"><%= c.name %></a> <span class="divider">/</span></li>
+            <% else %>
+              <li><a href="<%= c.url %>"><%= c.name %></a></li>
+            <% end %>
+          <% end %>
+          <% else %>
+          </li>
+          <% end %>
+        </ul>
+        </div>
+      </div>
+      
+      <div class="row-fluid">
+        <div class="span12 single-item">
+          <div class="row-fluid">
+            <div class="span5">
+              <div id="itemsingle" class="carousel slide clearfix">
+              
+                <div class="carousel-inner">
+                 <% if p.product_images != [] %>
+                  <% p.product_images.each_index do |i| %>  
+                  <% if i == 0 %>
+                    <div class="item active" id="img_<%= p.product_images[i].id %>" style='position: relative;'>
+                  <% else %>
+                    <div class="item" id="img_<%= p.product_images[i].id %>" style='position: relative;'>
+                  <% end %>
+                      <a href="<%= p.product_images[i].url(:huge) %>" class="zoom-image" title="<%= p.title %>">
+                        <img src="<%= p.product_images[i].url(:large) %>" title="<%= p.title %>" />
+                      </a>              
+                    </div>
+                  <% end %>
+                </div>
+                
+                <ol class="carousel-indicators">
+                  <% p.product_images.each_index do |i| %>               
+                    <li class='thumbnail' id="thumb_<%= p.product_images[i].id %>" data-target="#itemsingle" data-slide-to="<%= i %>">                      
+                      <div class='product_thumb_image' style="<%= square_image(p.product_images[i]) %> height:100px; background-size:100px;"></div>
+                    </li>             
+                  <% end %>
+                </ol>
+                <% else %>
+                  <div class="item active" style='position: relative;'>
+                        <img src="https://dmwwflw4i3miv.cloudfront.net/placeholder.jpg" title="<%= p.title %>" />            
+                  </div>
+                  </div>
+                <% end 
+                # end p.product_images 
+                %>
+              
+              </div>
+            </div>
+            <div class="span7">
+              <h3><%= p.title %></h3>
+              <div class="row-fluid">
+                <div class="span6">
+                  <% if @average > 0 %>
+              <span class="rateit" data-rateit-value="<%= @average %>" data-rateit-ispreset="true" data-rateit-readonly="true" style="margin-bottom:10px;"></span>
+              <% end %>
+                  <% if p.option1 && p.option1.strip.length > 0 %>
+                    <% default = p.default1 ? p.default1 : p.variants[0].option1 %>
+                    <select name='option1' id='option1'>
+                      <optgroup label="Select a <%= p.option1 %>">
+                      <% p.variants.where(:status => 'Active').collect{|v| v.option1}.reject{|str| str.nil? }.uniq.sort.each do |v| %>
+                        <option value="<%= v %>"<%= raw v == default ? " selected='true'" : '' %>><%= v %></option>
+                      <% end %>                  
+                      </optgroup>
+                    </select>
+                    <br>
+                  <% end %>
+                  <% if p.option2 && p.option2.strip.length > 0 %>
+                    <% default = p.default2 ? p.default2 : p.variants[0].option2 %>
+                    <select name='option2' id='option2'>
+                      <optgroup label="Select a <%= p.option2 %>">
+                      <% p.variants.where(:status => 'Active').collect{|v| v.option2}.compact.uniq.sort.each do |v| %>
+                        <option value="<%= v %>"<%= raw v == default ? " selected='true'" : '' %>><%= v %></option>
+                      <% end %>
+                      </optgroup>
+                    </select>
+                    <br>
+                  <% end %>
+                  <% if p.option3 && p.option3.strip.length > 0 %>
+                    <% default = p.default3 ? p.default3 : p.variants[0].option3 %>
+                    <select name='option3' id='option3'>
+                      <optgroup label="Select a <%= p.option3 %>">
+                      <% p.variants.where(:status => 'Active').collect{|v| v.option3}.reject{|str| str.nil?}.uniq.sort.each do |v| %>
+                        <option value="<%= v %>"<%= raw v == default ? " selected='true'" : '' %>><%= v %></option>
+                      <% end %>
+                      </optgroup>
+                    </select>
+                    <br>
+                  <% end %>
+                  <span id='variant_qty'></span>
+                </div>
+                <div class="span6">
+                  <h4>$<span id="variant_price"><%= p.most_popular_variant.price %></span></h4>
+                  <p id="add_cart_btn"><a href="#" class="btn btn-warning btn-large"><i class="icon-shopping-cart"></i>&nbsp; Add to Cart</a></p>
+                  <p class="btn btn-warning btn-large" id="sold_out_btn" style="display:none;"><i class="icon-shopping-cart"></i>&nbsp; Sold Out</p>
+                </div>
+              </div>
+              <br><br>
+              <p><%= strip_tags(p.description) %></p>
+            </div>
+          </div>
+          
+          <div class="row-fluid">
+            <div class="span12">
+              <div class="tabbable">
+                <ul class="nav nav-tabs">
+                <li class="active"><a href="#tab1" data-toggle="tab">Product Features</a></li>
+                <li class=""><a href="#tab2" data-toggle="tab">Recent Reviews</a></li>
+                <li class=""><a href="#tab3" data-toggle="tab">Related Items</a></li>
+                </ul>
+                <div class="tab-content">
+                <div class="tab-pane active" id="tab1">
+                  <p><%= strip_tags(p.description) %></p>
+                </div>
+                <div class="tab-pane" id="tab2">
+                <ul>
+                <% if @reviews.present? %>
+                  <% @reviews.each do |r| %>
+                  <li class='product-review'>
+                  <% if r.rating && r.rating != 0 %>
+                  <div class="rateit" data-rateit-value="<%= r.rating %>" data-rateit-ispreset="true" data-rateit-readonly="true" style="margin-right:10px;"></div>
+                  <% end %>
+                  <span style="font-weight:bold;"><%= r.name %></span>
+                  <p><%= r.content %></p>
+                  </li>
+                  <% 
+                  end # @reviews.each do |r|
+                  %>
+                <% else %>
+                	<p>No reviews yet.</p>
+                <% 
+                end # if @reviews.present?
+                %>
+                </ul>
+                <span id="message"></span>
+                <div id="add-new-review">
+                  <hr style="display:block !important;"/>
+                  Submit Your Review
+                  <br>
+                  <div class="rateit" id="new-rating"></div>
+                  <br>
+                  <form id="new_review">                  
+                      <textarea name="content" cols="90" rows="3"></textarea>
+                      <input type="hidden" name="product_id" value='<%= p.id %>' /> 
+                  </form>
+                  <button id="submit_review">Submit</button>
+                  <br>
+                  <br>
+                </div>
+                <div id="login-section">
+                  <p>To submit a review, please <a id='login-btn'>log in</a>.</p>
+                </div>
+                </div>
+                <div class="tab-pane" id="tab3">
+                  <div class="row-fluid">
+                    <% if p.related_items && p.related_items.count > 0 %>                    
+                      <ul class="thumbnails">
+                        <% p.related_items.each do |p2| %>
+                          <li class="span4">
+                            <div class="thumbnail">
+                              <div class="caption-details">
+                                <h5><%= p2.title %></h5>
+                                <span class="price"><%= raw product_price(p2) %></span>
+                              </div>
+                            </div>
+                          </li>
+                        <% end %>                      
+                      </ul>
+                    <% else %>
+                      <p>This product doesn't have any related items yet.</p>                    
+                    <% end %>
+                  </div>
+                </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>        
+        <!--break-->      
+      </div>
+    </div>
+  </div>
+
+<%= content_for :caboose_js do %>
+<script type='text/javascript'>
+
+var option1 = <%= raw p.option1 ? p.option1.to_json : false %>;
+var option2 = <%= raw p.option2 ? p.option2.to_json : false %>;
+var option3 = <%= raw p.option3 ? p.option3.to_json : false %>;
+var default1 = <%= raw p.default1 ? p.default1.to_json : false %>;
+var default2 = <%= raw p.default2 ? p.default2.to_json : false %>;
+var default3 = <%= raw p.default3 ? p.default3.to_json : false %>;
+var variants = <%= raw Caboose.json(p.variants) %>;
+
+var quantities = {};
+
+function get_variant_for_options()
+{
+  var v1 = option1 ? $('#option1').val() : false;
+  var v2 = option2 ? $('#option2').val() : false;
+  var v3 = option3 ? $('#option3').val() : false;
+  
+  var variant = false;
+  $.each(variants, function(i, v) {
+    if (v.option1 == v1 && (!option2 || (v.option2 == v2 && (!option3 || v.option3 == v3)))) 
+    {
+      variant = v; 
+      return false;
+    }
+  });
+  return variant;  
+}
+
+function show_variant_image() {
+  var v = get_variant_for_options();
+  if (!v) return;
+
+  var rurl = "/variant-images/" + v.id;
+  $.ajax({
+    type: 'get',
+    url: rurl,
+    success: function(img) {
+       if(img) {
+         var image = "#img_" + img.id; 
+         var thumb = "#thumb_" + img.id; 
+         $(".item").removeClass("active");
+         $(".thumbnail").removeClass("active"); 
+         $(image).addClass("active"); 
+         $(thumb).addClass("active"); 
+     }
+    }
+  });
+}
+
+function set_status() 
+{
+  var v = get_variant_for_options();   
+  if (!v || v.quantity_in_stock == 0) 
+  {
+    $("#variant_qty").html("Sold Out").css("color","red");
+    $("#add_cart_btn").hide();
+    $("#sold_out_btn").show();
+    if (v && v.price > 0) $("#variant_price").html(v.price);
+  }
+  else 
+  {
+    $("#variant_qty").html("In Stock").css("color","green");
+    $("#add_cart_btn").show();
+    $("#sold_out_btn").hide();
+    if (v && v.price > 0) $("#variant_price").html(v.price);
+  }
+}
+
+function add_to_cart()
+{
+  var v = get_variant_for_options();
+  if (!v) return;
+
+  $.colorbox({
+    href: '/cart/add/' + v.id,
+    iframe: true, 
+    initialWidth: 400,
+    initialHeight: 200,
+    innerWidth: 400, 
+    innerHeight: 200,
+    scrolling: false,
+    transition: 'fade',
+    closeButton: false, 
+    onComplete: fix_colorbox, 
+    opacity: 0.50 
+  });  
+}
+
+// Added to application footer
+//function fix_colorbox() {
+//  var padding = 21; // 21 is default
+//  $("#cboxTopLeft"      ).css('background', '#111');
+//  $("#cboxTopRight"     ).css('background', '#111');
+//  $("#cboxBottomLeft"   ).css('background', '#111');
+//  $("#cboxBottomRight"  ).css('background', '#111');
+//  $("#cboxMiddleLeft"   ).css('background', '#111');
+//  $("#cboxMiddleRight"  ).css('background', '#111');
+//  $("#cboxTopCenter"    ).css('background', '#111');
+//  $("#cboxBottomCenter" ).css('background', '#111');
+//  $("#cboxClose"        ).hide();
+//  
+//  //var p = (padding-21)*2;
+//  //$("#cboxWrapper"      ).css('padding', '0 ' + p + ' ' + p + ' 0');
+//  //$('#cboxLoadedContent').css('margin-bottom', 0);
+//  //h = $('#cboxLoadedContent').height();
+//  //$('#cboxLoadedContent').css('height', ''+(h+28)+'px'); 
+//}
+
+$(document).ready(function() {
+  show_variant_image();
+  if (option1) $('#option1').change(function() { set_status(); show_variant_image(); });
+  if (option2) $('#option2').change(function() { set_status(); show_variant_image(); });
+  if (option3) $('#option3').change(function() { set_status(); show_variant_image(); });
+  set_status();  
+  $('.zoom-image').each( function() { $(this).easyZoom(); });
+  $('#add_cart_btn a').click(function(e) {
+    e.preventDefault();
+    add_to_cart();
+  });
+});
+
+
+</script>
+
+<% if @is_logged_in %>
+<script type='text/javascript'>
+$("#login-section").hide();
+$("#submit_review").click( function() {
+  var info = $("#new_review").serialize();
+  info += "&rating=" + $("#new-rating").rateit("value") + "&name=" + "<%= @first_name %>" + "+" + "<%= @last_name %>";  
+  $.post("/reviews/add", info, function(data, status) { window.location.reload(true); });
+  $("#add-new-review").slideUp();
+  $("#message").html("<p class='note success'>Review added successfully</p>");
+}); 
+
+</script>
+
+
+<% else %>
+<script type='text/javascript'>
+$("#add-new-review").hide();
+$("#login-btn").click( function() {
+  open_colorbox();  
+});
+
+function open_colorbox() {
+  $.colorbox({
+    href: '/login?return_url=/products/<%= p.id %>',
+    iframe: true,
+    innerWidth: 200,
+    innerHeight:  50,
+    scrolling: false,
+    transition: 'fade',
+    closeButton: false,
+    onComplete: fix_colorbox,
+    opacity: 0.50,
+  //  onClosed: function() { open_colorbox(); }   
+  });
+}
+
+function fix_colorbox() {
+  $("#cboxTopLeft"      ).css('background', '#111');
+  $("#cboxTopRight"     ).css('background', '#111');
+  $("#cboxBottomLeft"   ).css('background', '#111');
+  $("#cboxBottomRight"  ).css('background', '#111');
+  $("#cboxMiddleLeft"   ).css('background', '#111');
+  $("#cboxMiddleRight"  ).css('background', '#111');
+  $("#cboxTopCenter"    ).css('background', '#111');
+  $("#cboxBottomCenter" ).css('background', '#111');
+  $("#cboxClose"        ).hide(); 
+}
+
+</script>
+<% end %>
+
+
+<% end %>
+

data/app/views/caboose_store/products/index.html.erb

@@ -0,0 +1,46 @@
+
+<div id="catalogue">
+	<div class="container">
+		<div class="row-fluid">
+			<div class="span12">
+				<ul class="breadcrumb">
+					<li><a href="/">Home</a><span class="divider">/</span></li>
+					
+					<% @category.ancestry.each do |c| %>
+						<% if c != @category %> 
+							<li><a href="<%= c.url %>"><%= c.name %></a> <span class="divider">/</span></li>
+						<% else %>
+							<li><a href="<%= c.url %>"><%= c.name %></a></li>
+						<% end %>
+					<% end %>
+				</ul>
+			</div>
+		</div>
+		
+		<div class="row-fluid">
+			<div class="span12">
+				<h2><%= @category.name %></h2>
+				<ul class="thumbs">
+					
+					<% if @category.children && @category.children.count > 0 %>
+						<% @category.children.each do |cat| %>
+							<% if cat.id != 32 && cat.products != [] %>
+								<%= render partial: 'category_thumb', locals: {category: cat} %>
+							<% end %>
+						<% end %>
+					<% end %>
+					
+					<% if @category.products && @category.products.count > 0 %>
+						<% @category.products.each do |p| %>
+						  <% if p.status == "Active" && p.variants != [] %>
+								<%= render partial: 'product_thumb', locals: {product: p} %>
+							<% end %>
+						<% end %>
+					<% end %>
+					
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
+  

data/app/views/caboose_store/products/not_available.html.erb

@@ -0,0 +1,35 @@
+<% p = @product %>
+
+<div class="page-content">
+  <div class="container">
+    <div class="row-fluid">
+      <div class="span12">
+        <ul class="breadcrumb">
+          <li><a href="/">Home</a>
+            <% if p.categories[1] %>
+              <span class="divider">/</span></li>
+              <% p.categories[1].ancestry.each do |c| %>
+                <% if c != p.categories[1] %> 
+                  <li><a href="<%= c.url %>"><%= c.name %></a> <span class="divider">/</span></li>
+                <% else %>
+                  <li><a href="<%= c.url %>"><%= c.name %></a></li>
+                <% end %>
+              <% end %>
+            <% else %>
+              </li>
+            <% end %>
+        </ul>
+      </div>
+    </div>    
+    <div class="row-fluid">
+      <div class="span12 single-item">
+        <div class="row-fluid">            
+          <div class="span7">
+            <h3><%= p.title %></h3>
+            <p>This product is not currently available.</p>              
+          </div>
+        </div>                    
+      </div>        
+    </div>
+  </div>
+</div>

data/app/views/caboose_store/variants/admin_edit.html.erb

@@ -0,0 +1,80 @@
+<%
+p = @product
+v = @variant
+%>
+<h1>Edit Variant</h1>
+
+<table>
+  <tr>
+    <td valign='top'>
+<h2>Options</h2>
+<% if p.option1 %><div id='variant_<%= v.id %>_option1'></div><% end %>
+<% if p.option2 %><div id='variant_<%= v.id %>_option2'></div><% end %>
+<% if p.option3 %><div id='variant_<%= v.id %>_option3'></div><% end %>
+<div id='variant_<%= v.id %>_status'             ></div>
+<div id='variant_<%= v.id %>_requires_shipping'  ></div>
+<div id='variant_<%= v.id %>_allow_backorder'    ></div>
+<div id='variant_<%= v.id %>_taxable'            ></div>
+    </td><td valign='top'>
+<h2>Inventory</h2>
+<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>
+    </td><td valign='top'>
+<h2>Dimensions</h2>
+<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>
+<p>
+<input type='button' value='< Back' onclick="window.location='/admin/products/<%= p.id %>/variants';" />
+<input type='button' value='Delete Variant' onclick="delete_variant(<%= v.id %>);" />
+</p>
+
+<% content_for :caboose_js do %>
+<%= javascript_include_tag "caboose/model/all" %>
+<%= javascript_include_tag "admin_products" %>
+<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: [
+      <% if p.option1 %>{ name: 'option1' , nice_name: <%= raw Caboose.json(p.option1) %> , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.option1             ) %>, width: 250 },<% end %>
+      <% if p.option2 %>{ name: 'option2' , nice_name: <%= raw Caboose.json(p.option2) %> , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.option2             ) %>, width: 250 },<% end %>
+      <% if p.option3 %>{ name: 'option3' , nice_name: <%= raw Caboose.json(p.option3) %> , type: 'text'     , align: 'right' , value: <%= raw Caboose.json(v.option3             ) %>, width: 250 },<% end %>
+      { 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(v.price               ) %>, 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 }, 
+      { 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' }      
+    ]
+  });
+});
+
+var modal = false;
+$(window).load(function() {
+  modal = new CabooseModal(800);
+});
+
+</script>
+<% end %>

data/app/views/caboose_store/variants/admin_new.html.erb

@@ -0,0 +1,59 @@
+<%
+p = @product
+v = @variant
+%>
+<%= render :partial => 'caboose_store/products/admin_header' %>
+  
+<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 %>_taxable'></div>
+<div id='variant_<%= v.id %>_requires_shipping'></div>     
+    
+<div id='dimensions_container' style='display: hidden;'>
+  <h2>Dimensions</h2>              
+  <div id='variant_<%= v.id %>_weight'></div>
+  <div id='variant_<%= v.id %>_length'></div>
+  <div id='variant_<%= v.id %>_width'></div>
+  <div id='variant_<%= v.id %>_height'></div>
+  <div id='variant_<%= v.id %>_cylinder'></div>
+</div>
+
+<div id='message'></div>
+
+<%= render :partial => 'caboose_store/products/admin_footer' %>
+<% content_for :caboose_js do %>
+<%= javascript_include_tag "caboose/model/all" %>
+<%= javascript_include_tag "admin_products" %>
+<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: 'sku'                 , nice_name: 'SKU'                , type: 'text'     , align_right: true, value: <%= raw Caboose.json(v.sku                 ) %>, width: 250 },                         
+      { name: 'barcode'             , nice_name: 'Barcode'            , type: 'text'     , align_right: true, value: <%= raw Caboose.json(v.barcode             ) %>, width: 250 }, 
+      { name: 'price'               , nice_name: 'Price'              , type: 'text'     , align_right: true, value: <%= raw Caboose.json(v.price               ) %>, width: 250 }, 
+      { name: 'quantity_in_stock'   , nice_name: 'Quantity'           , type: 'text'     , align_right: true, value: <%= raw Caboose.json(v.quantity_in_stock   ) %>, width: 250 }, 
+      { name: 'weight'              , nice_name: 'Weight (grams)'     , type: 'text'     , align_right: true, value: <%= raw Caboose.json(v.weight              ) %>, width: 200 }, 
+      { name: 'length'              , nice_name: 'Length (in)'        , type: 'text'     , align_right: true, value: <%= raw Caboose.json(v.length              ) %>, width: 200 }, 
+      { name: 'width'               , nice_name: 'Width (in)'         , type: 'text'     , align_right: true, value: <%= raw Caboose.json(v.width               ) %>, width: 200 }, 
+      { name: 'height'              , nice_name: 'Height (in)'        , type: 'text'     , align_right: true, value: <%= raw Caboose.json(v.height              ) %>, width: 200 }, 
+      { name: 'cylinder'            , nice_name: 'Cylinder'           , type: 'checkbox' , align_right: true, value: <%= raw Caboose.json(v.cylinder            ) %>, width: 200 }, 
+      { name: 'requires_shipping'   , nice_name: 'Requires shipping'  , type: 'checkbox' , align_right: true, value: <%= raw Caboose.json(v.requires_shipping   ) %>, width: 250 }, 
+      { name: 'taxable'             , nice_name: 'Taxable'            , type: 'checkbox' , align_right: true, value: <%= raw Caboose.json(v.taxable             ) %>, width: 250 }               
+    ]
+  });
+});
+
+var modal = false;
+$(window).load(function() {
+  modal = new CabooseModal(800);
+});
+
+</script>
+<% end %>