spree_variant_options 0.1.0.rc1

data/features/support/env.rb

@@ -0,0 +1,56 @@
+# IMPORTANT: This file is generated by cucumber-rails - edit at your own peril.
+# It is recommended to regenerate this file in the future when you upgrade to a 
+# newer version of cucumber-rails. Consider adding your own code to a new file 
+# instead of editing this one. Cucumber will automatically load all features/**/*.rb
+# files.
+
+require 'spork'
+
+ENV["RAILS_ROOT"] = File.expand_path("../../../test/dummy", __FILE__)
+ 
+Spork.prefork do
+  require 'cucumber/rails'
+  require 'capybara/rails'
+  require 'capybara/cucumber'
+  require 'capybara/session'
+  require 'factory_girl'
+  require 'faker'
+  
+  I18n.reload!
+  
+  Capybara.default_driver   = :selenium
+  Capybara.default_selector = :css
+end
+ 
+Spork.each_run do
+
+  # By default, any exception happening in your Rails application will bubble up
+  # to Cucumber so that your scenario will fail. This is a different from how 
+  # your application behaves in the production environment, where an error page will 
+  # be rendered instead.
+  #
+  # Sometimes we want to override this default behaviour and allow Rails to rescue
+  # exceptions and display an error page (just like when the app is running in production).
+  # Typical scenarios where you want to do this is when you test your error pages.
+  # There are two ways to allow Rails to rescue exceptions:
+  #
+  # 1) Tag your scenario (or feature) with @allow-rescue
+  #
+  # 2) Set the value below to true. Beware that doing this globally is not
+  # recommended as it will mask a lot of errors for you!
+  #
+  ActionController::Base.allow_rescue = false
+  
+  # doesn't seem to work :/
+  Cucumber::Rails::World.use_transactional_fixtures = false
+  # Remove/comment out the lines below if your app doesn't have a database.
+  # For some databases (like MongoDB and CouchDB) you may need to use :truncation instead.
+  begin
+    DatabaseCleaner.strategy = :transaction
+  rescue NameError
+    raise "You need to add database_cleaner to your Gemfile (in the :test group) if you wish to use it."
+  end
+  
+  Dir["#{File.expand_path("../../../", __FILE__)}/test/support/**/*.rb"].each { |f| require f }
+  
+end

data/features/support/factories.rb

@@ -0,0 +1,45 @@
+FactoryGirl.define do
+
+  factory :product do
+    name "Very Wearily Variantly"
+    description "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla nonummy aliquet mi. Proin lacus. Ut placerat. Proin consequat, justo sit amet tempus consequat, elit est adipiscing odio, ut egestas pede eros in diam. Proin varius, lacus vitae suscipit varius, ipsum eros convallis nisi, sit amet sodales lectus pede non est. Duis augue. Suspendisse hendrerit pharetra metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur nec pede. Quisque volutpat, neque ac porttitor sodales, sem lacus rutrum nulla, ullamcorper placerat ante tortor ac odio. Suspendisse vel libero. Nullam volutpat magna vel ligula. Suspendisse sit amet metus. Nunc quis massa. Nulla facilisi. In enim. In venenatis nisi id eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sit amet felis sed lectus tincidunt egestas. Mauris nibh."
+    available_on { Time.zone.now - 1.day }
+    permalink "very-wearily-variantly"
+    price 17.00
+    count_on_hand 10
+  end
+  
+  factory :product_with_variants, :parent => :product do
+    after_create { |product|
+      sizes = %w(Small Medium Large X-Large).map{|i| Factory.create(:option_value, :presentation => i) }
+      colors = %w(Red Green Blue Yellow Purple Gray Black White).map{|i| 
+        Factory.create(:option_value, :presentation => i, :option_type => OptionType.find_by_name("color") || Factory.create(:option_type, :presentation => "Color")) 
+      }
+      product.variants = sizes.map{|i| colors.map{|j| Factory.create(:variant, :product => product, :option_values => [i, j]) }}.flatten
+      product.option_types = OptionType.where(:name => %w(size color))
+    }
+  end
+  
+  factory :variant do
+    product { Product.last || Factory.create(:product) }
+    option_values { [OptionValue.last || Factory.create(:option_value)] }
+    sequence(:sku) { |n| "ROR-#{1000 + n}" }
+    sequence(:price) { |n| 19.99 + n }
+    cost_price 17.00
+    count_on_hand 10
+  end
+  
+  factory :option_type do
+    presentation "Size"
+    name { presentation.downcase }
+    sequence(:position) {|n| n }
+  end
+  
+  factory :option_value do
+    presentation "Large"
+    name { presentation.downcase }
+    option_type { OptionType.last || Factory.create(:option_type) }
+    sequence(:position) {|n| n }
+  end
+
+end

