Корзина в телеграм боте с WebApp

[KitPolosa]

Здравствуйте, дорогие товарищи. Сейчас пишу свой диплом, а именно телеграм бот доставки продуктов на python с aiogram 3. Чтобы бот был чуть более уникальным я решил использовать относительно новую фишку телеграмма с WebApp, то есть каталоги с продуктам выглядят как полноценные окна в настоящем приложении. Для создания окон каталогов я использую html(css) и JavaScript. У меня уже реализована окно с продуктами, регулирование их количества, а также через JS информация успешно передается в бот, то есть бот сразу дает список выбранных продуктов через метод 'web_app'.

Однако у меня появились сложности с созданием полноценной корзины, чтобы бот запоминал все выбранные продукты, чтобы в него можно было добавлять новые, а также очищать всю корзину (желательно чтоб каждый товар в корзине можно было отдельно удалить). Можно без базы данных, так как это чисто шаблон по сути. Так что очень прошу помощи с реализацией корзины, сильно застопорился на этом моменте, что тут можно придумать. Также в видео, прикрепленном ниже, можете увидеть как всё работает.
Python скрипт 'main' с методом 'web_app', который выдает список выбранных продуктов:

@dp.message()
async def web_app(callback_query):
    json_data = callback_query.web_app_data.data
    parsed_data = json.loads(json_data)
    message = ""
    for item in parsed_data['items']:
        product_name = item['name']
        price = item['price']
        message += f"Продукт: {product_name}\n"
        message += f"Стоимость: {price}\n\n"
 
    message += f"Общая стоимость: {parsed_data['totalPrice']}"
 
    await bot.send_message(callback_query.from_user.id, f"""
{message}
""")

JavaScript со всеми основными функциями каталога:

let tg = window.Telegram.WebApp;
tg.expand();
tg.MainButton.textColor = '#FFFFFF';
tg.MainButton.color = '#2cab37';
let items = {
    item1: { id: "item1", price: 80, quantity: 0, name: "Молоко коровка из кореновки 2,5%" },
    item2: { id: "item2", price: 120, quantity: 0, name: "Масло сливочное кубанский молочник 82,5%" },
    item3: { id: "item3", price: 70, quantity: 0, name: "Творог коровка из кореновки 9%" },
    item4: { id: "item4", price: 47, quantity: 0, name: "Пломбир коровка из кореновки" },
    item5: { id: "item5", price: 100, quantity: 0, name: "Кефир коровка из кореновки 2,5%" },
    item6: { id: "item6", price: 150, quantity: 0, name: "Ряженка коровка из кореновки 2,5%" },
    item7: { id: "item7", price: 110, quantity: 0, name: "Йогурт коровка из кореновки" },
    item8: { id: "item8", price: 70, quantity: 0, name: "Сгущенка коровка из кореновки 8,5%" }
};
 
function updateQuantity(itemId, change) {
    let item = items[itemId];
    item.quantity += change;
    if (item.quantity < 0) item.quantity = 0;
    if (item.quantity > 10) item.quantity = 10;
    document.getElementById("qty" + itemId.slice(-1)).innerText = item.quantity;
    toggleItem(itemId);
}
 
function toggleItem(itemId) {
    let item = items[itemId];
    let btn = document.getElementById("add" + itemId.slice(-1));
    let subtractBtn = document.getElementById("subtract" + itemId.slice(-1));
 
    btn.classList.remove('added-to-cart');
    btn.style.display = 'inline-block';
    subtractBtn.style.display = 'inline-block';
 
    let totalPrice = calculateTotalPrice();
    if (totalPrice > 0) {
        tg.MainButton.setText(`Общая цена товаров: ${totalPrice}`);
        if (!tg.MainButton.isVisible) {
            tg.MainButton.show();
        }
    } else {
        tg.MainButton.hide();
    }
}
 
function openModal(element) {
            var productName = element.parentNode.querySelector('p').textContent;
            document.getElementById('product-name').textContent = productName;
            document.getElementById('my-modal').style.display = 'block';
        }
        function closeModal() {
    document.getElementById('my-modal').style.display = 'none';
}
 
document.getElementById("open-modal-btn").addEventListener("click", function() {
    document.getElementById("my-modal").classList.add("open")
})
 
