/
index.html
142 lines (98 loc) · 4.19 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en" class="no-js" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zappos|Shoes, Clothing Online</title>
<meta name="description" content="Zappos Application for Discount Notification" />
<meta name="keywords" content="Zappos, Application, Shoes, Clothing" />
<meta name="author" content="Sarim" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!-- Make sure my AngularJS calls our API as a "GET", rather than as an "OPTION"-->
<script>
var myApp = angular.module('myApp', []);
myApp.config(['$httpProvider',
function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
// my function to populate the product details
function AngularController($scope, $http) {
$scope.searchItem = null;
$scope.listOfProducts = null;
$scope.loadProducts = function() {
// get search results
$http.jsonp('http://api.zappos.com/Search/term/'+$scope.searchItem+'?callback=JSON_CALLBACK&limit=30&key=12c3302e49b9b40ab8a222d7cf79a69ad11ffd78').success(function(data) {
// $http.jsonp('http://api.zappos.com/Search?callback=JSON_CALLBACK&term=' + $scope.searchItem + '&key=b05dcd698e5ca2eab4a0cd1eee4117e7db2a10c4').success(function(data) {
var txt = data;
var obj = eval(txt);
$scope.listOfProducts = obj.results;
// alert($scope.listOfProducts);
}).error(function(data, status, headers, config) {
$scope.errorMessage = "No product matching this search found, error # " + status;
alert($scope.errorMessage);
});
};
//redirecting to product url
$scope.redirecting = function(url) {
window.open(url, '_blank');
};
//redirecting to form
$scope.popup = function(productId, styleId) {
window.location = 'form.html?' + productId + ',' + styleId;
};
}
</script>
</head>
<body ng-controller="AngularController">
<div data-role="page">
<div class="container" >
<header class="clearfix">
<span><img src="images/Zappos_logo-1.jpg" width="20%"></img>
<div id="searchdiv" >
<input id="searchbox" ng-model="searchItem" ng-change="loadProducts()" placeholder="WHAT AM I HERE FOR?" />
<br/>
<span class="bp-icon bp-icon-about" data-content="Hola! so now that we have managed to pull you back to our online store, just start entering what you want to search for in this search box."></span>
</span>
<p style="margin-left: 25%;">
</p>
</div>
</header>
<div id="cbp-pgcontainer" class="cbp-pgcontainer">
<ul class="cbp-pggrid">
<li ng-repeat='product in listOfProducts'>
<div class="cbp-pgcontent">
<div class="cbp-pgitem">
<div class="cbp-pgitem-flip">
<img src={{product.thumbnailImageUrl}} /><!--add image here-->
</div>
</div><!-- /cbp-pgitem -->
<ul class="cbp-pgoptions">
<li class="cbp-pgoptfav" ng-click="popup(product.productId,product.styleId)">
<!--setup an onclick for opening a form popup-->
Favorite
</li>
<li class="cbp-pgoptcart" ng-click="redirecting(product.productUrl)" ></li>
</ul><!-- cbp-pgoptions -->
</div><!-- cbp-pgcontent -->
<div class="cbp-pginfo">
<h3>{{product.productName}}</h3><!--product name-->
<!--<h3>{{product.brandName}}</h3><!--brandname->-->
<span class="cbp-pgprice">{{product.price}}</span><!--product price-->
</div>
</li>
</ul><!-- /cbp-pggrid -->
</div><!-- /cbp-pgcontainer -->
</div><!-- /content -->
</div><!---page ends-->
<script src="js/cbpShop.min.js"></script>
<script>
var shop = new cbpShop(document.getElementById('cbp-pgcontainer'));
</script>
</body>
</html>