66. My orders Frontend

Next, we will update the My Orders page by modifying the my_orders.html file to enhance its layout and functionality.

my_orders.html

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

{% block body %}

<main class="principal">
    <section class="conta">
      <div class="conta__container">
        <div class="checkout__titulos">
          <p class="checkout__titulo">My Orders</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 %}
      </div>
    </section>
  </main>



{% endblock %}

Mobile view