Проблема с корзиной на js/jquery

Question

И так постараюсь расписать более подробно проблемы. Их несколько, так как я еще новичек в этом.

Нужно обновлять страницу чтобы товар появился в корзине.
Нету понятия как сделать счетчик по кнопке, смотрел кучу всего но не хрена не понял)
Удаление товаров по кнопке. Использую для сохранения корзины localStorage. Буду рад помощи и подсказкам. Все элементы товара получаю из бд -> PHP

cart.js



dishes.forEach((el, idx) => {
  const button = el.childNodes[7]
  const title = el.childNodes[1].innerText
  const price = el.childNodes[5].innerText
  const weight = el.childNodes[3].innerText
  
  button.addEventListener("click", () => {  
      const cart_storage = localStorage.getItem("cart") || "[]"
      const cart = JSON.parse(cart_storage)
      const card = {title, price, weight}
      localStorage.setItem("cart", JSON.stringify([...cart, card]))
      console.log(cart_storage)
  })
})

const itemlist = document.querySelector(".calculator__item-list")
const cart_storage = JSON.parse(localStorage.getItem("cart") || "[]")
if (cart_storage.length) {
  cart_storage.forEach(el => {
    const {title, price, weight} =el
    const newCart = document.createElement("div")
    newCart.innerHTML =`
    <div class='calculator__item-title'>${title}</div>
      <div class='calculator__item-info'>
      <div class='calculator__item-weight'>${weight}</div>
      </div>
        <div class='calculator__item-bottom'>
          <div class='calculator__item-controls'>
          <button class='calculator__item-add calculator__btn' value="0">+</button>
            <div class='calculator__item-amount'>1</div>
            <button class='calculator__item-remove calculator__btn' value="0">-</button>
              </div>
                <div class='calculator__item-price'>${price}</div>
                <button class='calculator__item-delete default-btn'>Удалить</button>
               </div>`
    itemlist.appendChild(newCart)

  })
}

index.php

<html class="no-js" lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Корзина столовой</title>
<meta content="" name="description">
<meta content="" name="keywords">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/stylecart.css" rel="stylesheet" type="text/css">
<link href="assets/css/main.css" rel="stylesheet" type="text/css">
<script src="assets/js/jquery-3.6.0.min.js"></script>
</head>
<body class="page">
    <section class="page__wrapper page__main"><div class="container">
        <div class="menu">
        <div class="menu-header-main">
            <span class="menu__title">Меню на сегодня </span>
        </div>

<?php
    include("assets/backendsql/response.php");
    $newObj = new products();
    $group_tab = $newObj->get_groups();
?> 

<div class="menu__filter">
    <span class="menu__filter-item active" data-section="all">Все блюда</span>
    <?php foreach($group_tab as $key => $emp) :?>
        <span class="menu__filter-item" data-section=<?php echo $emp['product_group_id']?>><?php echo $emp['group_name']?></span>
    <?php endforeach;?>
    </div>
    <div class="menu__main">
        <div class="tabs_container">
            <div class="tabs-item active tabs-1">
                <div class="assortment">
                        <table>
                            <thead>
<tr class="assortment__header">
<th class="assortment-title assortment-title--name">Название блюда</th>
<th class="assortment-title assortment-title--price">Цена <span class="hidden-mobile assortment-title--info"> (руб)</span>
<th class="assortment-title assortment-title--weight">Выход <span class="hidden-mobile assortment-title--info"> (гр)</span>
</tr>
</thead>
</table>
</div>
<table>
<tbody>
<?php foreach($group_tab as $key => $empgroup) :?>
        <tr class="assortment__section">
            <tr>
                <td class="assortment__title dishes" data-section=<?php echo $empgroup['product_group_id']?> colspan="2" id="1"><?php echo $empgroup['group_name']?></td>
            </tr>
            
            <?php foreach($newObj->getProducts($empgroup['product_group_id']) as $key => $emp) :?>
            <div>
                <tr class="assortment__item dishes" data-section=<?php echo $empgroup['product_group_id']?>> 
                    <div><td class="assortment__item-title assortment__item-title--name itemLinkModal"><?php echo $emp['product_name'] ?></td></div>
                    <div><td class="assortment__item-title assortment__item-title--weight"><?php echo $emp['product_weight'] ?> гр.</td></div>
                    <div><td class="assortment__item-title assortment__item-title--price"><?php echo $emp['product_price'] ?> ₽</td></div>
                    <div><td class="assortment__item-add"><button class="default-btn"><span class="hidden-desk">+</span>  <span class="hidden-mobile">Добавить</span></td></button></div>
                </tr>
            </div>
    <?php endforeach;?>
    <?php endforeach;?>
</tbody>
</table>
</div>
</div>
<div class="menu__right-block">
    <a href="https://vk.com/horoshaya_stolovaya_lesnoy" target="_blank" class="menu__pdf">
    <p>Скачать меню</p>
</a>

<div class="menu__calc calculator">
    <div class="calculator__title">Ваш заказ</div>
        <div class="calculator__desk"></div>
            <div class="calculator__item-list">
                </div>
        <div class="calculator__footer">
            
            <div class="calculator__result-title">итого</div>
            <div class="calculator__result"><span class="calculator__result--price">0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="assets/js/cart.js"></script>
<script src="assets/js/filter.js"></script>
<script src="assets/js/jquery.mask.js"></script>
</body>
<div
  class='hidden'
  data-name='<?php echo $emp['product_name'] ?>'
  data-weight='<?php echo $emp['product_weight'] ?>'
  data-price='<?php echo $emp['product_price'] ?>'
></div>
</html>```

БЛОГ НА HUSL

Проблема с корзиной на js/jquery

Ответы (0 шт):