如何在不刷新页面的情况下创建购物车以在其中添加多个项目

Question

I am building an online shop website model for a CS50 project and I am currently having a trouble with creating a shopping cart.

I can build a very simple model of a cart where I'd redirect a user to some add_to_cart() function on a button click for all the "Buy" buttons on the page.

What I am trying to achieve is to do it without redirecting to another page on every click. For example, I've seen online shops with many items and their according "Buy" buttons on a page, and on a button click I simply see a counter on Cart element increasing, and a user can continue shopping on the page and only go to the Cart page to finalize the purchase when they are done.

I have this block of a template code that I am working with atm trying to solve the required Python, and probably some JS code to go with it:

<form action="/catalog" method="post">
{% for item in goods %}
            <li class="list-group-item list-item-no-leftpad">
                <div class="item-info-description">
                    <p><a href="/item?id={{ item.item_id }}">{{ item.brand }} {{ item.model }}</a>
                    <p>{{ item.short_description }}
                </div>
                <div class="item-info-offers">
                    <p>Price: ${{ item.price }}
                    <p>In stock: {{ item.in_stock }}
                    <p><button type="submit" class="btn btn-primary" name="buy" value="{{ item.item_id }}">Buy</button>                            
                </div>
            </li>
{% endfor %}
</form>

Answer 1

The issue is that every time a user tries to update the item, the browser is making a POST request to your web server (or application). This involves POST -ing the form data and re-generating the whole page and displaying the updated contents to the user. This is handled in the <form action="/catalog" method="post">

What you are looking for is Client side code to update store and update information based on interaction from the user. The tried and tested method is to use cookies (to store information) and JavaScript (to modify it). The simplest way to store the cart info (or rather organize it) is by to use JSON (which is just a string in the end) and store it in the cookie.

So what you need to do is:

1. Do not POST every time a user tries to update the cart. To do that;
2. In your client-side code, add an event listener for the button click for all the items that you display.
3. Add a different button that POST 's any additional info (Cookies are sent automatically by the browser)
4. Read the cookie server-side and generate a checkout page (or any other result based on your business logic)

Here are a few references to get you started.

UPDATE: You might want to use local storage API instead, in order to better comply with GDPR.

JS - Cookies
JS - React to button clicks
JS - Get clicked object