Корзина в телеграм боте с 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