24. Completing the checkout page

First, we will proceed to update the form section within the checkout.html file.

views.py

<form method="POST" action="">
        {% csrf_token %}
        <h3>Select the delivery address</h3>
        <a href="{% url 'add_address' %}">delivery address</a>
        <br>
    {% for address in addresses %}
    <input type="radio" name="adress" value="{{ address.id }}"> <!--Radio button -> choose one option, all connected to the same name. Value is what is sent to the website-->
    <label for= "{{ address.id }}">{{ address.city }} - {{ address.state }} - {{ address.street }} - {{ address.number }} - {{ address.apartment }} - {{ address.zip_code }}</label> <!--Button text, for tag vinculates each button the the size-->
    <br>
    {% endfor %}

    {% if not request.user.is_authenticated %} 
        <hr>
        <h4>Fill in your email to finish your order</h4>
        <input type="email" placeholder="email"> <!--Placeholder is the transparent text that appears before-->
    {% endif %}
    <hr>
    <input type="hidden" value="{{ order.total_cost }}" name="total">
    <button type="submit">Confirm Order - R$ {{ order.total_cost }}</button>
</form>

The recent changes include:

• Added an <a> tag with an href attribute linked to a new URL 'add_address', allowing clients to add an unregistered address.

• Inserted a hidden input field <input type="hidden" value="{{ order.total_cost }}" name="total"> to transmit the total_cost of the order to the server-side application during form submission, facilitating accurate processing of the checkout process.

• Included a <button> element with type="submit" to confirm the order.

For now, the 'action' parameter will remain empty as we plan to implement a payment system on the site in a later phase of the project.

As previously mentioned in checkout.html, we now need to define the 'add_address' URL in both urls.py and views.py files.

views.py under checkout

def add_address(request) :
    context = {}
    return render(request, 'add_address.html', context)

urls.py

path('addaddress/',add_address, name="add_address"),

Note: Append the path at the end of the list in the urls.py file (excluding the urls.py located inside the ecommerce folder).

Finally, we will create an HTML file named add_address.html within the templates folder.

add_address.html

{% extends 'base.html' %}
{% load static %}

{% block body %}

<h3>
    Add Address
</h3>

{% endblock %}

Checkout page

Add Address page