data/features/support/helper_methods.rb

@@ -0,0 +1,28 @@
+module HelperMethods
+  
+  # Checks for missing translations after each test
+  def teardown
+    unless source.blank?
+      matches = source.match(/translation[\s-]+missing[^"]*/) || []
+      assert_equal 0, matches.length, "Translation Missing! - #{matches[0]}"
+    end
+  end
+  
+  # An assertion for ensuring content has made it to the page.
+  #    
+  #    assert_seen "Site Title"
+  #    assert_seen "Peanut Butter Jelly Time", :within => ".post-title h1"
+  #      
+  def assert_seen(text, opts={})
+    if opts[:within]
+      within(opts[:within]) do
+        assert has_content?(text)
+      end
+    else
+      assert has_content?(text)
+    end
+  end
+  
+end
+
+World(HelperMethods)

data/features/support/paths.rb

@@ -0,0 +1,36 @@
+module NavigationHelpers
+  # Maps a name to a path. Used by the
+  #
+  #   When /^I go to (.+)$/ do |page_name|
+  #
+  # step definition in web_steps.rb
+  #
+  def path_to(page_name)
+    case page_name
+
+    when /the home\s?page/
+      '/'
+    when /the new post page/
+      new_post_path
+
+
+    # Add more mappings here.
+    # Here is an example that pulls values out of the Regexp:
+    #
+    #   when /^(.*)'s profile page$/i
+    #     user_profile_path(User.find_by_login($1))
+
+    else
+      begin
+        page_name =~ /the (.*) page/
+        path_components = $1.split(/\s+/)
+        self.send(path_components.push('path').join('_').to_sym)
+      rescue Object => e
+        raise "Can't find mapping from \"#{page_name}\" to a path.\n" +
+          "Now, go and add a mapping in #{__FILE__}"
+      end
+    end
+  end
+end
+
+World(NavigationHelpers)

data/features/support/selectors.rb

@@ -0,0 +1,39 @@
+module HtmlSelectorsHelpers
+  # Maps a name to a selector. Used primarily by the
+  #
+  #   When /^(.+) within (.+)$/ do |step, scope|
+  #
+  # step definitions in web_steps.rb
+  #
+  def selector_for(locator)
+    case locator
+
+    when /the page/
+      "html > body"
+
+    # Add more mappings here.
+    # Here is an example that pulls values out of the Regexp:
+    #
+    #  when /the (notice|error|info) flash/
+    #    ".flash.#{$1}"
+
+    # You can also return an array to use a different selector
+    # type, like:
+    #
+    #  when /the header/
+    #    [:xpath, "//header"]
+
+    # This allows you to provide a quoted selector as the scope
+    # for "within" steps as was previously the default for the
+    # web steps:
+    when /"(.+)"/
+      $1
+
+    else
+      raise "Can't find mapping from \"#{locator}\" to a selector.\n" +
+        "Now, go and add a mapping in #{__FILE__}"
+    end
+  end
+end
+
+World(HtmlSelectorsHelpers)

data/features/variant_options.feature

@@ -0,0 +1,108 @@
+@no-txn @javascript
+Feature: Products should have variant options
+  A Product's variants should be broken out into options
+  
+  Scenario: Display options when visiting a product
+    Given I have a product with variants
+    And I'm on the product page for the first product
+    Then the source should contain the options hash
+    And I should see enabled links for the first option type
+    And I should see disabled links for the second option type
+    And I should have a hidden input for the selected variant
+    And the add to cart button should be disabled
+  
+  Scenario: Interact with options for a product
+    Given I have a product with variants
+    And I'm on the product page for the first product
+    When I follow "Small" within the first set of options
+    Then I should see enabled links for the second option type
+    And the add to cart button should be disabled
+    When I follow "Green" within the second set of options
+    Then the add to cart button should be enabled
+    When I follow "Medium" within the first set of options
+    And I should see enabled links for the second option type
+    And the add to cart button should be disabled
+    When I follow "Red" within the second set of options
+    And the add to cart button should be enabled
+      
+  Scenario: Should show out of stock for appropriate variants
+    Given I have a product with variants
+    And the "Small Green" variant is out of stock
+    And I'm on the product page for the first product
+    When I follow "Small" within the first set of options
+    Then I should see an out-of-stock link for "Green"
+    And I should see an in-stock link for "Red, Blue, Black, White, Gray"
+  
+  Scenario: Should clear current selection
+    Given I have a product with variants
+    And I'm on the product page for the first product
+    When I follow "Small" within the first set of options
+    And I click the current clear button
+    Then I should see disabled links for the second option type
+    And I should see enabled links for the first option type
+          
+  Scenario: Should clear current selection and maintain parent selection 
+    Given I have a product with variants
+    And I'm on the product page for the first product
+    When I follow "Small" within the first set of options
+    And I follow "Green" within the second set of options
+    Then the add to cart button should be enabled
+    And I click the last clear button
+    Then I should see "Small" selected within the first set of options
+    And I should see enabled links for the second option type
+    And the add to cart button should be disabled
+          
+  Scenario: Should clear current selection and parent selection 
+    Given I have a product with variants
+    And I'm on the product page for the first product
+    When I follow "Small" within the first set of options
+    And I follow "Green" within the second set of options
+    Then the add to cart button should be enabled
+    And I click the first clear button
+    Then I should not see a selected option
+    And I should see disabled links for the second option type
+    And I should see enabled links for the first option type
+    And the add to cart button should be disabled
+            
+  Scenario: Should add proper variant to cart
+    Given I have a product with variants
+    And I'm on the product page for the first product
+    When I follow "Small" within the first set of options
+    And I follow "Green" within the second set of options
+    Then the add to cart button should be enabled
+    And I press "Add To Cart"
+    Then I should be on the cart page
+    And I should see "Size: Small, Color: Green"
+    
+  Scenario: Should auto-select variant if its the only option
+    Given I have a product with variants
+    And I have an "XXL Turquoise" variant
+    And I'm on the product page for the first product
+    When I follow "XXL" within the first set of options
+    Then I should see "Turquoise" selected within the second set of options
+    And the add to cart button should be enabled
+    When I follow "Small" within the first set of options  
+    Then the add to cart button should be disabled
+  
+  Scenario: Should adjust price according to variant
+    Given I have a product with variants
+    And I have an "XXS Turquoise" variant for $29.99
+    And I have an "XXS Pink" variant for $24.99
+    And I'm on the product page for the first product
+    When I follow "XXS" within the first set of options
+    Then I should see "$24.99 - $29.99" in the price
+    When I follow "Turquoise" within the second set of options
+    Then I should see "$29.99" in the price
+    And the add to cart button should be enabled
+    When I follow "Pink" within the second set of options
+    Then I should see "$24.99" in the price
+    And the add to cart button should be enabled
+    
+  Scenario: Should show variant images when a selection is made
+    Given I have a product with variants
+    And I'm on the product page for the first product
+    When I follow "Small" within the first set of options
+    And I follow "Green" within the second set of options
+    Then the add to cart button should be enabled
+    And I should see "Small Green" in the variant images label # its hidden but it's there!
+    

data/lib/dummy_hooks/after_migrate.rb.sample

@@ -0,0 +1 @@
+rake "db:migrate db:seed db:sample", :env => "development"

data/lib/dummy_hooks/before_migrate.rb

@@ -0,0 +1 @@
+rake "spree_core:install spree_sample:install"

data/lib/spree_variant_options.rb

@@ -0,0 +1,26 @@
+require 'spree_core'
+require 'spree_sample' unless Rails.env == 'production'
+
+module SpreeVariantOptions
+
+  class Engine < Rails::Engine
+
+    config.autoload_paths += %W(#{config.root}/lib)
+
+    initializer "static assets" do |app|
+      app.middleware.insert_before ::Rack::Lock, ::ActionDispatch::Static, "#{config.root}/public"
+    end
+        
+    def self.activate
+      
+      Dir.glob(File.join(File.dirname(__FILE__), "../app/**/*_decorator.rb")) do |c|
+        Rails.env.production? ? require(c) : load(c)
+      end
+      
+    end
+
+    config.to_prepare &method(:activate).to_proc
+    
+  end
+  
+end

data/lib/spree_variant_options/version.rb

@@ -0,0 +1,3 @@
+module SpreeVariantOptions
+  VERSION = "0.1.0.rc1"
+end

data/public/javascripts/product.js

@@ -0,0 +1,38 @@
+var add_image_handlers = function() {
+  $("#main-image").data('selectedThumb', $('#main-image img').attr('src'));
+  $('ul.thumbnails li').eq(0).addClass('selected');
+  $('ul.thumbnails li a').click(function() {
+    $("#main-image").data('selectedThumb', $(this).attr('href'));
+    $('ul.thumbnails li').removeClass('selected');
+    $(this).parent('li').addClass('selected');
+    return false;
+  }).hover(function() {
+    $('#main-image img').attr('src', $(this).attr('href').replace('mini', 'product'));
+  }, function() {
+     $('#main-image img').attr('src', $("#main-image").data('selectedThumb'));
+  });
+};
+ 
+var select_variant = function(vid, text) {
+  jQuery("#variant-thumbnails").empty();
+  jQuery("#variant-images span").html(text);
+  if (images[vid].length > 0) {
+    $.each(images[vid], function(i, link) {
+      jQuery("#variant-thumbnails").append('<li>' + link + '</li>');
+    });
+    jQuery("#variant-images").show();
+  } else {
+    jQuery("#variant-images").hide();
+  }
+  add_image_handlers();
+  var link = jQuery("#variant-thumbnails a")[0];
+  jQuery("#main-image img").attr({src: jQuery(link).attr('href')});
+  jQuery('ul.thumbnails li').removeClass('selected');
+  jQuery(link).parent('li').addClass('selected');
+}
+ 
+jQuery(document).ready(function() {
+  add_image_handlers();
+  jQuery("#variant-thumbnails").empty();
+  jQuery("#variant-images").hide();
+});

data/public/javascripts/variant_options.js

@@ -0,0 +1,211 @@
+$.extend({
+  keys: function(obj){
+    var a = [];
+    $.each(obj, function(k){ a.push(k) });
+    return a;
+  }
+});
+
+if (!Array.indexOf) Array.prototype.indexOf = function(obj) {
+  for(var i = 0; i < this.length; i++){
+    if(this[i] == obj) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+if (!Array.find_matches) Array.find_matches = function(a) {
+  var i, m = [];
+  a = a.sort();
+  i = a.length
+  while(i--) {
+    if (a[i - 1] == a[i]) {
+      m.push(a[i]);
+    }
+  }
+  if (m.length == 0) {
+    return false;
+  }
+  return m;
+}
+
+function VariantOptions(options) {
+  
+  var options = options;
+  var variant, divs, parent, index = 0;
+  var selection = [];
+  
+  function init() {
+    divs = $('#product-variants .variant-options'); 
+    disable(divs.find('a.option-value').addClass('locked'));
+    update();
+    enable(parent.find('a.option-value'));
+    toggle();
+    $('.clear-option a.clear-button').hide().click(handle_clear);
+  }
+  
+  function get_index(parent) {
+    return parseInt($(parent).attr('class').replace(/[^\d]/g, ''));
+  }
+    
+  function update(i) {
+    index = isNaN(i) ? index : i;
+    parent = $(divs.get(index));
+    buttons = parent.find('a.option-value');
+    parent.find('a.clear-button').hide();
+  }
+  
+  function disable(btns) {
+    return btns.removeClass('selected');
+  }
+  
+  function enable(btns) {
+    return btns.not('.unavailable').removeClass('locked').unbind('click').filter('.in-stock').click(handle_click).filter('.auto-click').removeClass('auto-click').click();
+  }
+  
+  function advance() {
+    index++
+    update();    
+    inventory(buttons.removeClass('locked'));
+    enable(buttons.filter('.in-stock'));
+  }
+  
+  function inventory(btns) {
+    var keys, variants, count = 0, selected = {};
+    var sels = $.map(divs.find('a.selected'), function(i) { return i.rel });    
+    $.each(sels, function(key, value) {
+      key = value.split('-');
+      var v = options[key[0]][key[1]];
+      keys = $.keys(v);
+      var m = Array.find_matches(selection.concat(keys));
+      if (selection.length == 0) {
+        selection = keys;
+      } else if (m) { 
+        selection = m;
+      }
+    });
+    btns.removeClass('in-stock out-of-stock unavailable').each(function(i, element) {
+      variants = get_variant_objects(element.rel);
+      keys = $.keys(variants);
+      if (keys.length == 0) {
+        disable($(element).addClass('unavailable locked').unbind('click'));
+      } else if (keys.length == 1) {
+        _var = variants[keys[0]];
+        $(element).addClass(_var.count ? selection.length == 1 ? 'in-stock auto-click' : 'in-stock' : 'out-of-stock');        
+      } else {
+        $.each(variants, function(key, value) { count += value.count });
+        $(element).addClass(count ? 'in-stock' : 'out-of-stock');        
+      }
+    });
+  }
+  
+  function get_variant_objects(rels) {
+    var i, ids, obj, variants = {};
+    if (typeof(rels) == 'string') { rels = [rels]; }
+    var otid, ovid, opt, opv;
+    i = rels.length;
+    try {
+      while (i--) {
+        ids = rels[i].split('-');
+        otid = ids[0];
+        ovid = ids[1];
+        opt = options[otid];
+        if (opt) {
+          opv = opt[ovid];
+          ids = $.keys(opv);
+          if (opv && ids.length) {
+            var j = ids.length;
+            while (j--) {
+              obj = opv[ids[j]];
+              if (obj && $.keys(obj).length && 0 <= selection.indexOf(obj.id.toString())) {
+                variants[obj.id] = obj;
+              }
+            }
+          }
+        }
+      }
+    } catch(error) {
+      //console.log(error);
+    }    
+    return variants;
+  }
+  
+  function to_f(string) {
+    return parseFloat(string.replace(/[^\d\.]/g, ''));
+  }
+  
+  function find_variant() {
+    var selected = divs.find('a.selected');
+    var variants = get_variant_objects(selected.get(0).rel);
+    if (selected.length == divs.length) {
+      return variant = variants[selection[0]];
+    } else {
+      var prices = [];
+      $.each(variants, function(key, value) { prices.push(value.price) });
+      prices = $.unique(prices).sort(function(a, b) {
+        return to_f(a) < to_f(b) ? -1 : 1;
+      });
+      if (prices.length == 1) {
+        $('.prices .price').html('<span class="price assumed">' + prices[0] + '</span>');  
+      } else { 
+        $('.prices .price').html('<span class="price from">' + prices[0] + '</span> - <span class="price to">' + prices[prices.length - 1] + '</span>');
+      }
+      return false;
+    }
+  }
+      
+  function toggle() {
+    if (variant) {
+      $('#variant_id').val(variant.id);
+      $('.prices .price').removeClass('unselected').text(variant.price);      
+      $('button[type=submit]').attr('disabled', false).fadeTo(100, 1);
+      try {
+        select_variant(variant.id, $.map($('a.selected'), function(i) { return $(i).text() }).join(" "));
+      } catch(error) {
+        // depends on modified version of product.js  
+      }
+    } else {
+      $('#variant_id').val('');
+      $('button[type=submit]').attr('disabled', true).fadeTo(0, 0.5);
+      $('.prices .price').addClass('unselected').text('(select)');
+    }    
+  }
+  
+  function clear(i) {
+    variant = null;
+    update(i);
+    enable(buttons.removeClass('selected'));
+    toggle();
+    parent.nextAll().each(function(index, element) {
+      disable($(element).find('a.option-value').show().removeClass('in-stock out-of-stock').addClass('locked').unbind('click'));
+      $(element).find('a.clear-button').hide();
+    });
+  }
+   
+  
+  function handle_clear(evt) {
+    evt.preventDefault();
+    clear(get_index(this));
+  }
+  
+  function handle_click(evt) {
+    evt.preventDefault();
+    variant = null;
+    selection = [];
+    var a = $(this);
+    if (!parent.has(a).length) {
+      clear(divs.index(a.parents('.variant-options:first'))); 
+    }
+    disable(buttons);
+    var a = enable(a.addClass('selected'));
+    parent.find('a.clear-button').css('display', 'block');
+    advance();
+    if (find_variant()) {
+      toggle();
+    }
+  }
+    
+  $(document).ready(init);
+  
+};