C# Razor foreach with shopping cart

[Permudious]

Goodmorning,

I am trying to build a webshop where I've got an issue to add items to a cart.
In my case I have 3 simple Items (Cookies, Cakes and Donuts) and only the first item will be added in the cart by pressing on the add cart button.
I really do not see why it is not working.

<div class="MainContainer">

    @foreach (var Product in Model.Products)
    {
        string useImagePath;
        @if (@Product.ImagePath != "") { useImagePath = Product.ImagePath; } else { useImagePath = "images/products/noimage.png"; }

        <div class="SubContainer">
            <div class="card">
                <img src="@useImagePath">
                <div id="container">
                    <div class="ProdTitle">@Product.ProductName</div>
                    <div class="prodSubTitle">€ @Product.Price</div>
                    <div class="prodAllergys">
                        <center>
                            @if (Product.Egg == "1")
                            {
                                <img class="imgAllergy" src="images/allergys/egg.png" title="egg">
                            }
                            @if (Product.Gluten == "1")
                            {
                                <img class="imgAllergy" src="images/allergys/gluten.png" title="gluten">
                            }
                            @if (Product.Lactose == "1")
                            {
                                <img class="imgAllergy" src="images/allergys/milk.png" title="milk">
                            }
                            @if (Product.Lupin == "1")
                            {
                                <img class="imgAllergy" src="images/allergys/lupin.png" title="lupin">
                            }
                            @if (Product.Nuts == "1")
                            {
                                <img class="imgAllergy" src="images/allergys/nuts.png" title="nuts">
                            }
                            @if (Product.Peanuts == "1")
                            {
                                <img class="imgAllergy" src="images/allergys/peanuts.png" title="peanuts">
                            }
                            @if (Product.Soy == "1")
                            {
                                <img class="imgAllergy" src="images/allergys/soy.png" title="soy">
                            }
                          
                        </center>
                        <button id="@Product.ProductId">Add item</button>
                    </div>
                </div>

            </div>

        </div>
    }
</div>

@foreach (var Product in Model.Products)
{
    <script>
        let cart = {};
        var total = 0;

        function addItem(name, price) {
            if (!cart[name]) {
                cart[name] = 0;
            }
            cart[name]++;
            total += price;
        }

        function displayCart() {
            document.getElementById("cart-items").innerHTML = "";
            for (let name in cart) {
                document.getElementById("cart-items").innerHTML += `<li>${name}: ${cart[name]}</li>`;
            }
            document.getElementById("total").innerHTML = `Total: €${total.toFixed(2)}`;
        }

        document.getElementById("@Product.ProductId").onclick = function () {
            addItem("@Product.ProductName", @Product.Price);
            displayCart();
        };
    </script>
}

Can someone see what the problem is?

 

[JayC]

Do each of your items have a unique product ID?

Any errors in the console?

P.S - GitHub Copilot is a game changer for stuff like this.

 

[Permudious]

Do each of your items have a unique product ID?

Any errors in the console?

P.S - GitHub Copilot is a game changer for stuff like this.

Hi Jay,

Yes every Product has its own ProductId, there were no errors in the console so far I've seen.
I solve it to add the simple JS inside the foreach below my button to add them in the cart.