1

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>
Yuri Lavrik
  • 65
  • 6
  • Welcome to StackOverflow. Please read and follow the posting guidelines in the help documentation, as suggested when you created this account. [On topic](http://stackoverflow.com/help/on-topic), [how to ask](http://stackoverflow.com/help/how-to-ask), and [... the perfect question](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) apply here. StackOverflow is not a design, coding, research, or tutorial resource. However, if you follow whatever resources you find on line, make an honest coding attempt, and run into a problem, you'd have a good example to post. – Prune Jan 03 '19 at 17:57
  • I've upgraded/edited the question, I hope it's more appropriate now. – Yuri Lavrik Jan 06 '19 at 12:11
  • You've done more than that: you've worked past your initial troubles and run into a different problem. Again, please refer to the intro tour documents. The proper way to handle this is to revert to your original question, select the answer you used as "best", and post a new question for your new troubles. – Prune Jan 07 '19 at 16:25
  • 1
    Sorry for the mess. Reverted the question and marked the answer as the best. The new problem, with the form data not sending, I've solved it too just recently, so it's all good now :) – Yuri Lavrik Jan 07 '19 at 22:05

1 Answers1

0

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

B_Dex_Float
  • 142
  • 2
  • 11