document.getElementById("close-my-modal-btn").addEventListener("click", function() {
    document.getElementById("my-modal").classList.remove("open")
})
...................
Telegram.WebApp.onEvent("mainButtonClicked", function() {
    let data = {
        items: Object.values(items).filter(item => item.quantity > 0),
        totalPrice: calculateTotalPrice()
    };
    tg.sendData(JSON.stringify(data));
});
 
function calculateTotalPrice() {
    return Object.values(items).reduce((total, item) => total + (item.price * item.quantity), 0);
}
 
document.getElementById("add1").addEventListener("click", function() {
    updateQuantity("item1", 1);
});
 
document.getElementById("subtract1").addEventListener("click", function() {
    updateQuantity("item1", -1);
});
..........

HTML скрипт с каталогом продуктов:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <h1>Молочные продукты</h1>
    <div class="center">
        <div class="container">
            <div class="inner">
                <div class="item" id="item1">
                    <img src="image/11.png" alt="" class="img" id="open-modal-btn" onclick="openModal(this)">
                    <p>Молоко коровка из кореновки 2,5%</p>
                    <p>80 ₽</p>
                    <div class="btn-container">
                        <button class="btn" id="add1">+</button>
                        <span id="qty1">0</span>
                        <button class="btn" id="subtract1">-</button>
                    </div>
                </div>
                ..........
                <div class="modal" id="my-modal">
                    <div class="modal_box">
                        <button class="modal_close-btn" id="close-my-modal-btn" onclick="closeModal()">
                            <svg width="23" height="25" viewBox="0 0 23 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2.09082 0.03125L22.9999 22.0294L20.909 24.2292L-8.73579e-05 2.23106L2.09082 0.03125Z" fill="#333333"/>
                                <path d="M0 22.0295L20.9091 0.0314368L23 2.23125L2.09091 24.2294L0 22.0295Z" fill="#333333"/>
                            </svg>
                        </button>
                        <img src="image/11.png" alt="" class="img">
                        <h2>Молоко коровка из кореновки 2,5%</h2>
 
                        <p class="left"><span class="grey">Состав</span><br>
                            Цельное молоко, обезжиренное молоко<br>
                            <span class="grey">Количество</span><br>
                            900 мл<br>
                            <span class="grey">Цена</span><br>
                            80 ₽<br>
                            <span class="grey">Пищевая ценность на 100 г</span><br>
                            Белки: 3.0 г Жиры: 2,5 г Углеводы: 4,7 Калории: 55.0 ккал<br>
                            <span class="grey">Срок годности</span><br>
                            9 суток при температуре (4±2)°C
                        </p>
                    </div>
                </div>
            .........................
            </div>
        </div>
    </div>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script src="app.js"></script>
</body>
</html>

Видео как работает сам бот:
http://www.youtube.com/shorts/F9c-nlUg2Qw

[MakarovDs]

Создание корзины без базы данных

1. Сохранение корзины в локальном хранилище браузера

Используйте localStorage или sessionStorage браузера для хранения корзины в виде объекта.
localStorage сохраняется постоянно, а sessionStorage очищается при закрытии браузера.

2. Структура корзины

Объект корзины должен содержать список выбранных продуктов в виде массива объектов Product:

let basket = {
  products: [
    { id: "item1", quantity: 2 },
    { id: "item3", quantity: 1 },
  ],
  // Общая стоимость корзины
  totalCost: 0
};

3. Добавление продуктов в корзину

Используйте событие web_app бота, чтобы получать данные выбранных продуктов из WebApp.
Добавьте продукты в объект корзины или обновите их количество, если они уже есть.

@dp.message()
async def web_app(callback_query):
    json_data = callback_query.web_app_data.data
    parsed_data = json.loads(json_data)

    for item in parsed_data['items']:
        product_id = item['id']
        quantity = item['quantity']

        # Проверить, существует ли продукт в корзине
        if product_id in basket['products']:
            basket['products'][product_id]['quantity'] += quantity
        else:
            basket['products'].append({'id': product_id, 'quantity': quantity})

    # Обновить общую стоимость корзины
    basket['totalCost'] = calculate_total_cost(basket)

4. Получение корзины

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

5. Очистка корзины

Добавьте кнопку или команду для очистки корзины.
Сбросьте объект корзины или удалите его из локального хранилища.

6. Удаление отдельных товаров

Добавьте кнопки удаления для каждого товара в корзине.
Найдите товар в объекте корзины и уменьшите его количество на 1 или удалите его, если количество равно 0.