Bonjours à tous , j'ai un problème je n'arrive pas à mettre les valeurs d'un produit dans le local Storage pour un panier , si quelq'un peut m'aider pls ?

On m'a dit qu'il faut que je donne un paramètre à getArticles dans AddPanier pour récupérer l'id du produit mais je sais pas quoi mettre.

Mon lien Git Hub au cas où : https://github.com/MaximusGen/MaximePaupy_5_12072021

// CHERCHER LES ELEMENTS ET LES DISPLAYS
const imgElt = document.getElementById("img");
const h1Elt = document.getElementById("name-produit");
const priceElt = document.getElementById("price-produit");
const stockElt = document.getElementById("stock-produit");
const lensesElt = document.getElementById("lenses");
const btnElt = document.getElementById("buttonAdd");

(async function () {
  const articleId = getArticleId();
  const article = await getArticles(articleId);
  hydrateArticle(article);
})();

function getArticleId() {
  return new URL(location.href).searchParams.get("id");
}

async function getArticles(articleId) {
  return fetch(`http://localhost:3000/api/cameras/${articleId}`)
    .then(function (response) {
      return response.json();
    })
    .then(function (articles) {
      return articles;
    })
    .catch(function (error) {
      alert("Une erreur est survenue");
    });
}

function hydrateArticle(article) {
  imgElt.src = `${article.imageUrl}`;
  h1Elt.textContent = `Appareil Photo ${article.name}`;
  priceElt.textContent = `Prix: ${article.price / 100}€`;
  stockElt.textContent = "En stock";

  for (let i = 0; i < article.lenses.length; i++) {
    let option = document.createElement("option");
    option.innerText = article.lenses[i];
    lensesElt.appendChild(option);
  }
}

//  LOCAL STORAGE

if (localStorage.getItem("userPanier")) {
  console.log("le panier de l'utilisateur existe dans le localStorage");
} else {
  console.log(
    "Le panier n'existe pas, il va être créer et l'envoyer dans le localStorage"
  );

  //Le panier est un tableau de produits
  let panierInit = [];
  localStorage.setItem("userPanier", JSON.stringify(panierInit));
}

//L'user a maintenant un panier
let userPanier = JSON.parse(localStorage.getItem("userPanier"));

//Au clic de l'user pour mettre le produit dans le panier

addPanier = () => {
  btnElt.addEventListener("click", async function () {
    const produit = await getArticles();
    userPanier.push(produit);
    localStorage.setItem("userPanier", JSON.stringify(userPanier));
    console.log("Le produit a été ajouté au panier");
    alert("Vous avez ajouté ce produit dans votre panier");
  });
};

addPanier();

Ce que je veux

Obtenir les valeurs de l'objet , nom de l'article et le prix pour le localStorage

Ce que j'obtiens

Je n'obtiens pas de valeurs

1 réponse


Hello,

Si tu console.log userPanier tu obtiens quoi exactement ?

(async function () {
  const articleId = **await** getArticleId(); <= manquerai pas un await ici ?
  const article = await getArticles(articleId);
  hydrateArticle(article);
})();