Как сделать так чтобы отображалось столько товаров что в корзине

Я сделал функцию, которая отображает добавленный в корзину товар в определенном div на другой странице, но при тестировании возникает проблема. Например:

добавление продукта, например, с лицензией MP3 и ценой 20 долларов США
продукт с лицензией Wav без тегов и ценой 27 долларов США
нажав продолжить покупку
переходит к checkout.html (как и должно быть)
но div отображает только последний продукт, добавленный в корзину, а не все продукты.

Это мой код: вот страница продукта, где есть функция добавления в корзину


      <header>
        <!--Nav-->
        <div class = "nav container">
          <a href = "">Deni Beatz</a>
          <!--Cart Icon-->
          <i class = "bx bx-shopping-bag" id = "cart-icon"></i>
          <div class = "notification" id = "cart-notification">0</div>
          <!--Cart-->
          <div class = "cart">
            <h2 class = "cart-title">Your Cart</h2>
            <!--Content-->
            <div class = "cart-content">
              <div class = "cart-content">
                
              </div>
            </div>
            <!--Total-->
            <div class = "total">
              <div class = "total-title">Total</div>
              <div class = "total-price" id = "total-price total">$0</div>
            </div>
            <!--Buy Button-->
            <form action = "checkout.html">
            <button type = "button" class = "btn-buy" onclick = "window.location.href = 'checkout.html';">Continue to purchase</button>
            </form>
            <!--Cart Close-->
            <i class = "bx bx-x" id = "close-cart"></i>
            <!-- Continue to purchase button moved here -->
          </div>
        </div>
      </header>

          <section id = "prodetails" class = "section-p1">
            <div class = "productcontainer" id = "enjoy">
                <div class = "single-pro-image">
                  <img src = "../data/high.png"  width = "100%" id = "product-image" class = "product-img">
                </div>
            
                <div class = "single-pro-details" action = "C:\s\starter-ruby\client\checkout.html">
                  <h4 class = "product-title" id = "title">Enjoy</h4>
                  <h2 id = "price" class = "price">$20</h2>
                  <select id = "select" class = "licence">
                    <option>Select Licence</option>
                    <option>MP3</option>
                    <option>Tagged Wav</option>
                    <option>Un-Tagged Wav</option>
                    <option>Stems</option>
                    <option>Exlusive</option>
                  </select>
    
                    <script>
                      let select = document.getElementById('select');
                      let price = document.getElementById('price');
    
                      // Prices
                      let prices = {
                        "Select Licence": '$20',
                        "MP3": '$20',
                        "Tagged Wav": '$27',
                        "Un-Tagged Wav": '$30',
                        "Stems": '$120',
                        "Exlusive": '$300'
                      }
    
                      // When the value of select changes, this event listener fires and changes the text content of price to the coresponding value from the prices object
                      select.addEventListener('change', () => {
                        price.textContent = prices[select.value];
                      });
                    </script>
                    <button class = "add-cart">Add To Cart <i class='bx bx-cart-add add-cart'></i></button>
                    <h4>Product Details</h4>
                    <span>Lil Tjay x Trap Type Beat - "Enjoy" in key D# Minor and 160 BPM,It has vibe of Lil Tjay , Pop Smoke and more , Prices are great for this type of beat;Tagged Mastered MP3 for $25,$27 for Tagged Unmastered Wav,$30 for Untagged unmastered Wav,$70 for Stems and $120 for Exlusive</span>
                </div>
                <div id = "audio">
                    <audio controls style = "width:100%;" id = "audio-clip">
                        <source src = "Audio/Enjoy 160 x D sharp minor.mp3" type = "audio/mp3">
                    </audio>
                </div>
              </section> 

              <script>
                // ADD IMAGE AND AUDIO AND ADD + TO OPEN AND CLOSE BOX! GREAT JOB-FOR WORKING WITH HEADACHE
                const addToCartButton = document.querySelector('.add-cart');
if (addToCartButton) {
  addToCartButton.addEventListener('click', () => {
    const productTitle = document.querySelector('#title').textContent;
    const productPrice = document.querySelector('#price').textContent;
    const selectedLicense = document.querySelector('#select').value;
    
    const cartItem = {
      title: productTitle,
      price: productPrice,
      license: selectedLicense
    };
    
    localStorage.setItem('cartItem', JSON.stringify(cartItem));
  });
}

              </script>

и вот страница оформления заказа, на которой отображается только последний товар, добавленный в корзину


  <h2 style = "text-align:center;">Checkout</h2>
<div id = "cart-items">
  <p style = "text-align:center;">YOU ADDED THIS PRODUCTS</p>
  <hr />
  <div class = "product-container">
    <button class = "toggle-button"><span id = "t-name"></span> <span id = "t-price"></span> +</button>
    <div class = "cart-items"></div>
  </div>
</div>

<div class = "total">
  <h3 style = "text-align:center;">Tax: <br><span id = "tax"></span></h3>
  <h3 style = "text-align:center;">Subtotal: <br><span id = "subtotal"></span></h3>
  <h3 style = "text-align:center;">Total: <br><span id = "total"></span></h3>
  <a href = "http://localhost:4242"><button style = "display:block;">Continue to payment</button></a>
