diff options
| -rwxr-xr-x | StoneIsland/www/css/products.css | 22 | ||||
| -rwxr-xr-x | StoneIsland/www/index.html | 12 | ||||
| -rwxr-xr-x | StoneIsland/www/js/lib/products/ProductView.js | 109 | ||||
| -rwxr-xr-x | StoneIsland/www/js/vendor/util.js | 2 |
4 files changed, 100 insertions, 45 deletions
diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css index 63e9b020..5efef660 100755 --- a/StoneIsland/www/css/products.css +++ b/StoneIsland/www/css/products.css @@ -160,19 +160,31 @@ display: flex; flex-direction: row; } -.product .size-color span { - position:relative; - box-sizing:border-box; - padding: 0 12px; +.product .size-color > div { + position: relative; + box-sizing: border-box; height: 48px; font-size: 1rem; display: flex; justify-content: center; align-items: center; } -.product .size-color span.size { +.product .size-color > div > div.label { + padding: 0 12px; + max-width: 6rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.product .size-color div.size { border-right: 1px solid #444; } +.product .size-color > div > select { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + opacity: 0; +} .product .price { display:table-cell; diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html index 12c4c0ad..06f4455f 100755 --- a/StoneIsland/www/index.html +++ b/StoneIsland/www/index.html @@ -325,8 +325,14 @@ <div class="style-share"> <span class="style"> <div class="size-color"> - <span role="button" class="size" aria-label="Tap to select size. Current size"></span> - <span role="button" class="color" aria-label="Tap to select color. Current color"></span> + <div role="button" class="size" aria-label="Tap to select size. Current size"> + <div class="label"></div> + <select name="size"></select> + </div> + <div role="button" class="color" aria-label="Tap to select color. Current color"> + <div class="label"></div> + <select name="color"></select> + </div> </div> </span> <span role="button" class="share">SHARE +</span> @@ -1359,8 +1365,8 @@ <script src="js/lib/blogs/BlogView.js"></script> <script src="js/lib/blogs/ArchiveView.js"></script> <script src="js/lib/blogs/HubView.js"></script> -<script src="js/lib/blogs/PageView.js"></script> <script src="js/lib/blogs/StoryView.js"></script> +<script src="js/lib/blogs/PageView.js"></script> <script src="js/lib/_router.js"></script> 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 } diff --git a/StoneIsland/www/js/vendor/util.js b/StoneIsland/www/js/vendor/util.js index 27bdf008..c44dda79 100755 --- a/StoneIsland/www/js/vendor/util.js +++ b/StoneIsland/www/js/vendor/util.js @@ -25,7 +25,7 @@ function hex_string (rgb) { return "#" + rgb.map(Math.round).map(function(n){ va function parse_rgba_string (s) { return s.match(/(\d+)/g).slice(0,3) } function title_case (str) { - return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); + return (str || "").replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); } function pluralize (n,s,ss) { return n + " " + s + ( n == 1 ? "" : (ss || "s") ) } function as_cash(n){ |