caboose-cms 0.4.151 → 0.5.1

data/app/assets/javascripts/caboose/product.js

@@ -0,0 +1,284 @@
+//
+// Product
+//
+
+Caboose.Store.Modules.Product = (function() {
+  var self = {
+    templates: {
+      images: JST['caboose/product/images'],
+      options: JST['caboose/product/options']
+    }
+  };
+  
+  //
+  // Initialize
+  //
+  
+  self.initialize = function() {
+    self.$product = $('#product');
+    self.$price = self.$product.find('#product-price');
+    if (!self.$product.length) return false;
+    
+    $.get('/products/' + self.$product.data('id') + '/info', function(response) {
+      self.product = response.product;
+      self.option1_values = response.option1_values;
+      self.option2_values = response.option2_values;
+      self.option3_values = response.option3_values;
+      self.render();
+      self.bindEvents();
+      self.setVariant(self.getInitialVariant());
+      self.setOptionsFromVariant(self.variant);
+    });
+  };
+  
+  //
+  // Render
+  //
+  
+  self.render = function() {
+    var renderFunctions = [];
+    renderFunctions.push(self.renderImages);
+    renderFunctions.push(self.renderOptions);
+    
+    _.each(renderFunctions, function(renderFunction, index) {
+      var finished = index == (renderFunctions.length - 1);
+      
+      renderFunction(function() {
+        if (finished) self.$product.removeClass('loading');
+      });
+    });
+  };
+  
+  self.renderImages = function(callback) {
+    self.$images = $('#product-images', self.$product);
+    if (!self.$images.length) return false;
+    self.$images.empty().html(self.templates.images({ images: self.product.images }));
+    if (callback) callback();
+  };
+  
+  self.renderOptions = function(callback) {
+    self.$options = $('#product-options', self.$options);
+    if (!self.$options.length) return false;
+    self.$options.empty().html(self.templates.options({ options: self.getOptionsWithAllValues() }));
+    if (callback) callback();
+  };
+  
+  //
+  // Out of Stock
+  //
+  
+  self.outOfStock = function() {
+    self.$product.find('#add-to-cart').after($('<p/>').addClass('message error').text('Out of Stock')).remove();
+  };
+  
+  //
+  // Events
+  //
+  
+  self.bindEvents = function() {
+    self.$images.find('ul > li > figure').on('click', self.thumbClickHandler);
+    self.$images.children('figure').on('click', self.imageClickHandler);
+    self.$options.find('ul').on('click', 'li', self.optionClickHandler);
+  };
+  
+  self.thumbClickHandler = function(event) {
+    self.$images.children('figure').css('background-image', 'url(' + $(event.target).data('url-large') + ')');
+  };
+  
+  self.imageClickHandler = function(event) {
+    window.location = $(event.target).css('background-image').match(/^url\("(.*)"\)$/)[1];
+  };
+  
+  self.optionClickHandler = function(event) {
+    var $targetOption = $(event.delegateTarget)
+      , $targetValue = $(event.target);
+    
+    if ($targetValue.hasClass('selected')) {
+      $targetValue.removeClass('selected');
+      $targetValue = $();
+    } else {
+      $targetValue.addClass('selected').siblings().removeClass('selected');
+      
+      self.$options.find('ul').not($targetOption).each(function(index, element) {
+        var $currentOption = $(element)
+          , $currentValue = $currentOption.children('.selected')
+          , $otherOption = self.$options.find('ul').not($targetOption.add($currentOption))
+          , $otherValue = $otherOption.children('.selected')
+          , options = [];
+        
+        if (!$currentValue.length) return true;
+        
+        options.push({ name: $currentOption.data('name'), value: $currentValue.data('value') });
+        options.push({ name: $targetOption.data('name'), value: $targetValue.data('value') });
+        
+        if (!!!self.getVariantFromOptions(options)) {
+          $currentValue.removeClass('selected');
+        } else if ($otherOption.length && $otherValue.length) {
+          options.push({ name: $otherOption.data('name'), value: $otherValue.data('value') });
+          if (!!!self.getVariantFromOptions(options)) $otherValue.removeClass('selected');
+        }
+      });
+      
+      $targetOption.children().each(function(index, element) {
+        var $currentOption = $targetOption
+          , $currentValue = $(element)
+          , $otherOption = self.$options.find('ul').not($targetOption).first()
+          , $otherValue = $otherOption.children('.selected')
+          , $otherOtherOption = self.$options.find('ul').not($targetOption.add($otherOption))
+          , $otherOtherValue = $otherOtherOption.children('.selected')
+          , options = [];
+        
+        options.push({ name: $currentOption.data('name'), value: $currentValue.data('value') });
+        if ($otherOption.length && $otherValue.length) options.push({ name: $otherOption.data('name'), value: $otherValue.data('value') });
+        if ($otherOtherOption.length && $otherOtherValue.length) options.push({ name: $otherOtherOption.data('name'), value: $otherOtherValue.data('value') });
+        self.toggleOptionValue($currentValue, !!self.getVariantFromOptions(options));
+      });
+    }
+    
+    self.$options.find('ul').not($targetOption).each(function(index, element) {
+      var $currentOption = $(element);
+      
+      $currentOption.children().each(function(index, element) {
+        var $currentValue = $(element)
+          , $otherOption = self.$options.find('ul').not($targetOption.add($currentOption))
+          , $otherValue = $otherOption.children('.selected')
+          , options = [];
+        
+        options.push({ name: $currentOption.data('name'), value: $currentValue.data('value') });
+        if ($targetOption.length && $targetValue.length) options.push({ name: $targetOption.data('name'), value: $targetValue.data('value') });
+        if ($otherOption.length && $otherValue.length) options.push({ name: $otherOption.data('name'), value: $otherValue.data('value') });
+        self.toggleOptionValue($currentValue, !!self.getVariantFromOptions(options));
+      });
+    });
+    
+    self.setVariant(self.getVariantFromOptions(self.getCurrentOptions()));
+  };
+  
+  //
+  // Option Methods
+  //
+  
+  self.getOptionsFromProduct = function() {
+    return _.compact([
+      self.product.option1 ? self.product.option1 : undefined,
+      self.product.option2 ? self.product.option2 : undefined,
+      self.product.option3 ? self.product.option3 : undefined
+    ]);
+  };
+  
+    
+  self.getOptionsFromVariant = function(variant) {
+    return _.compact([
+      self.product.option1 ? { name: self.product.option1, value: variant.option1 } : undefined,
+      self.product.option2 ? { name: self.product.option2, value: variant.option2 } : undefined,
+      self.product.option3 ? { name: self.product.option3, value: variant.option3 } : undefined
+    ]);
+  };
+  
+  self.getOptionsWithAllValues = function() {
+    var options = [];
+    if (self.product.option1) options.push({ name: self.product.option1, values: self.option1_values });
+    if (self.product.option2) options.push({ name: self.product.option2, values: self.option2_values });
+    if (self.product.option3) options.push({ name: self.product.option3, values: self.option3_values });
+    return options;          
+  };
+  
+  self.getOptionAttribute = function(option) {
+    optionName = _.isObject(option) ? option.name : option;
+    
+    if (self.product.option1 == optionName) {
+      return 'option1';
+    } else if (self.product.option2 == optionName) {
+      return 'option2';
+    } else if (self.product.option3 == optionName) {
+      return 'option3';
+    }
+  };
+  
+  self.getCurrentOptions = function() {
+    var options = [];
+    
+    self.$options.children('ul').each(function(index, element) {
+      var $option = $(element);
+      
+      options.push({
+        name: $option.data('name'),
+        value: $option.children('.selected').first().data('value')
+      });
+    });
+    
+    return options;
+  };
+  
+  self.toggleOptionValue = function($value, on) {
+    if (on) {
+      $value.addClass('available').removeClass('unavailable');
+    } else {
+      $value.addClass('unavailable').removeClass('available selected');
+    }
+  };
+  
+  //
+  // Variant Methods
+  //
+  
+  self.getInitialVariant = function () {
+    var variant = _.find(self.product.variants, function(variant) {
+      return variant.quantity_in_stock > 0;
+    });
+    
+    if (!variant) {
+      variant = _.first(self.product.variants);
+      self.outOfStock();
+    }
+    
+    return variant;
+  };
+  
+  self.getVariantFromOptions = function(options) {
+    if (_.find(options, function(option) { return option.value == undefined })) return false;
+    
+    var attributes = _.object(_.map(options, function(option) {
+      return [self.getOptionAttribute(option.name), option.value.toString()]
+    }));
+    
+    var variants = _.sortBy(_.where(self.product.variants, attributes), function(variant) { return variant.price });
+    return _.find(variants, function(variant) { return variant.quantity_in_stock > 0 });
+  };
+  
+  self.setOptionsFromVariant = function(variant) {
+    if (variant.option1) $('#option1 li[data-value="' + variant.option1 + '"]', self.$options).click();
+    if (variant.option1) $('#option2 li[data-value="' + variant.option2 + '"]', self.$options).click();
+    if (variant.option1) $('#option3 li[data-value="' + variant.option3 + '"]', self.$options).click();
+  };
+  
+  self.setVariant = function(variant) {
+    self.variant = variant;
+    Caboose.Store.Modules.Cart.setVariant(variant);
+    if (variant) self.setImageFromVariant(variant);
+    if (variant && self.$price.length) self.$price.empty().text('$' + parseFloat((variant.price * 100) / 100).toFixed(2));
+  };
+  
+  self.getVariant = function(id) {
+    return _.find(self.product.variants, function(variant) { return variant.id == (id || self.variant.id) });
+  };
+  
+  //
+  // Image Methods
+  //
+  
+  self.setImageFromVariant = function(variant) {    
+    if (!variant || !variant.images || variant.images.length == 0 || !variant.images[0]) return;
+    self.$product.trigger('variant:updated');
+    
+    var $figure = self.$images.children('figure');   
+    if (variant.images && variant.images.length > 0 && variant.images[0]) {
+      $figure.css('background-image', 'url(' + variant.images[0].urls.large + ')');
+    } else if ($figure.css('background-image').toLowerCase() == 'none') {
+      $figure.css('background-image', 'url(' + _.first(self.product.images).urls.large + ')');
+    }
+  };
+  
+  return self;
+}).call(Caboose.Store);
+

