23. Creating checkout page

For the current iteration, our checkout page will include the following information:

• Option to return to cart

• Order ID

• Total cost of the order

• Total quantity of products

• Selection of delivery address

• Email submission to finalize the order

First, we will edit our checkout function inside the views.py file:

views.py

def checkout(request): 
    #! getting the client
    if request.user.is_authenticated:
        client = request.user.client
    else :
        if request.COOKIES.get('id_session') :
            id_session = request.COOKIES.get("id_session")
            client, created = Client.objects.get_or_create(id_session=id_session)
        else : #? if the client enters directly on the cart, whithout generating cookies
            return redirect('store') #? return directly to the store as the cart should be empty
    order, created = Order.objects.get_or_create(client=client, finished=False) 
    addresses = Adres.objects.filter(client=client) #? filters all adresses associated with the client
    context = {"order" : order, "addresses" : addresses}
    return render(request, 'checkout.html', context) 

Checkout Function Update:

• Updates the checkout function to handle user sessions and client retrieval.

• Checks if the user is authenticated to retrieve the associated client object.

• If not authenticated, checks for a session ID in cookies to identify or create a client.

• Redirects to the store page if no session ID is found, assuming an empty cart state.

• Fetches or creates the relevant order associated with the client.

• Retrieves all addresses linked to the client for selection during checkout.

• Renders the checkout page with client details, order information, and address options.

For a readable representation of the address, displaying the client, street, and city, we will add the __str__ method to the Adres model inside the models.py file.

'Adres' model

def __str__(self) -> str:
        return f"{self.client} - {self.street} - {self.city}"

In the checkout.html file, we will incorporate the previously mentioned information. This includes displaying the order ID, total quantity, and price of items. Additionally, we will include a form where users can select an address and provide their email (if they are not authenticated) to complete the purchase

checkout.html

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

{% block body %}

<h3>
    Checkout
</h3>

<a href = "{% url 'cart' %}">Return to Cart</a>

<h4>Order ID: {{ order.id }}</h4>
<p>Total Price: R$ {{ order.total_cost }}</p>
<p>Total Quantity: {{ order.total_quantity }}</p>

<form method="POST" action="">
        {% csrf_token %}
        <h3>Select the delivery address</h3>
    {% 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 %} 
        <h4>Fill in your email to finish your order</h4>
        <input type="email" placeholder="email"> <!--Placeholder is the transparent text that appears before-->
    {% endif %}

</form>


{% endblock %}

To facilitate testing, we will create two addresses associated with the same user account using the admin page

Adding a address

Added two adresses to the same client

Checkout page for authenticated clients

checkout page for non-authenticades clients

Reminder: Visual enhancements will be addressed at the end of the project.