populate selector

1 files changed, 43 insertions, 6 deletions

diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index a98f3ca4..94d43508 100644
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -37,32 +37,69 @@ var ProductView = View.extend({
     document.body.className = "product"
   },
   
+  item: null,
+  size: null,
+  color: null,
+  code: null,
+  
   load: function(data){
-    //
-    this.item = data
-    
     var name_partz = data['ModelNames'].split(' ')
     var num = name_partz.shift()
     var title = name_parts.join(' ')
-    var size = data['Sizes'][0]
     var type = data['MicroCategory'].toUpperCase()
     var price = "$" + data['DiscountedPrice'] + ".00"
-    var color = SIZE_LOOKUP[ data['Colors'][0]['Text'] ]
+    var size = data['Sizes'][0]
+    var size_label = SIZE_LOOKUP[size]
+    var color = data['Colors'][0]
+    var color_label = color['Text']
     var body = ""
     
+    this.item = data
+    this.color = color
+    this.size = size
+    this.code = data['DefaultCode10']
+    
     this.$num.html(num)
     this.$title.html(title)
     this.$type.html(type)
     this.$price.html(price)
-    this.$size.html(size)
+    this.$size.html(size_label)
     this.$color.html(color)
     this.$body.html(body)
+    
+    // TODO: fetch product from item API, get other Code10s so you can populate the gallery
   },
 
   select_size: function(){
+    if (this.item['Sizes'].length == 0) { return }
+    var mapped_sizes = this.item['Sizes'].map(function(size){
+      return {
+        id: size['Id'],
+        label: SIZE_LOOKUP[ size['Text'] ],
+        value: size,
+      }
+    })
+    app.selector.select(mapped_sizes, function(size){
+      this.size = size.value
+      this.$size.html(size.label)
+    }.bind(this))
   },
+  
   select_color: function(){
+    if (this.item['Colors'].length == 0) { return }
+    var mapped_colors = this.item['Colors'].map(function(color){
+      return {
+        id: color['Id'],
+        label: color['Text'],
+        value: color,
+      }
+    })
+    app.selector.select(mapped_colors, function(color){
+      this.color = color.value
+      this.$color.html(color.label)
+    }.bind(this))
   },
+  
   share: function(){
   },