</div>

<script>
  const cartItemsDiv = document.querySelector('.cart-items');
  const storedCartItem = localStorage.getItem('cartItem');
  const taxRate = 0.10; // 10% tax rate

  if (storedCartItem) {
    const cartItem = JSON.parse(storedCartItem);
    const cartItemElement = document.createElement('div');

    cartItemElement.innerHTML = `
      <h3>${cartItem.title}</h3>
      <p>Price: ${cartItem.price}</p>
      <p>License: ${cartItem.license}</p>
    `;
    cartItemsDiv.appendChild(cartItemElement);

    // Parse price as a number and remove dollar sign
    const price = Number(cartItem.price.replace('$', ''));

    const subtotal = document.querySelector('#subtotal');
    subtotal.textContent = `$${price}`;

    const tax = document.querySelector('#tax');
    tax.textContent = `$${(price * taxRate).toFixed(2)}`;

    const total = document.querySelector('#total');
    total.textContent = `$${(price + (price * taxRate)).toFixed(2)}`;
  }
</script>

javascript html

15.04.2023 11:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

    <script>
                // ADD IMAGE AND AUDIO AND ADD + TO OPEN AND CLOSE BOX! GREAT JOB-FOR WORKING WITH HEADACHE
                const addToCartButton = document.querySelector('.add-cart');
if (addToCartButton) {
  addToCartButton.addEventListener('click', () => {
    const productTitle = document.querySelector('#title').textContent;
    const productPrice = document.querySelector('#price').textContent;
    const selectedLicense = document.querySelector('#select').value;
    
    const cartItem = {
      title: productTitle,
      price: productPrice,
      license: selectedLicense
    };
    
    localStorage.setItem('cartItem', JSON.stringify(cartItem));
  });
}

              </script>

здесь ваша функция добавления в корзину заменяет уже существующий элемент, который является элементом вашей корзины в локальном хранилище, новым элементом, вместо этого вы можете поместить элементы в массив и сделать то же самое, что решит вашу проблему. Вы можете отобразить элементы на странице оформления заказа, прокручивая этот массив.

Надеюсь это поможет.

15.04.2023 11:46

localStorage перезаписывается каждый раз, когда вы нажимаете кнопку. Именно поэтому у вас в нем всегда будет только один элемент, последний продукт. Другой подход - сохранить массив в локальном хранилище:

сначала получить и проанализировать локальное хранилище
нажмите ваш новый элемент на localstorage
затем setItem

пример, чтобы получить локальное хранилище: let store = JSON.parse(localStorage.getItem('cartItem')) || [];

15.04.2023 11:51

Ответ принят как подходящий

Вы должны создать массив и нажать каждый элемент. Измените страницу продукта следующим образом;

<script>
// ADD IMAGE AND AUDIO AND ADD + TO OPEN AND CLOSE BOX! GREAT JOB-FOR WORKING WITH HEADACHE
var selectedItems = [];
const addToCartButton = document.querySelector('.add-cart');
if (addToCartButton) {
    addToCartButton.addEventListener('click', () => {
        const productTitle = document.querySelector('#title').textContent;
        const productPrice = document.querySelector('#price').textContent;
        const selectedLicense = document.querySelector('#select').value;
        
        const cartItem = {
            title: productTitle,
            price: productPrice,
            license: selectedLicense
        };

        selectedItems.push(cartItem);

        console.info(selectedItems);
        
        localStorage.setItem('selectedItems', JSON.stringify(selectedItems));
    });
}

</script>

И измените страницу оформления заказа, чтобы они отображались с помощью цикла for;

<script>
      const cartItemsDiv = document.querySelector(".cart-items");
      const storedCartItem = localStorage.getItem("selectedItems");
      const taxRate = 0.1; // 10% tax rate

      if (storedCartItem) {
        const cartItem = JSON.parse(storedCartItem);

        for (let i = 0; i < storedCartItem.length; i++) {
          const cartItemElement = document.createElement("div");

          cartItemElement.innerHTML = `
          <h3>${cartItem[i].title}</h3>
          <p>Price: ${cartItem[i].price}</p>
          <p>License: ${cartItem[i].license}</p>
          `;
          cartItemsDiv.appendChild(cartItemElement);
          
        }
        

      

        // Parse price as a number and remove dollar sign
        const price = Number(cartItem.price.replace("$", ""));

        const subtotal = document.querySelector("#subtotal");
        subtotal.textContent = `$${price}`;

        const tax = document.querySelector("#tax");
        tax.textContent = `$${(price * taxRate).toFixed(2)}`;

        const total = document.querySelector("#total");
        total.textContent = `$${(price + price * taxRate).toFixed(2)}`;
      }
    </script>

Cengiz, я попробовал, и это работает, спасибо за решение моей проблемы!

— 15.04.2023 13:36

У меня есть еще одна ошибка, не могли бы вы помочь мне с ее решением - stackoverflow.com/questions/76024837/…

— 15.04.2023 23:24

15.04.2023 12:10