-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcart.js
More file actions
287 lines (223 loc) · 8.27 KB
/
cart.js
File metadata and controls
287 lines (223 loc) · 8.27 KB
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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
// recuperation de notre panier via le localStorage
let cart = []
function loadCart() {
if (!cart) {
cart = [];
} else {
cart = JSON.parse(localStorage.getItem("shoppingCart"));
}
}
loadCart()
console.log(`Voici ce que contient le panier : `)
console.log(cart);
//enregistre les changement dans le localStorage
function saveCart() {
localStorage.setItem("shoppingCart", JSON.stringify(cart));
}
//sous total
function subTotal(element) {
console.log(element.name + " : " + (element.count * element.price));
return element.count * element.price;
}
// suppression total du panier
let deleteP = document.querySelector("#deletePanier");
deleteP.addEventListener("click", function (e) {
let reponse = window.confirm("vouler vous supprimer le Panier ?");
if (!reponse) {
e.preventDefault();
e.stopPropagation();
} else {
for (i in cart) {
cart.splice(i);
e.stopPropagation();
document.location.reload(true);
break
}
saveCart()
}
})
//template Produits
function recapTemplateCommande(cart) {
let productResume = document.querySelector("#productResume");
let tr = document.createElement("tr");
productResume.appendChild(tr);
let thName = document.createElement("td");
thName.id = "nameOfProd";
thName.textContent = cart.name;
tr.appendChild(thName);
let thCount = document.createElement("td");
thCount.textContent = cart.count;
thCount.id = "countOfProd";
tr.appendChild(thCount);
let thUnitPrice = document.createElement("td");
thUnitPrice.textContent = cart.price;
thUnitPrice.id = "unitPrice";
tr.appendChild(thUnitPrice);
let thsubPrice = document.createElement("td");
thsubPrice.textContent = subTotal(cart);
thsubPrice.id = "subPrice";
tr.appendChild(thsubPrice);
}
// initialisation de la variable concernant le prix total
let prixTotalPanier = 0;
//affichage de tous les produits du panier
for (let i = 0; i < cart.length; i++) {
console.log(cart);
recapTemplateCommande(cart[i]); // affichage d'un produit en particulier
prixTotalPanier += subTotal(cart[i]); //calcul du prix total via chaque sous total de chaque produit
}
// affichage du Prix Total dans tableau
{
let trTotal = document.createElement("tr");
productResume.appendChild(trTotal);
let tdTotalCartPrx = document.createElement("th");
tdTotalCartPrx.id = "totalCartPrice";
tdTotalCartPrx.textContent = "prix Total : " + prixTotalPanier + "€";
trTotal.appendChild(tdTotalCartPrx);
//rappel du prix total bas de formulaire
document.querySelector("#rapelPrixTotal").textContent = "prix Total : " + prixTotalPanier + "€";
}
//variable de stockage des data a envoyer au serveur :
// => (product[id des produits commandés],
// => contact{ infos valides du formulaire })
let infosServeur = {
products: [],
contact: {}
};
//recuperation des id de chaque produit du cart
let recupIdProductCart = function () {
for (i = 0; i < cart.length; i++) {
let recupIdProd = cart[i]["idProduct"]
infosServeur.products.push(recupIdProd);
console.log("voici les ID envoyés vers products : ")
console.log(infosServeur.products)
}
}
recupIdProductCart()
// champs du formulaire
const firstName = document.querySelector("#firstName");
const lastName = document.querySelector("#lastName");
const address = document.querySelector("#address");
const city = document.querySelector("#city");
const email = document.querySelector("#email");
const btnCommander = document.querySelector("#btnCommander");
//msg d'erreur du formulaire
const firstNameError = document.querySelector("#firstNameErrorMsg");
const lastNameError = document.querySelector("#lastNameErrorMsg");
const addressError = document.querySelector("#addressErrorMsg");
const cityError = document.querySelector("#cityErrorMsg");
const emailError = document.querySelector("#emailErrorMsg");
//fonction de verfication (lastname ,firstName, city)
function verifName(champ, msgErreur) {
//accepte seulement les lettres, apostrophes, tirets et espaces
//pas de tiret en debut et fin de champ
//majuscule seulement au debut
// accepte champ >=2 et <=25
const regexNom = /^[a-zA-ZéèîïÉÈÎÏ][a-zéèêàçîï]+([-'\s][a-zA-ZéèîïÉÈÎÏ][a-zéèêàçîï]+)?$/;
//si format incorrect : false, si format correct : true
if ((regexNom.test(champ.value) == false) || (champ.value.length < 2 || champ.value.length > 25)) {
msgErreur.textContent = "Format incorrect";
msgErreur.style.color = "red";
return false;
} else {
msgErreur.textContent = "";
return true;
}
}
//fonction de verfication (email)
function verifEmail(champ, msgErreur) {
// Correspond à une chaîne de la forme [email protected]
const regexEmail = /.+@.+\..+/;
//si format incorrect : false, si format correct : true
if (!regexEmail.test(champ.value)) {
msgErreur.textContent = "Adresse invalide";
msgErreur.style.color = "red";
return false;
} else {
msgErreur.textContent = "";
return true;
}
}
//fonction de verfication (address)
function verifAddress(champ, msgErreur) {
// doit contenir des chiffres, pas de caracteres spéciaux;
const regexNumber = /[0-9]/;
const regexSpeciaux = /[$&+:;=?@#|'<>.°^*()%!"{}_"`¨~]/;
//si format incorrect : false, si format correct : true
if (regexSpeciaux.test(champ.value)) {
msgErreur.textContent = "Format incorrect";
msgErreur.style.color = "red";
return false;
}
if (!regexNumber.test(champ.value)) {
msgErreur.textContent = "Format incorrect";
msgErreur.style.color = "red";
return false;
} else {
msgErreur.textContent = "";
return true;
}
}
//verification du formulaire lors de l'évenement et post final vers serveur
btnCommander.addEventListener("click", function () {
verifName(firstName, firstNameError);
verifName(lastName, lastNameError);
verifName(city, cityError);
verifEmail(email, emailError);
verifAddress(address, addressError);
//verification des Boolean ( true permet de lancer le reste du processus )
if (verifName(firstName, firstNameError) &&
verifName(lastName, lastNameError) &&
verifName(city, cityError) &&
verifEmail(email, emailError) && verifAddress(address, addressError)) {
console.log("les datas du formulaires sont valides");
//envoi des data valides du formulaire dans notre objet
const formulaireDataOk = {
firstName: firstName.value,
lastName: lastName.value,
address: address.value,
city: city.value,
email: email.value,
}
//verification des data et stringification avant le post vers le serveur
infosServeur.contact = formulaireDataOk;
console.log("Voici le resultat de l'objet contact : ");
console.log(infosServeur.contact);
console.log("objet 'info serveur' avant stringification : ");
console.log(infosServeur);
let finalDataIdAndContact = JSON.stringify(infosServeur)
console.log("Voici le resultat stringifié: ");
console.log(finalDataIdAndContact)
// post de l'objet "contact" vers API
const postApiUrl = "http://localhost:3000/api/cameras/order";
const postdataCart = async function () {
try {
let response = await fetch(postApiUrl, {
method: "POST",
headers: {
"Content-Type": "application/json" //type de data envoyé au serveur
},
body: finalDataIdAndContact //body stringifié
});
if (response.ok) {
let data = await response.json()
console.log("Le post vers le srveur à fonctionné, voici les infos recupéres :");
console.log(data); //affiche l'objet retourné par notre serveur
//recupération des infos nécéssaires à la confirmation
let idConfirmation = (data["orderId"]) //id
console.log(idConfirmation);
let PrixConfirmation = (prixTotalPanier) //prix
console.log(PrixConfirmation);
//redirection vers la page de confirmation de commande (envoie des infos nécéssaires dans l'URL)
window.location = `confirmation.html?id=${data["orderId"]}&price=${PrixConfirmation}`;
} else {
console.error('reponse serveur : ', response.status);
}
} catch (e) { //catch permet de capturer l'erreur
console.log(e) //le console.log de (e) affiche l'erreur en question
}
}
postdataCart();
localStorage.clear();
}
});