data/app/assets/stylesheets/caboose/admin_products.css

@@ -0,0 +1,86 @@
+
+#modal_tabs { 
+  width: 200px;
+  float: left;  
+  /*
+  position: absolute;
+  top: 41px;
+  left: 0;
+  */
+  list-style: none; 
+  margin: 0; 
+  padding: 0;
+  border-top: #ccc 1px solid;
+}
+#modal_tabs ul li { 
+  list-style: none; 
+  margin: 0; 
+  padding: 0; 
+}
+#modal_tabs li.back {
+  padding: 10px 0;
+}
+#modal_tabs a {
+  display: block;
+  margin: 0;
+  padding: 16px 12px 12px 12px;
+  text-decoration: none;
+  background: #efefef;
+  border-bottom: #ccc 1px solid;
+  color: #000;
+}
+#modal_tabs a:hover {
+  background: #666;
+  color: #fff;  
+}
+#modal_tabs li.selected a {
+  background: transparent;
+  color: #000;
+  font-weight: bold;  
+}
+#modal_content2 {
+  margin-left: 220px; 
+}
+#modal_content h1 {
+  height: 30px;
+  padding-bottom: 10px;
+  border-bottom: #666 1px dotted;
+}
+#variants_wrapper {
+  width: 100%;
+}
+#variants {
+  border-collapse: collapse; 
+}
+#variants td {
+  margin: 0;
+  padding: 0;
+  border: #666 1px dotted;
+}
+#variants td input[type='text'] {
+  background: transparent;
+  color: #000;
+  border: 0;
+  font-size: 75%;
+}
+#variants th {
+  font-size: 85%;
+}
+#variants td.edit a {
+  display: block;
+  padding: 12px 12px;
+  border: 0;  
+}
+#variants td.edit a:hover {
+  background: #333;
+  color: #fff;  
+}
+#variants td.delete a {
+  display: block;
+  padding: 12px 12px;
+  border: 0;  
+}
+#variants td.delete a:hover {
+  background: #333;
+  color: #fff;  
+}

