连接功能以协同工作并进行数量计数

如何解决连接功能以协同工作并进行数量计数

我为“电子商务应用程序”启动了一个练习项目，我需要帮助，我不知道如何以最佳方式实现该项目。我尝试使用构造函数，但现在没有结果，我正在用常规方式编写它功能，我被困住了。谁能给我一些提示，我应该怎么做以及如何进行这个项目。

我也坚持在代码中添加数量计数，无论我做什么数量始终为0或1。 我应该重构所有东西并使它们全部以某种方式一起工作还是执行什么工作，我感到困惑。

let products = [];
let cart = {};

function Shop() {
  addProduct(
    document.querySelector("#add"),document.querySelector("#pName"),document.querySelector("#price"),document.querySelector("#desc")
  );
  createCart();
}

function addProduct(eHandler,name,price,desc) {
  eHandler.addEventListener("submit",e => {
    e.preventDefault();
    if (!products[products.length]) {
      products[products.length] = {
        name: name.value,price: price.value,desc: desc.value,};
    }
    renderProducts(products,document.querySelector("#shop-items"));
  });
}

function renderProducts(products,container) {
  let { name,desc,quantity = 0 } = products[products.length - 1];
  const template = `

        <h1>${name}</h1>
        <h3>${price}$</h3>
        <p>${desc}</p>
    
    `;
  const itemContainer = document.createElement("div");
  itemContainer.innerHTML = template;
  itemContainer.classList.add("shop-item");

  const orderButton = document.createElement("button");
  orderButton.classList.add("shop-order-button");
  orderButton.setAttribute("name",name);
  orderButton.innerHTML = "Add to Cart";
  orderButton.addEventListener("click",() => {
    cart[name] = {
      name,quantity: quantity++,addToCart: cartHandler => {
        cartHandler.innerHTML += `<p>${name},${price}<p>,${quantity}`;
      },};
    orderButton.setAttribute("disabled",true);
    cart[name].addToCart(handleCart());
    console.log(cart);
  });

  itemContainer.appendChild(orderButton);
  container.appendChild(itemContainer);
}

function createCart() {
  let cartContainer = document.createElement("div");
  cartContainer.classList.add("updateCart");
  document.body.prepend(cartContainer);
  return cartContainer;
}

function handleCart() {
  return document.querySelector(".updateCart");
}

Shop();