71. Unauthenticated user Order approved frontend
Lastly, we will update the order approval page displayed when an unauthenticated user completes a payment, enhancing its clarity and user experience. We will follow a similar structure of the my orders page.
We will update the order_aproved.html file:
{% extends 'base.html' %}
{% load static %}
{% block body %}
<main class="principal">
<title>Order {{ order.id }} aproved | Reserva</title>
<section class="conta">
<div class="conta__container">
<div class="checkout__titulos">
<p class="checkout__titulo">Your order was aproved!</p>
<p class="checkout__titulo" style="font-size:2rem;">Thank you for choosing us! We have sent an email to your account {{ order.client.email }} containing the details of your order. </p>
</div>
<div class="pedido">
<div class="pedido__cabecalho">
<div>
<p><b>Date:</b></p>
<p>{{ order.end_date }}</p>
</div>
<div>
<p><b>Total</b></p>
<p>R$ {{ order.total_cost }}</p>
</div>
<div>
<p><b>Order ID</b></p>
<p>{{ order.id }}</p>
</div>
<div>
<p><b>Transaction ID</b></p>
<p style="word-wrap: break-word;">{{ order.id_transaction }}</p>
</div>
</div>
<div class="pedido__corpo">
{% for item in order.items %}
<div class="pedido__individual">
<div class="tabela__imagem">
<img
src="{{ item.itemstock.product.image.url }}"
alt="{{ item.itemstock.product.name }}"
/>
</div>
<div class="tabela__produto-textos">
<p><b>{{ item.itemstock.product.name }}</b></p>
<p><b>Size:</b> {{ item.itemstock.size }}</p>
<p><b>Color:</b> {{ item.itemstock.color }}</p>
<p><b>Quantity:</b> {{ item.quantity }}</p>
<p><b>Total price:</b> R$ {{ item.total_price }}</p>
</div>
</div>
{% endfor %}
</div>
<p><b style="line-height: 2.6;">Adress: {{ order.adress.zip_code }}, {{ order.adress.city }}-{{ order.adress.state }}</b></p>
</div>
<a class="esquecer_senha" href="{% url 'store' %}">Make a new purchase</a>
</div>
</section>
</main>
{% endblock %}
We will also make a slight modification to the my_orders view function to include the client's email as a context variable. This will allow us to display the email on the "My Orders" page, similar to how it is shown on the unauthenticated users' order approval page.
def my_orders(request):
client = request.user.client #? gets the client associated with the current authenticated user user
orders = Order.objects.filter(finished=True, client=client).order_by("-end_date") #? gets all finished orders associated with the client user in descending date order
context = {"orders" : orders, "email" : client.email}
return render(request, 'user/my_orders.html', context)Here is the updated my_orders.html file:
{% extends 'base.html' %}
{% load static %}
{% block body %}
<main class="principal">
<title>My Orders | Reserva</title>
<section class="conta">
<div class="conta__container">
<div class="checkout__titulos">
<p class="checkout__titulo">My Orders</p>
<p class="checkout__titulo" style="font-size:2rem; text-align: start;">When making a new purchase, please check your email {{ email }} for more information. </p>
</div>
{% for order in orders %}
<div class="pedido">
<div class="pedido__cabecalho">
<div>
<p><b>Date:</b></p>
<p>{{ order.end_date }}</p>
</div>
<div>
<p><b>Total</b></p>
<p>R$ {{ order.total_cost }}</p>
</div>
<div>
<p><b>Order ID</b></p>
<p>{{ order.id }}</p>
</div>
<div>
<p><b>Transaction ID</b></p>
<p style="word-wrap: break-word;">{{ order.id_transaction }}</p>
</div>
</div>
<div class="pedido__corpo">
{% for item in order.items %}
<div class="pedido__individual">
<div class="tabela__imagem">
<img
src="{{ item.itemstock.product.image.url }}"
alt="{{ item.itemstock.product.name }}"
/>
</div>
<div class="tabela__produto-textos">
<p><b>{{ item.itemstock.product.name }}</b></p>
<p><b>Size:</b> {{ item.itemstock.size }}</p>
<p><b>Color:</b> {{ item.itemstock.color }}</p>
<p><b>Quantity:</b> {{ item.quantity }}</p>
<p><b>Total price:</b> R$ {{ item.total_price }}</p>
</div>
</div>
{% endfor %}
</div>
<p><b style="line-height: 2.6;">Adress: {{ order.adress.zip_code }}, {{ order.adress.city }}-{{ order.adress.state }}</b></p>
</div>
{% endfor %}
<a class="esquecer_senha" href="{% url 'store' %}">Make a new purchase</a>
</div>
</section>
</main>
{% endblock %}
Last updated