data/app/assets/templates/caboose/cart/add_to_cart.jst.ejs

@@ -0,0 +1,7 @@
+<form action="/cart/items" method="post">
+  <input type="hidden" name="variant_id" />
+  <label for="quantity">Qty:</label>
+  <input type="text" name="quantity" value="1" />
+  <input type="submit" value="Add To Cart" />
+</form>
+

data/app/assets/templates/caboose/cart/line_items.jst.ejs

@@ -0,0 +1,41 @@
+<h3>Shopping Cart</h3>
+
+<% if (!order.line_items.length) { %>
+  <p>Your cart is currently empty. <a href="/products">Click here</a> to continue shopping.</p>
+<% } else { %>
+  <ul>
+    <li>
+      <header>Quantity</header>
+      <header>Price</header>
+    </li>
+    
+    <% _.each(order.line_items, function(lineItem) { %>
+      <li data-id="<%= lineItem.id %>">
+        <section>
+          <% if (lineItem.variant.images.length > 0) { %>
+            <figure style="background-image: url(<%= lineItem.variant.images[0].urls.thumb %>)"></figure>
+          <% } else { %>
+            <figure style="background-image: url(<%= lineItem.product.images[0].urls.thumb %>)"></figure>
+          <% } %>
+          
+          <p><%= lineItem.title %><br /><a id="remove-from-cart"t="remove">Remove</a><a href="/products/<%= lineItem.variant.product_id %>">View</a></p>
+        </section>
+        
+        <section>
+          <input name="quantity" type="text" value="<%= lineItem.quantity %>" />
+        </section>
+        
+        <section>
+          <p class="price">$<%= parseFloat(Math.round(lineItem.price * 100) / 100).toFixed(2)  %></p>
+        </section>
+      </li>
+    <% }); %>
+    
+    <li>
+      <footer>
+        <a href="/checkout" class="btn blue">Checkout</a>
+        <h4>Subtotal: <span class="subtotal">$<%= parseFloat(Math.round(order.subtotal * 100) / 100).toFixed(2) %></span></h4>
+      </footer>
+    </li>
+  </ul>
+<% } %>

