-
Notifications
You must be signed in to change notification settings - Fork 0
/
productDetails.js
212 lines (170 loc) · 6.91 KB
/
productDetails.js
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
if (!localStorage.getItem('IDs')) {
let array = [];
let emptyJSON = JSON.stringify(array);
localStorage.setItem('IDs', emptyJSON);
}
fetchData();
const prefersDarkMode = localStorage.getItem('dark-mode-preference');
if (prefersDarkMode === 'dark') {
document.body.classList.add('dark-mode');
console.log("dark mode details page");
}
fetch('navigation.html')
.then(response => response.text())
.then(data => {
// Insert the navigation code into the placeholder div
document.getElementById('navigation-placeholder').innerHTML = data;
const parentContainer = document.getElementById('navigation-placeholder');
parentContainer.addEventListener('click', function (event) {
// Check if the clicked element matches the desired selector
if (event.target.matches('.button__badge')) {
// Handle the event for the dynamically created element
window.location.href = './cart.html'
}
});
const jsonArray = JSON.parse(localStorage.getItem('IDs'));
$('.button__badge').text(jsonArray.length)
console.log("navigation here..... " + jsonArray.lenght)
$('.website-name').click(function () {
window.location.href = "./home.html";
})
$('#openCart').click(function () {
window.location.href = "./cart.html"
})
$('#search-button').on('click', function () {
if ($('#search-input').val()) {
window.location.href = "./search.html?search="+$('#search-input').val();
}
});
});
fetch('./footer.html')
.then(response => response.text())
.then(data => {
// Insert the navigation code into the placeholder div
document.getElementById('footer-placeholder').innerHTML = data;
});
/* const url = window.location.href;
const searchParams = url.searchParams;
const productName = new URLSearchParams(window.location.search).get('name'); */
const url = window.location.href; // get the current url
const searchParams = url.searchParams; // get search parametres
const productId = new URLSearchParams(window.location.search).get('id'); // get the value of id
const productDetails = document.getElementById('product-name');
const productDescription = document.getElementById('product-description');
const productImage = document.getElementById('product-image');
var idOfProduct = -1;
/* fetch('localhost:5050/api')
.then(response => response.json())
.then(data => {
for (let key in data) {
if (data[key].name == productName) {
productDetails.innerText = productName;
productDescription.innerText = data[key].Description;
productImage.src = data[key].productImage;
$('#product-price').text('$' + data[key].price);
productImage.style.display = 'block';
$('.shimmer-effect').hide();
idOfProduct = data[key].id;
console.log("idOfProduct here... " + idOfProduct);
}
}
const jsonArray = JSON.parse(localStorage.getItem('IDs'));
if (jsonArray.includes(idOfProduct)) {
console.log("idOfProduct " + idOfProduct)
const length = jsonArray.length;
console.log(`lenght of array is : ${length} includes ${jsonArray} is includes? : ${jsonArray.includes(idOfProduct)}`);
console.log(jsonArray);
$('#addToCartButton').addClass('button-added');
//$('#shopping-icon').show();
}
});
*/
async function fetchData() {
const apiUrl = 'https://ahmetozydn.github.io/api/products.json'; // url to fetch data
try {
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error('Network response was not ok.');
}
let data = await response.json(); // response as JSON data
data.forEach(element => { // search for the product by its id
if (element.id == productId) {
productDetails.innerText = element.name; // assign related fields with attributes
productDescription.innerText = element.Description;
productImage.src = element.productImage;
$('#product-price').text('$' + element.price);
productImage.style.display = 'block';
$('.shimmer-effect').hide(); // before the image haven't loaded yet show a shimmer effect
return;
}
});
} catch (error) {
console.error('Error fetching data:', error.message); // an error occured while fetching the data
}
}
$('#addToCartButton').click(function () {
// store id of products added to cart in localStorage
const jsonArray = JSON.parse(localStorage.getItem('IDs'));
if (!jsonArray.includes(productId)) { // check the product is already added
addID(productId);
console.log("length of array " + jsonArray.length);
$('.button__badge').text(jsonArray.length + 1); // increase the badge's number
} else {
removeID(productId);
$('.button__badge').text(jsonArray.length - 1); // decrease the badge's number
}
});
$('#addToCartButton').addClass('button-added');
// $('#shopping-icon').hide();
$('#addToCartButton').removeClass('button-added');
// $('#shopping-icon').show();
// Retrieve the stored IDs from local storage
function getIDsFromLocalStorage() {
const storedIDs = localStorage.getItem('IDs');
return storedIDs ? JSON.parse(storedIDs) : [];
}
// Save the IDs to local storage
function saveIDsToLocalStorage(IDs) {
const IDsString = JSON.stringify(IDs);
localStorage.setItem('IDs', IDsString);
}
// Add an ID to the list and update local storage
function addID(id) {
//clearIDList();
const IDs = getIDsFromLocalStorage();
/* console.log(IDs)
var isInclude = false;
list.forEach(element => {
if (element == id) {
isInclude = true;
return;
}
});
if (isInclude) {
return;
} */
//if (isIDNotStored(id)) { return; }
IDs.push(id);
saveIDsToLocalStorage(IDs);
// console.log(IDs)
}
function isIDNotStored(id) {
const storedIDs = localStorage.getItem('IDs');
if (storedIDs) {
const parsedIDs = JSON.parse(storedIDs);
return !parsedIDs.includes(id);
}
return true;
}
// Remove an ID from the list and update local storage
function removeID(id) {
const storedIDs = JSON.parse(localStorage.getItem('IDs'));
const index = storedIDs.indexOf(id);
if (index !== -1) {
storedIDs.splice(index, 1);
saveIDsToLocalStorage(storedIDs);
}
}
function clearIDList() {
localStorage.removeItem('IDs');
}