-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshoes.html
157 lines (154 loc) · 7.72 KB
/
shoes.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SoleMate Finder</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--Vue.js-->
<link rel="manifest" href="site.webmanifest"><!--Importing the manifest file -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css"><!--CSS-->
</head>
<body>
<div id="app">
<div class="header">
<a href="index.html" class="logo">
{{siteName}}<!--SoleMate Finder-->
</a>
<div class="header-right">
<form @submit.prevent="search">
<input type="text" v-model="searchForm" id="searchForm" placeholder="Find your SoleMate"><!--Search-->
</form>
</div>
</div>
<div v-if="items.length > 0" class="product"><!--If number of products is more than 0-->
<img v-if="items[0].image_url" :src="items[0].image_url" alt="Product image" class="product-image"><!--If image_url exists-->
<img v-else src="https://via.placeholder.com/1000" alt="Product image" class="product-image"><!--If image_url does not exist-->
<div class="product-details"><!--Product details-->
<p style="font-weight: bold;">{{ items[0].brand }}</p><!--Brand-->
<h1>{{ items[0].full_name }}</h1><!--Full name-->
<span>Product SKU: {{sku_full}}</span><!--SKU-->
<!--variants-->
<p>Available variants:</p><!--Available variants-->
<div class="variants-container"><!--Variants container-->
<button
class="VariantsButton"
v-for="variant in variants"
:key="variant.sku_full"
:class="{ 'selected-variant': variant.sku_full == sku_full }"
@click="setSkuFull(variant.sku_full)"
><!--Variant button-->
{{ variant.full_name }}<!--Variant name-->
</button>
</div>
<br><br>
<!--Buy options-->
<div v-for="item in items" :key="item.id"><!--For each item in items-->
<a :href="item.website_url" target="_blank"><!--Link to website-->
<button class="BuyNowButton">Buy for {{ item.selling_price }} at {{ getWebsiteName(item.website_url) }}</button><!--Buy now button-->
</a>
</div>
</div>
</div>
<div v-else class="no-results-container"><!--If number of products is 0-->
<h1>No item found</h1><!--No item found-->
</div>
<div class="footer">
<p>{{siteName}} © {{year}} | All rights reserved</p><!--Footer-->
</div>
</div>
</body>
<script>
const app = new Vue({//Vue.js
el: '#app',
data: {
siteName: 'SoleMate Finder',
year: new Date().getFullYear(),//Current year
items: [],
sku_full: '',
variants:[],
sku_base: '',
searchForm: '',
api_url:'https://n5uglm9h7l.execute-api.eu-west-2.amazonaws.com/Production/',
},
created() {//When page is loadedcreated() {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("service-worker.js");
}
const urlParams = new URLSearchParams(window.location.search);
this.sku_base = urlParams.get('sku_base') || 'fd1165';
if(this.sku_base.includes('-')) {
this.sku_full = this.sku_base;
this.sku_base = this.sku_base.split('-')[0];
}
},
watch: {//When sku_full or sku_base changes
sku_full: function() {
this.fetchData();
},
sku_base: function() {
this.fetchData();
}
},
methods: {
fetchData: function() {//Fetch data from API
//fetch('http://localhost:3000/shoes/' + this.sku_base)//Fetch variants
// fetch('https://solemate-finder-env.eba-49in8fbx.eu-west-2.elasticbeanstalk.com/shoes/' + this.sku_base)//Fetch variants
fetch(this.api_url+'shoes/' + this.sku_base)//Fetch variants
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
this.variants = data;//Set variants
var invalidSkuFull = true;//Check if sku_full is valid
for(var i = 0; i < this.variants.length; i++) {//Loop through variants
if(this.variants[i].sku_full == this.sku_full) {
invalidSkuFull = false;//sku_full is valid
break;
}
}
if(invalidSkuFull) this.sku_full = this.variants[0].sku_full;//Set sku_full to first variant
//fetch('http://localhost:3000/shoes/' + this.sku_full)//Fetch items
// fetch('https://solemate-finder-env.eba-49in8fbx.eu-west-2.elasticbeanstalk.com/shoes/' + this.sku_full)//Fetch items
fetch(this.api_url+'shoes/' + this.sku_full)//Fetch items
.then(response => {//When response is received
if (!response.ok) {//If response is not ok
throw new Error('Network response was not ok');//Throw error message
}
return response.json();//Return response as JSON
})
.then(data => {//When data is received
this.items = data;//Set items to data
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);//Catch error
});
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);//Catch error
});
},
getWebsiteName(url) {//Get website name from URL
const domain = new URL(url).hostname;//Get hostname from URL
const websiteNames = {//Website names
'www.unisportstore.com': 'Uni Sports Store',
'www.prodirectsport.com': 'Pro Direct Sport',
'www.ultrafootball.com': 'Ultra Football',
'www.foot-store.com' : 'Foot Store',
'www.nike.com': 'Nike'
};
return websiteNames[domain] || domain;//Return website name or domain
},
setSkuFull(sku_full) {
this.sku_full = sku_full;//Set sku_full
},
search: function() {
window.location.href = 'index.html?searchQuery=' + this.searchForm;//Redirect to index.html with searchQuery
}
}
});
</script>
</html>