1 files changed, 73 insertions, 36 deletions

diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index 62a6de18..4320043c 100755
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -1,4 +1,3 @@
-
 var ProductView = ScrollableView.extend({
   
   el: "#product",
@@ -6,8 +5,10 @@ var ProductView = ScrollableView.extend({
   events: {
     "click .fit": "scroll_to_bottom",
     "click .notAvailableInCanada": "scroll_to_bottom",
-    "click .size": "select_size",
-    "click .color": "select_color",
+    "change select[name=size]": "select_size",
+    "change select[name=color]": "select_color",
+    // "click .size": "select_size",
+    // "click .color": "select_color",
     "click .share": "share",
     "click .gallery-left": "gallery_left",
     "click .gallery-right": "gallery_right",
@@ -22,8 +23,12 @@ var ProductView = ScrollableView.extend({
     this.$type = this.$(".type")
     this.$price = this.$(".price")
     this.$size = this.$(".size")
-    this.$share = this.$(".share")
+    this.$sizeSelect = this.$(".size select")
+    this.$sizeLabel = this.$(".size .label")
     this.$color = this.$(".color")
+    this.$colorSelect = this.$(".color select")
+    this.$colorLabel = this.$(".color .label")
+    this.$share = this.$(".share")
     this.$body = this.$(".body")
     this.$fit = this.$(".fit")
     this.$fitHeader = this.$('.fitHeader')
@@ -123,7 +128,7 @@ var ProductView = ScrollableView.extend({
 
     var descriptions = this.get_descriptions(details)
 
-    var title = data['ModelNames']
+    var title = data['ModelNames'] || ""
     var type = title_case( data['MicroCategory'] )
     var price = "$" + data['DiscountedPrice'] + ".00"
     var details_description = descriptions['Details'] || ""
@@ -132,7 +137,7 @@ var ProductView = ScrollableView.extend({
     // body = body.replace(/<br>/g, "<br><br>").replace(/(<br>)+$/, "")
 
     var default_color_id = this.populate_selectors(data, details)
-    
+
     var notAvailableInCanada = !! app.store.NotAvailableInCanada
     app.product.$notAvailableInCanada.toggle( notAvailableInCanada )
 
@@ -166,14 +171,8 @@ var ProductView = ScrollableView.extend({
       this.size = size
 
       this.is_onesize = !! this.sizes[1]
-
-      this.$size.show().html(size_label)
-      if (color_label) {
-        this.$color.html(color_label)
-      }
-      else {
-        this.$color.hide()
-      }
+      this.set_size_label(size_label)
+      this.set_color_label(color_label)
     }
     
     // console.log(color, color_label, size, size_label)
@@ -233,6 +232,9 @@ var ProductView = ScrollableView.extend({
       this.$sizing.hide()
     }
 
+    this.populate_sizes()
+    this.populate_colors()
+
     this.deferScrollToTop()
   },
 
@@ -314,37 +316,72 @@ var ProductView = ScrollableView.extend({
     return default_color
   },
 
-  select_size: function(){
+  populate_sizes: function() {
+    console.log(this.sold_out, this.notAvailable, this.is_onesize, this.item)
     if (this.sold_out) { return }
     if (this.notAvailable) { return }
-    if (this.is_onesize) { return this.select_color() }
-    if (this.item['Sizes'].length == 0) { return }
-    var sizes = Object.keys(this.sizes).map(function(key){
-      return this.sizes[key]
-    }.bind(this))
-    
-    app.selector.select("style", sizes, function(size){
-      console.log(size)
-      this.size = size.value
-      this.$size.html(size.label)
+    // if (this.is_onesize) { return this.select_color() }
+    if (this.details['ModelSizes'].length == 0) { return }
+
+    this.$sizeSelect.empty()
+    var sizes = Object.keys(this.sizes).forEach(function(key){
+      var size = this.sizes[key]
+      var option = document.createElement('option')
+      option.value = size.value
+      option.innerHTML = size.label
+      this.$sizeSelect.append(option)
     }.bind(this))
   },
-  
-  select_color: function(){
+
+  populate_colors: function() {
     if (this.sold_out) { return }
     if (this.notAvailable) { return }
-    if (this.item['Colors'].length == 0) { return }
-    var colors = Object.keys(this.colors).map(function(key){
-      return this.colors[key]
-    }.bind(this))
-    app.selector.select("style", colors, function(color){
-      this.code = color.code
-      this.$color.html(color.label)
-      this.gallery.populate( color.code, this.details['ImageTypes'] )
-      this.gallery_right()
+    if (this.details['ModelColors'].length == 0) { return }
+
+    this.$colorSelect.empty()
+    Object.keys(this.colors).forEach(function(key){
+      var color = this.colors[key]
+      var option = document.createElement('option')
+      option.value = key
+      option.innerHTML = color.label
+      this.$colorSelect.append(option)
     }.bind(this))
   },
 
+  select_size: function(){
+    console.log(this.colors)
+    var value = this.$sizeSelect.val()
+    var size = this.sizes[value]
+    console.log(size)
+    this.set_size_label(size.label)
+    this.size = size.value
+  },
+  
+  select_color: function(){
+    var value = this.$colorSelect.val()
+    var color = this.colors[value]
+    console.log(color)
+    this.code = color.code
+    this.set_color_label(color.label)
+    this.gallery.populate( color.code, this.details['ImageTypes'] )
+    this.gallery_right()
+  },
+
+  set_size_label: function(size_label){
+    this.$size.show()
+    this.$sizeLabel.html(size_label)
+  },
+
+  set_color_label: function(color_label){
+    if (color_label) {
+      this.$color.show()
+      this.$colorLabel.html(color_label)
+    }
+    else {
+      this.$color.hide()
+    }
+  },
+
   // ADD TO CART
   save: function(){
     if (this.sold_out) { return }