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
| let cameraContainer = document.getElementById('cameras')
//récupération de l'id du produit
function getId(){
const param = window.location.search
const id = param.replace("?id=","") //récupération de l'id et création d'une constante
if (!id) throw new Error ('il manque l\'id')
return id
}
//récupération du produit séléctionner
fetch ("http://localhost:3000/api/cameras/" + getId())
.then(cameras => cameras.json())
.then(cameras => {
console.log(cameras)
function afficherLeProduit(appareilphoto) {
const divProduits = document.createElement('div');
cameraContainer.appendChild(divProduits);
divProduits.className = 'divProducts'
console.log(divProduits)
const divImg = document.createElement('div');
divProduits.appendChild(divImg);
divImg.className = 'divImg'
const imgProduits = document.createElement('img');
divImg.appendChild(imgProduits);
imgProduits.src = appareilphoto.imageUrl;
imgProduits.className = 'imgProducts';
console.log(imgProduits)
const h2Produits = document.createElement('h2');
divProduits.appendChild(h2Produits);
h2Produits.textContent = appareilphoto.name;
h2Produits.className = 'h2Products';
console.log(h2Produits)
const blocProduit = document.createElement("div");
divProduits.appendChild(blocProduit);
blocProduit.className = "blocProduct";
const textProduct = document.createElement('p');
blocProduit.appendChild(textProduct);
textProduct.textContent = appareilphoto.description;
textProduct.className = 'textProduct';
const optionLabel = document.createElement('label');
blocProduit.appendChild(optionLabel);
optionLabel.textContent = 'Choix' + ' ';
optionLabel.className = 'optionLabel';
const optionSelect = document.createElement('select');
blocProduit.appendChild(optionSelect);
const optionValeur = [];
const camerasQuantity = document.createElement('div');
blocProduit.appendChild(camerasQuantity);
camerasQuantity.className = 'quantity';
const camerasQuantityText = document.createElement('p');
camerasQuantity.appendChild(camerasQuantityText);
camerasQuantityText.textContent = 'Quantité';
const camerasQuantityInput = document.createElement('input');
camerasQuantity.appendChild(camerasQuantityInput);
camerasQuantityInput.setAttribute('type','number');
camerasQuantityInput.setAttribute('value',1);
camerasQuantityInput.setAttribute('min',1);
camerasQuantityInput.className = 'quantity_input';
const priceDiv = document.createElement('div');
blocProduit.appendChild(priceDiv);
priceDiv.className = 'priceDiv';
const priceProduct = document.createElement('p');
priceDiv.appendChild(priceProduct);
priceProduct.textContent = 'Prix:'+' '+ appareilphoto.price /100 + " "+ "€";
priceProduct.className = 'priceProduct';
const divBtn = document.createElement('div');
divProduits.appendChild(divBtn);
divBtn.className = 'divBtn';
const btnSend = document.createElement('button');
divBtn.appendChild(btnSend);
btnSend.className = "btnSend"
btnSend.innerHTML =`<a class="liens" href="panier.html" >Ajouter</a>`
const btnReturn = document.createElement('button');
divBtn.appendChild(btnReturn);
btnReturn.className = "btnReturn";
btnReturn.innerHTML =`<a class="liens" href="index.html" >Retour</a>`;
for (let i = 0 ; i < cameras.lenses.length; i = i + 1){
console.log(cameras.lenses[i])
optionValeur.push(document.createElement('option'))
optionSelect.appendChild(optionValeur[i]);
optionValeur[i].innerHTML = cameras.lenses[i];
optionSelect.setAttribute('value',cameras.lenses[i])
optionSelect[i].id = ('value', cameras.lenses.value)
}
btnSend.addEventListener('click',envoiDuProduit)
function envoiDuProduit(e){
//j'impose une condition de sélectionner une quantité
if (camerasQuantityInput.value == 0 ){
alert('Veuillez sélectionner une quantité')
e.preventDefault();
}else{
//si la condition est respectée
priceProduct.textContent = ((cameras.price / 100) * (+camerasQuantityInput.value)) + '€'
let camerasBasket = {
id : cameras._id,
name : cameras.name,
price : cameras.price/100,
description : cameras.description,
imageUrl : cameras.imageUrl,
optionSelect: optionSelect.value,
qty : camerasQuantityInput.value
}
//affiche dans le local storage
let objectifOption = JSON.stringify(camerasBasket);
localStorage.setItem(cameras._id, objectifOption);
const lenses = document.getElementsByTagName('select')
buttonSend = JSON.parse(localStorage.getItem('cameras'))
alert (camerasQuantityInput.value + " " + appareilphoto.name + ' ' + optionSelect.value + ' ajouté au panier')
}
}
}
afficherLeProduit(cameras)
}) |
