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)
}) |
Partager