он дал мне ошибку, говорит, что cart.map () не является функцией

Question

здесь я работаю над проектом с vanilia javascript, и проблема всего кода заключается в том, что у меня есть ошибка в третьем разделе, говорят, что cart.map () не является функцией, хотя это массив

let cart = [];
let buttonsDom = [];

document.querySelector(".fa-cart-plus").addEventListener("click", function () {
  document.querySelector(".cart").classList.add("showCart");
  document.querySelector(".cart-overlay").classList.add("transparentBcg");
});
closeCartBtn.addEventListener("click", function () {
  document.querySelector(".cart").classList.remove("showCart");
  document.querySelector(".cart-overlay").classList.remove("transparentBcg");
});
class getData {
  async getProduct() {
    try {
      let data = await fetch("products.json");
      let response = await data.json();
      let products = response.items;
      products = products.map((product) => {
        let id = product.sys.id;
        let { title, price } = product.fields;
        let img = product.fields.image.fields.file.url;
        // console.log(id, title, price, img);
        return { id, title, price, img };
      });
      return products;
    } catch (err) {
      console.log(err);
    }
  }
}

class UI {
  // show the products in dom page
  AppendProductsTOPage(data) {
    let result = ``;
    data.forEach((product) => {
      result += `
       <article class="product">
          <div class="img-container">
           <img class="product-img" src=${product.img}   > 
            <button class="bag-btn" data-id=${product.id}>
            add to
              <i class="fa fa-shopping-cart"> </i>
            </button>
            <h3>${product.title}</h3>
            <h4>${product.price}</h4>
          </div>
          </article>
      
      `;
    });
    productDom.innerHTML = result;
  }
  //  add event on the button for everyelement

  implementButton() {
    let boxButton = [...document.querySelectorAll(".bag-btn")];
    buttonsDom = boxButton;
    boxButton.forEach((btn) => {
      let id = btn.dataset.id;

      let inCart = cart.find((item) => item.id === id);
      console.log(inCart);

      if (inCart) {
        btn.disabled = true;
        btn.innerHTML = "in card";
      }
      btn.addEventListener("click", (e) => {
        e.target.disabled = true;
        e.target.innerHTML = "added to card";

        let buttnonCopy = { ...Storage.getSoloProduct(id), amount: 1 };

        cart = [...cart, buttnonCopy];
        console.log(`the cart 1 > ${cart}  `);

        // 1- get the elemen from the products
        Storage.getSoloProduct(id);

        // 2- add  it to card localstorage
        Storage.AddProductToCard(cart);
        // 3- set card value
        Storage.setcardValue(cart);
        // 4- append it to the card page
        Storage.appendCardItems(buttnonCopy);
        console.log(buttnonCopy);
        // 5- show the card
        this.OpenCard();
      });
    });
  }

  OpenCard() {
    document.querySelector(".cart").classList.add("showCart");
    document.querySelector(".cart-overlay").classList.add("transparentBcg");
  }
  clearAll() {
    clearCartBtn.addEventListener("click", () => {
      this.clearCard();
    });
    cartContent.addEventListener("click", (e) => {
      if (e.target.classList.contains("remove-item")) {
        let itemd = e.target;
        let id = itemd.dataset.id;
        this.removeItems(id);
        Storage.AddProductToCard(cart);
        cartContent.removeChild(itemd.parentElement.parentElement);
      } else if (e.target.classList.contains("fa-chevron-up")) {
        let item = e.target;
        let id = item.dataset.id;
        let temitems = cart.find((item) => item.id === id);
        temitems.amount += 1;
        Storage.AddProductToCard(cart);
        Storage.setcardValue(cart);
        item.nextElementSibling.innerHTML = temitems.amount;
      } else if (event.target.classList.contains("fa-chevron-down")) {
        let chevronDown = event.target;
        let id = chevronDown.dataset.id;
        let tempItem = cart.find((item) => item.id == id);
        tempItem.amount -= 1;

        if (tempItem.amount > 0) {
          Storage.AddProductToCard(cart);
          Storage.setcardValue(cart);
          chevronDown.previousElementSibling.innerHTML = tempItem.amount;
        } else {
          cartContent.removeChild(chevronDown.parentElement.parentElement);
          this.removeItems(id);
        }
      }
    });
  }
  clearCard() {
    let allItemsInCart = cart.map((item) => item.id);
    allItemsInCart.forEach((id) => this.removeItems(id));
    while (cartContent.children.length > 0) {
      cartContent.removeChild(cartContent.children[0]);
    }
  }
  removeItems(id) {
    cart = cart.filter((item) => item.id !== id);
    Storage.setcardValue(cart);
    Storage.AddProductToCard(cart);
    let button3 = this.gettingButon(id);
    console.log(button3);

    button3.disabled = false;
    button3.innerHTML = `<i class="fa fa-shopping-bag">add to card</i>`;
  }
  gettingButon(id) {
    return buttonsDom.find((item) => {
      return item.dataset.id == id;
    });
  }
  creatApp() {
    cart = Storage.starting();
    Storage.setcardValue(cart);
    this.publish(cart);
    this.OpenCard();
  }
  publish(cart) {
    cart.forEach((item) => {
      return Storage.appendCardItems(item);
    });
  }
}

class Storage {
  // save all products to the localstorage
  static saveProducts(data) {
    localStorage.setItem("products", JSON.stringify(data));
  }
  // get solo items from products
  static getSoloProduct(id) {
    let items = JSON.parse(localStorage.getItem("products"));
    let item2 = items.find((item) => {
      return item.id === id;
    });
    return item2;
  }
  // add solo items to localstorage card
  static AddProductToCard(item) {
    localStorage.setItem("card", JSON.stringify(item));
  }

здесь это дает мне ошибку, говорят, что [cart.map () не является функцией] в функции setcardvalue

 1. List item

  static setcardValue(cart) {
    let TemTottalPrice = 0;
    let tempitems = 0;
    cart.map((item) => { 
      TemTottalPrice += item.price * item.amount;
      tempitems += item.amount;
    });
    cartTotal.innerHTML = parseFloat(TemTottalPrice.toFixed(2));
    cartItems.innerHTML = tempitems;
  }
  static appendCardItems(item) {
    let div2 = document.createElement("div");
    div2.classList.add("cart-item");
    div2.innerHTML = `
     
            <img src=${item.img} alt=${item.id} />
            <div>
              <h4>${item.title}</h4>
              <span class="remove-item">remove</span>
            </div>
            <div>
              <i class="fa fa-chevron-up" data-id=${item.id}></i>
              <p class="item-amount">${item.amount}</p>
              <i class="fa fa-chevron-down" data-id=${item.id}></i>
            </div>
         
      `;
    cartContent.appendChild(div2);
  }

Я пробовал много способов решить эту проблему, но не получил конец, не могли бы вы мне помочь в этом