handle out-of-stock case in javascript

app/views/spree/products/_variant_options.html.erb

@@ -25,11 +25,17 @@
     <script type="text/javascript">
     //<![CDATA[
       var variant_option_details = <%== @product.variants_option_value_details.to_json %>
-      var option_type_count = <%== grouped_option_values.length %>
+      var options = {
+        option_type_count: <%== grouped_option_values.length %>,
+        allow_select_outofstock: <%== !!SpreeVariantOptions::VariantConfig[:allow_select_outofstock] %>,
+        default_instock: <%== !!SpreeVariantOptions::VariantConfig[:default_instock] %>
+      }
+
     //]]>
     </script>
   </ul>
 </div>
 
+<%= javascript_include_tag 'frontend/variant_options' %>
 
 

lib/generators/spree_variant_options/install_generator.rb

@@ -16,6 +16,9 @@ def add_stylesheets
         inject_into_file "vendor/assets/stylesheets/spree/frontend/all.css", "*= require spree_variant_options\n", before: /\*\//, verbose: true
       end
 
+      def add_to_assest_precompile
+        append_file "config/initializers/assets.rb", "Rails.application.config.assets.precompile += %w( frontend/variant_options.js )\n"
+      end
     end
   end
 end

test/dummy_hooks/templates/store/all.css

@@ -1,3 +1,3 @@
 /*
-*= require store/spree_core
+*= require frontend/spree_core
 */  

test/dummy_hooks/templates/store/all.js

@@ -1,3 +1,3 @@
 //= require jquery
 //= require jquery_ujs
-//= require store/spree_core
+//= require frontend/spree_core

vendor/assets/javascripts/store/variant_options.js → vendor/assets/javascripts/frontend/variant_options.js

@@ -27,7 +27,7 @@ OptionValuesHandler.prototype.bindEvents = function() {
       _this.resetAllNextLevel($this);
       _this.unlockNextLevel($this);
 
-      if($this.data('level') == option_type_count) {
+      if($this.data('level') == options["option_type_count"]) {
         _this.setVariantWithSelecetedValues();
       }
     }
@@ -38,7 +38,6 @@ OptionValuesHandler.prototype.bindEvents = function() {
     $(this).closest('li').addClass('hidden');
     _this.updateSiblings($(this));
     _this.resetAllNextLevel($(this));
-    _this.disableCartInputFields(true);
   })
 };
 
@@ -59,16 +58,11 @@ OptionValuesHandler.prototype.resetAllNextLevel = function(optionValue) {
   var nextAllDivs = optionValue.closest('.variant-options').nextAll('.variant-options');
   nextAllDivs.find('.clear-option').addClass('hidden');
   nextAllDivs.find('.option-value').addClass('locked').removeClass('selected');
+  this.disableCartInputFields(true);
   this.setVariantId(false);
   this.thumbImages.show();
 };
 
-OptionValuesHandler.prototype.selectedOptionValues = function() {
-  return this.optionsButton.filter('.selected').map(function() {
-    return $(this).data('valueId');
-  });
-};
-
 OptionValuesHandler.prototype.setComparingConditions = function (conditions) {
   var conditions = conditions || {};
 
@@ -78,21 +72,20 @@ OptionValuesHandler.prototype.setComparingConditions = function (conditions) {
 }
 
 OptionValuesHandler.prototype.anyVariantExists = function(conditions) {
-  var is_exist = false;
+  var variant = false;
   this.setComparingConditions(conditions);
 
   $.each(variant_option_details, function() {
     if(objectContains(this.option_types, conditions)) {
-      is_exist = true;
+      variant = { inStock: this.in_stock };
       return false
     }
   });
-  return is_exist;
+  return variant;
 };
 
 OptionValuesHandler.prototype.setVariantId = function(is_exist) {
   if(is_exist) {
-    console.log(this.variantId)
     this.variantField.val(this.variantId);
     this.priceHeading.html(this.variantPrice);
   } else {
@@ -105,17 +98,26 @@ OptionValuesHandler.prototype.unlockNextLevel = function(optionValue) {
   var allOptionValues = optionValue.closest('.variant-options').next().find('.option-value'),
       availableOptionValueCount = 0,
       availableOptionValue,
-      _this = this;
+      _this = this,
+      details;
 
   allOptionValues.each(function() {
     var $this = $(this),
         conditions = {};
+
     conditions[$(this).data('typeId')] = $(this).data('valueId');
+    details = _this.anyVariantExists(conditions)
 
-    if(_this.anyVariantExists(conditions)) {
+    if(details) {
       availableOptionValueCount += 1;
       availableOptionValue = $this
-      $this.removeClass('locked')
+      if(($this.data('level') == options["option_type_count"]) && !details["inStock"]) {
+        $this.addClass('out-of-stock')
+      } else {
+        $this.removeClass('out-of-stock locked')
+      }
+    } else {
+      $this.removeClass('out-of-stock');
     }
   })
 

vendor/assets/javascripts/spree_variant_options.js

@@ -1,2 +1 @@
 //= require_tree ./extentions
-//= require_tree ./store

vendor/assets/stylesheets/store/variant_options.css.erb → vendor/assets/stylesheets/frontend/variant_options.css.erb

@@ -54,7 +54,7 @@ li.clear-option a.clear-button:hover {
 }
 .option-value.out-of-stock {
   display: block;
-  background: transparent url(<%= asset_path "store/out-of-stock.png" %>) 0 0 repeat;
+  background: transparent url(<%= asset_path "assets/frontend/out-of-stock.png" %>) 0 0 repeat;
   color: #aaa;
   cursor: default;
 }

vendor/assets/stylesheets/spree_variant_options.css

@@ -1,3 +1,3 @@
 /*
-*= require store/variant_options
+*= require frontend/variant_options
 */