- Replace PATH's for use with polymer serve

- Implemented new request with the parent item ASIN to get all options values - Add Quantity option static - Others improvments
eob · Mar 9, 2017 · c9c3ea3 · c9c3ea3
1 parent b3149d8
commit c9c3ea3
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 26 deletions.
diff --git a/app.html b/app.html
@@ -54,7 +54,7 @@
 		if (!webComponentsSupported) {
 		  var script = document.createElement('script');
 		  script.async = true;
-		  script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
+		  script.src = '../webcomponentsjs/webcomponents-lite.min.js';
 		  script.onload = onload;
 		  document.head.appendChild(script);
 		} else {
@@ -64,7 +64,7 @@
 	</script>
 
 	<link rel="import" href="stitch-order-element.html">
-	<link rel="import" href="bower_components/paper-styles/default-theme.html">
+	<link rel="import" href="../paper-styles/default-theme.html">
 	<style>
 		body {
 			margin: 0;

diff --git a/demo/index.html b/demo/index.html
@@ -13,10 +13,13 @@
     <link rel="import" href="../stitch-order-element.html">
 
     <style is="custom-style" include="demo-pages-shared-styles">
+      #demo{
+        max-width: 800px;
+      }
     </style>
   </head>
   <body>
-    <div class="vertical-section-container centered">
+    <div id="demo" class="vertical-section-container centered">
       <h3>Basic stitch-order-element demo</h3>
       <demo-snippet>
         <template>

diff --git a/font-styles.html b/font-styles.html
@@ -1,5 +1,5 @@
-<link rel="import" href="bower_components/polymer/polymer.html">
-<link rel="import" href="bower_components/paper-styles/typography.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-styles/typography.html">
 
 <dom-module id="font-styles">
 	<template>

diff --git a/stitch-order-element.html b/stitch-order-element.html
@@ -1,4 +1,4 @@
-<link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="stitch-order-request.html">
 <link rel="import" href="stitch-order-form.html">
 

diff --git a/stitch-order-form.html b/stitch-order-form.html
@@ -1,11 +1,11 @@
-<link rel="import" href="bower_components/polymer/polymer.html">
-<link rel="import" href="bower_components/iron-form/iron-form.html">
-<link rel="import" href="bower_components/paper-styles/shadow.html">
-<link rel="import" href="bower_components/paper-input/paper-input.html">
-<link rel="import" href="bower_components/iron-image/iron-image.html">
-<link rel="import" href="bower_components/paper-spinner/paper-spinner.html">
-<link rel="import" href="bower_components/paper-button/paper-button.html">
-<link rel="import" href="bower_components/vaadin-combo-box/vaadin-combo-box.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-form/iron-form.html">
+<link rel="import" href="../paper-styles/shadow.html">
+<link rel="import" href="../paper-input/paper-input.html">
+<link rel="import" href="../iron-image/iron-image.html">
+<link rel="import" href="../paper-spinner/paper-spinner.html">
+<link rel="import" href="../paper-button/paper-button.html">
+<link rel="import" href="../vaadin-combo-box/vaadin-combo-box.html">
 <link rel="import" href="font-styles.html">
 <link rel="import" href="stitch-order-icons.html">
 
@@ -74,7 +74,7 @@
 
 			#options {
 				@apply(--layout-vertical);
-				@apply(--layout-end);
+				@apply(--layout-start);
 			}
 
 			iron-icon[prefix] {
@@ -132,7 +132,9 @@ <h4>Select Options</h4>
 					<div id="options">
 						<template is="dom-repeat" items="[[productDetails.options]]" as="option">
 							<vaadin-combo-box required label="[[option.name]] *"
-							                  items="[[option.values]]">
+							                  items="[[option.values]]"
+							                  selected-item="[[option.selected]]"
+							                  >
 							</vaadin-combo-box>
 						</template>
 					</div>
@@ -226,7 +228,6 @@ <h3>Total Cost</h3>
 
 		  _setAction: function(){
 			var params = this.$.form.request.params;
-			console.log(params);
 		  },
 
 		  _submit: function(){

diff --git a/stitch-order-icons.html b/stitch-order-icons.html
@@ -1,4 +1,4 @@
-<link rel="import" href="bower_components/iron-iconset-svg/iron-iconset-svg.html">
+<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
 
 <iron-iconset-svg name="stitch-order" size="24">
 	<svg>

diff --git a/stitch-order-request.html b/stitch-order-request.html
@@ -1,12 +1,18 @@
-<link rel="import" href="bower_components/polymer/polymer.html">
-<script src="bower_components/jsSHA/src/sha.js"></script>
+<link rel="import" href="../polymer/polymer.html">
+<script src="../jsSHA/src/sha.js"></script>
 
 <dom-module id="stitch-order-request">
 	<template>
-		<iron-ajax url="[[request.endpoint]]" method="POST"
+		<iron-ajax id="ajaxProductInfo" url="[[request.endpoint]]" method="POST"
 		           content-type="application/json"
 		           on-response="_handleResponse"
-		           debounce-duration="300">
+		           debounce-duration="300"
+		           loading="{{loadingAjax}}">
+		</iron-ajax>
+
+		<iron-ajax id="ajaxProductOptions" url="[[request.endpoint]]" method="POST"
+		           content-type="application/json"
+		           on-response="_handleResponseParentASIN">
 		</iron-ajax>
 	</template>
 	<script>
@@ -82,12 +88,33 @@
 				}
 			  };
 			})();
