caboose-store 0.0.10 → 0.0.11

data/app/assets/javascripts/caboose_store/modules/product.js

@@ -0,0 +1,282 @@
+//
+// Product
+//
+
+Caboose.Store.Modules.Product = (function() {
+  var self = {
+    templates: {
+      images: JST['caboose_store/product/images'],
+      options: JST['caboose_store/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.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() {
+    return _.map(self.getOptionsFromProduct(), function(optionName) {
+      return {
+        name: optionName,
+        values: _.uniq(_.map(self.product.variants, function(variant) {
+          return variant[self.getOptionAttribute(optionName)];
+        }))
+      };
+    });
+  };
+  
+  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 > 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 > 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) {
+    var $figure = self.$images.children('figure');
+    
+    if (variant.images && variant.images.length > 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_store/admin.css

@@ -14,7 +14,7 @@
  */
 
 #cboxLoadedContent { margin-bottom: 0; }
- 
+
 body {
   margin: 0;
   padding: 0;  
@@ -77,7 +77,7 @@ body {
   height: 80px;
   background: #e1e1e1;
   border-bottom: #aaa 1px solid;
-  font-size: 36pt;
+  font-size: 27px !important;
 }
 
 #content h1.model_attribute_h1 {
@@ -86,7 +86,7 @@ body {
   height: auto;
   background: transparent;
   border-bottom: none;
-  font-size: 36pt;
+  font-size: 27px !important;
 }
 
 p.current_page_editing {

data/app/assets/stylesheets/caboose_store/application.css

@@ -7,7 +7,7 @@
  *
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
- * 
+ *
  *= require colorbox-rails
  *= require caboose/fonts
  *= require caboose/page_bar_generator
@@ -15,4 +15,4 @@
  *= require application
  */
 
-#cboxLoadedContent { margin-bottom: 0; }
+#cboxLoadedContent { margin-bottom: 0; }

data/app/assets/stylesheets/caboose_store/modal.css

@@ -237,3 +237,4 @@ Modeljs
   clear: both;
   line-height: 0;  
 }
+

data/app/assets/templates/caboose_store/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_store/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">$<%= lineItem.price %></p>
+        </section>
+      </li>
+    <% }); %>
+    
+    <li>
+      <footer>
+        <a href="/checkout" class="btn blue">Proceed to 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_store/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>
+

data/app/assets/templates/caboose_store/checkout/forms/guest.jst.ejs

@@ -0,0 +1,8 @@
+<div class="wrapper">
+  <form action="/checkout/attach-guest" method="post">
+    <input name="email" type="text" placeholder="Email" />
+    <input name="confirm_email" type="email" placeholder="Confirm email" />
+    <input type="submit" value="Submit" />
+  </form>
+</div>
+

data/app/assets/templates/caboose_store/checkout/forms/register.jst.ejs

@@ -0,0 +1,11 @@
+<div class="wrapper">
+  <form action="/register" method="post">
+    <input name="first_name" type="text" placeholder="First Name" />
+    <input name="last_name" type="text" placeholder="Last Name" />
+    <input name="email" type="text" placeholder="Email" />
+    <input name="phone" type="text" placeholder="Phone" />
+    <input name="pass1" type="password" placeholder="Password" />
+    <input name="pass2" type="password" placeholder="Confirm Password" />
+    <input type="submit" value="Submit" />
+  </form>
+</div>

data/app/assets/templates/caboose_store/checkout/forms/signin.jst.ejs

@@ -0,0 +1,7 @@
+<div class="wrapper">
+  <form action="/login" method="post">
+    <input name="username" type="text" placeholder="Email" />
+    <input name="password" type="password" placeholder="Password" />
+    <input type="submit" value="Submit" />
+  </form>
+</div>

data/app/assets/templates/caboose_store/checkout/line_items.jst.ejs

@@ -0,0 +1,32 @@
+<p class="wrapper">Your Cart:</p>
+
+<ul>
+  <% _.each(order.line_items, function(lineItem) { %>
+    <li data-id="<%= lineItem.id %>">
+      <div class="wrapper">
+        <aside>
+          <figure style="background-image: url(<%= lineItem.variant.images[0].urls.thumb %>)"></figure>
+          <p><%= lineItem.title %><br />Qty: <%= lineItem.quantity %><br /><span class="price">$<%= ((parseFloat(lineItem.price) * 100) / 100).toFixed(2) %></span></p>
+        </aside>
+        
+        <section>
+          <p>$<%= ((parseFloat(lineItem.price) * 100) / 100).toFixed(2) %></p>
+        </section>
+      </div>
+    </li>
+  <% }); %>
+</ul>
+
+
+<p class="wrapper subtotal"><span>Subtotal:</span> <span>$<%= ((parseFloat(order.subtotal) * 100) / 100).toFixed(2) %></span></p>
+
+<% if (order.shipping > 0) { %>
+  <p class="wrapper shipping"><span>Shipping & Handling:</span> <span>$<%= (((parseFloat(order.shipping) + parseFloat(order.handling)) * 100) / 100).toFixed(2) %></span></p>
+<% } %>
+
+<% if (order.tax > 0 && order.billing_address.state == 'AL') { %>
+  <p class="wrapper tax"><span>Tax <small>(if in Alabama)</small>:</span> <span>$<%= parseFloat(Math.round(order.tax * 100) / 100).toFixed(2) %></span></p>
+<% } %>
+
+<p class="wrapper total"><span>Total:</span> <span>$<%= parseFloat(Math.round(order.total * 100) / 100).toFixed(2) %></span></p>
+

data/app/assets/templates/caboose_store/checkout/login.jst.ejs

@@ -0,0 +1,21 @@
+<div class="wrapper">
+  <ul>
+    <li>
+      <p>Already a member<p>
+      <button data-login-action="signin">Sign in</button>
+    </li>
+    
+    <li>
+      <p>Sign up for all of our member benefits</p>
+      <button data-login-action="register">New Customer</button>
+    </li>
+    
+    <li>
+      <p>No thanks</p>
+      <button data-login-action="continue">Continue As Guest</button>
+    </li>
+  </ul>
+</div>
+
+<section></section>
+

data/app/assets/templates/caboose_store/checkout/payment.jst.ejs

@@ -0,0 +1,5 @@
+<div class="wrapper">
+  <h3>Complete my purchase</h3>
+  <%= form %>
+</div>
+

data/app/assets/templates/caboose_store/checkout/shipping.jst.ejs

@@ -0,0 +1,18 @@
+<% if (rates) { %>
+  <section>
+    <div class="wrapper">
+      <h3>Shipping Method</h3>
+      <p>Please select how you would like your products to be delivered</p>
+      
+      <select name="shipping">
+        <option value="">Choose a shipping method</option>
+        
+        <% _.each(rates, function(rate) { %>
+          <option value="<%= rate.service_code %>" <% if (selectedRate && selectedRate.service_code == rate.service_code) { %>selected<% } %>>
+            <%= '$' + parseFloat(rate.total_price).toFixed(2) + ' - ' + rate.service_name  %>
+          </option>
+        <% }); %>
+      </select>
+    </div>
+  </section>
+<% } %>

data/app/assets/templates/caboose_store/product/images.jst.ejs

@@ -0,0 +1,8 @@
+<figure></figure>
+
+<ul>
+  <% _.each(images, function(image) { %>
+    <li data-id="<%= image.id %>"><figure style="background-image: url(<%= image.urls.thumb %>)" data-url-large="<%= image.urls.large %>"></figure></li>
+  <% }); %>
+</ul>
+

data/app/assets/templates/caboose_store/product/options.jst.ejs

@@ -0,0 +1,19 @@
+<!--<% _.each(options, function(option, index) { %>
+  <select id="<%= 'option' + (index + 1) %>" name="<%= option.name %>">
+    <option value="">Choose an Option</option>
+    
+    <% _.each(option.values, function(value) { %>
+      <option value="<%= value %>"><%= value %></option>
+    <% }); %>
+  </select>
+<% }); %>-->
+
+<% _.each(options, function(option, index) { %>
+  <h3><%= option.name %></h3>
+  <ul id="<%= 'option' + (index + 1) %>" data-name="<%= option.name %>">
+    <% _.each(option.values, function(value) { %>
+      <li data-value="<%= value %>"><%= value %></li>
+    <% }); %>
+  </ul>
+<% }); %>
+

data/app/controllers/caboose_store/application_controller.rb

@@ -3,16 +3,6 @@ module CabooseStore
   class ApplicationController < Caboose::ApplicationController
     protect_from_forgery
     layout 'layouts/caboose/application'
-    before_filter :init_cart
-    
-    def init_cart
-      return if session['cart_id'] && Order.exists?(session['cart_id'])
-      order = Order.new(:status => 'cart', :date_created => DateTime.now)    
-      order.referring_site = request.env['HTTP_REFERER']
-      order.landing_page = request.fullpath
-      order.landing_page_ref = params[:ref] if params[:ref]    
-      order.save    
-      session['cart_id'] = order.id;    
-    end
+    helper :all
   end
 end