data/app/assets/templates/caboose/checkout/address.jst.ejs

@@ -0,0 +1,53 @@
+<div class="wrapper">
+  <form  action="/checkout/address" method="put">
+    <section>
+      <fieldset id="shipping">
+        <h3>Shipping Address</h3>
+        <label><span>First Name</span> <input name="shipping[first_name]" type="text" value="<%= shippingAddress ? shippingAddress.first_name : "" %>" /></label>
+        <label><span>Last Name</span> <input name="shipping[last_name]" type="text" value="<%= shippingAddress ? shippingAddress.last_name : "" %>" /></label>
+        <label><span>Company</span> <input name="shipping[company]" type="text" value="<%= shippingAddress ? shippingAddress.company : "" %>" /></label>
+        <label><span>Address 1</span> <input name="shipping[address1]" type="text" value="<%= shippingAddress ? shippingAddress.address1 : "" %>" /></label>
+        <label><span>Address 2</span> <input name="shipping[address2]" type="text" value="<%= shippingAddress ? shippingAddress.address2 : "" %>" /></label>
+        <label><span>City</span> <input name="shipping[city]" type="text" value="<%= shippingAddress ? shippingAddress.city : "" %>" /></label>
+        
+        <label>
+          <span>State</span>
+          
+          <select name="shipping[state]">
+            <% _.each(states, function(state, abbr) { %>
+              <option value="<%= abbr %>" <%= shippingAddress && shippingAddress.state == abbr ? 'selected' : "" %>><%= state %></option>
+            <% }); %>
+          </select>
+        </label>
+        
+        <label><span>Zip</span> <input name="shipping[zip]" type="text" value="<%= shippingAddress ? shippingAddress.zip : "" %>" /></label>
+        <label><input name="use_as_billing" type="checkbox" value="false" /> Use as billing address</label>
+      </fieldset>
+    </section>
+    
+    <section>
+      <fieldset id="billing">
+        <h3>Billing Address</h3>
+        <label><span>First Name</span> <input name="billing[first_name]" type="text" value="<%= billingAddress ? billingAddress.first_name : "" %>" /></label>
+        <label><span>Last Name</span> <input name="billing[last_name]" type="text" value="<%= billingAddress ? billingAddress.last_name : "" %>" /></label>
+        <label><span>Company</span> <input name="billing[company]" type="text" value="<%= billingAddress ? billingAddress.company : "" %>" /></label>
+        <label><span>Address 1</span> <input name="billing[address1]" type="text" value="<%= billingAddress ? billingAddress.address1 : "" %>" /></label>
+        <label><span>Address 2</span> <input name="billing[address2]" type="text" value="<%= billingAddress ? billingAddress.address2 : "" %>" /></label>
+        <label><span>City</span> <input name="billing[city]" type="text" value="<%= billingAddress ? billingAddress.city : "" %>" /></label>
+        
+        <label>
+          <span>State</span>
+          
+          <select name="billing[state]">
+            <% _.each(states, function(state, abbr) { %>
+              <option value="<%= abbr %>" <%= billingAddress && billingAddress.state == abbr ? 'selected' : "" %>><%= state %></option>
+            <% }); %>
+          </select>
+        </label>
+        
+        <label><span>Zip</span> <input name="billing[zip]" type="text" value="<%= billingAddress ? billingAddress.zip : "" %>" /></label>
+      </fieldset>
+    </section>
+  </form>
+</div>
+