+
+			this.requestAsinParent = (function(){
+			  var endpoint = 'https://kc5nsidmrk.execute-api.us-west-2.amazonaws.com/production/item/lookup';
+
+			  var body = {
+				itemId: undefined,
+				ResponseGroup: 'VariationMatrix'
+			  };
+
+			  return {
+				body: function(itemId){
+				  var request = JSON.parse(JSON.stringify(body));
+				  request.itemId = itemId;
+
+				  return request;
+				},
+				get endpoint(){
+				  return endpoint;
+				}
+			  };
+			})();
 		  },
 
 		  _setRequestParams: function(productUrl){
 			this.debounce('requesting-product', function(){
 			  if (productUrl.length > 23) {
-				var ajax = this.$$('iron-ajax');
+				var ajax = this.$$('#ajaxProductInfo');
 				var itemID = this._getItemIdFromURL(productUrl);
 
 				ajax.set('body', this.request.body(itemID));
@@ -104,14 +131,40 @@
 			  id: response.ASIN[0],
 			  title: response.ItemAttributes[0].Title[0],
 			  image: response.MediumImage[0].URL[0],
-			  cost: response.ItemAttributes[0].ListPrice[0].FormattedPrice[0],
-			  prime: !!Number(response.Offers[0].Offer[0].OfferListing[0].IsEligibleForPrime[0])
+			  cost: response.ItemAttributes[0].ListPrice ? response.ItemAttributes[0].ListPrice[0].FormattedPrice[0] : 0,
+			  prime: response.Offers[0].Offer ? !!Number(response.Offers[0].Offer[0].OfferListing[0].IsEligibleForPrime[0]): false,
+			  itemsAttributes: response.ItemAttributes[0],
+			  options: [{name:'Quantity',values:[1,2,3,4,5],selected:1}]
 			};
-
+			var ajax = this.$$('#ajaxProductOptions');
+			if(response.ParentASIN){
+				var parentID = response.ParentASIN[0];
+				ajax.set('body', this.requestAsinParent.body(parentID));
+				ajax.generateRequest();
+			}
 			this.set('productDetails', product);
 			this.fire('order-response', product);
 		  },
 
+		  _handleResponseParentASIN:function(e){
+			var productItemAttributes = this.get('productDetails.itemsAttributes');
+			if(e.detail.response[0].Variations) {
+			  var variationsResponse = e.detail.response[0].Variations[0];
+			  var self = this;
+			  variationsResponse.VariationDimensions[0].VariationDimension.forEach(function(item, index){
+				self.push('productDetails.options', {name: item, values: [], selected: productItemAttributes[item][0]});
+			  });
+			  variationsResponse.Item.forEach(function(item){
+				self.get('productDetails.options').forEach(function(option, index){
+				  if (item.ItemAttributes[0][option.name] && option.values.indexOf(item.ItemAttributes[0][option.name][0]) === -1) {
+					self.push('productDetails.options.' + index + '.values', item.ItemAttributes[0][option.name][0])
+				  }
+				});
+			  });
+			  this.fire('order-options-response', this.get('productDetails.options'));
+			}
+		  },
+
 		  _getItemIdFromURL: function(url){
 			var regex = /\/dp\/(\w+)\/?/;
 			return regex.exec(url)[1];