如何向我的购物车添加额外的商品？

Question

使用我当前的代码，我添加的项目在我的本地存储中，但它只显示我的购物篮中的一个

我不知道如何解决我的问题，你有什么想法吗？

function displayPanier(product) {
  
   function getTeddies() {
    let teddiesPanier = JSON.parse(localStorage.getItem("basketProducts"));
    return teddiesPanier; 
   }
   
   
   let teddiesPanier = getTeddies();

   //faire une boucle pour iterrer sur les produits dans le local storage

   function panierTeddies (){
     
   
       const panierStorage = document.getElementById("test")
       panierStorage.innerHTML = `
       <table class="table bg-light">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Photo</th>
            <th scope="col">Nom</th>
            <th scope="col">Prix</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td><img id=panierImg class="img-fluid" src="${teddiesPanier[0].imageUrl}"  style="max-width: 40px;"></td>
            <td><h5 class="font card-title">${teddiesPanier[0].name}</h5></td>
            <td><p class="card-text prix">${teddiesPanier[0].price / 100}€</p></td>
          </tr>
        </tbody>
      </table>
      <td><button onclick="removeProduct('${product}')" class="btn btn-primary">Supprimer</button></td>

   `
   }
   console.table(teddiesPanier)
   panierTeddies();
}

screenshhot basket with localstroage in console

Answer 1

好吧，您只使用 teddiesPanier[0]，它是数组的第一个元素，因此显然您不会显示其他项目（如果有的话）。你应该做一个循环来生成 tr 范围或其他东西......

这正是您在评论中用漂亮的法语写的，应该完全用英语写，连同您所有的变量和函数名称！

Answer 2

它只显示 (1) 个项目，因为您没有遍历 localStorage 中的项目数组。例如${teddiesPanier[0].name}.

您可以将代码修改为：

  panierStorage.innerHTML = `
       <table class="table bg-light">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Photo</th>
            <th scope="col">Nom</th>
            <th scope="col">Prix</th>
          </tr>
        </thead>
        <tbody>`;

      for (var i=1; i < teddiesPanier.length; i++) {
panierStorage.innerHTML += `
            <tr>
              <th scope="row">${i}</th>
              <td><img id=panierImg class="img-fluid" src="${teddiesPanier[i].imageUrl}"  style="max-width: 40px;"></td>
              <td><h5 class="font card-title">${teddiesPanier[i].name}</h5></td>
              <td><p class="card-text prix">${teddiesPanier[i].price / 100}€</p></td>
            </tr>
            `;
      }

panierStorage.innerHTML += `<td><button onclick="removeProduct('${product}')" class="btn btn-primary">Supprimer</button></td></tbody>
      </table>`;

如何向我的购物车添加额外的商品？

How do I add an additional item to my cart?

javascript

innerhtml

local-storage