68. Checkout page Frontend

Next, we proceed to modify the checkout.html file to enhance its functionality and design.

checkout.html

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

{% block body %}


<main class="principal">
    <title>Checkout | Reserva</title>

    <section class="secao-checkout">
      <a href="{% url 'cart' %}" class="checkout__botao">Return to the Cart</a>

      <div class="checkout">
        

        <form
          class="checkout__form"
          action="{% url 'finish_order' order.id %}"
          method="post"
        >
        {% csrf_token %}

          <!--Showing different divs if the user is authenticated-->
          {% if not request.user.is_authenticated %} 
          <div
            class="checkout__secao-entrega-login"
          >
            <div class="checkout__secao-login">
              <div class="checkout__titulos">
                <p class="checkout__titulo">Identifique-se</p>
              </div>

              <div class="checkout__endereco-item">
                <label for="email">E-mail</label>
                <input name="email" type="email" />
              </div>
            </div>

            <div class="checkout__secao-entrega">
              <div class="checkout__titulos">
                <p class="checkout__titulo">Endereço de entrega</p>
                <a
                  class="checkout__botao checkout__botao--entrega"
                  href="{% url 'add_address' %}"
                  type="button"
                >
                Add delivery address
                </a>
              </div>

              <div class="checkout__endereco-cadastrado">
                {% for address in addresses %}
                <div class="checkout__pagamento-item">
                  <input type="radio" name="adress" value="{{ address.id }}" />
                  <label for="{{ address.id }}"
                    >{{ address.street }}, nº{{ address.number }}, {{ address.apartment }}, ZIP Code {{ address.zip_code }}, City {{ address.city }}-{{ address.state }}</label
                  >
                </div>
                {% endfor %}
              </div>
            </div>
          </div>

          {% else %}

          <div
            class="checkout__secao-entrega-login checkout__secao-entrega-login--logado"
          >

          <div class="checkout__secao-entrega">
            <div class="checkout__titulos">
              <p class="checkout__titulo">Endereço de entrega</p>
              <a
                class="checkout__botao checkout__botao--entrega"
                href="{% url 'add_address' %}"
                type="button"
              >
              Add delivery address
              </a>
            </div>

            <div class="checkout__endereco-cadastrado">
              {% for address in addresses %}
              <div class="checkout__pagamento-item">
                <input type="radio" name="adress" value="{{ address.id }}" />
                <label for="{{ address.id }}"
                  >{{ address.street }}, nº{{ address.number }}, {{ address.apartment }}, ZIP Code{{ address.zip_code }}, City {{ address.city }}-{{ address.state }}</label
                >
              </div>
              {% endfor %}
            </div>
          </div>
          </div>
          {% endif %}

          <div class="checkout__secao-pagamento-infos">
            <div class="checkout__secao-pagamento">
              <div class="checkout__titulos">
                <p class="checkout__titulo">Formas de Pagamento</p>
              </div>

              <div class="checkout__pagamento-formas">
                <div class="checkout__pagamento-item">
                  <p for="cartao_credito">Cartão de Crédito</p>
                </div>

                <div class="checkout__pagamento-item">
                  <p for="boleto">Boleto</p>
                </div>

                <div class="checkout__pagamento-item">
                  <p for="pix">PIX</p>
                </div>
                
                <div class="checkout__pagamento-item">
                  <b><p for="pix">After creating the payment link you will have 1 hour to complete the transfer</p></b>
                </div>

              </div>
            </div>

            <div class="checkout__secao-infos">
              <div class="checkout__titulos checkout__titulos--mb">
                <p class="checkout__titulo">Summary</p>
              </div>

              <div class="subtotal__infos">
                <p>Total Quantity</p>
                <p>{{ order.total_quantity }}</p>
              </div>

              <div class="subtotal__infos subtotal__infos--sborda">
                <p>Total Cost</p>
                <p>R$ {{ order.total_cost }}</p>
              </div>
              <input type="hidden" value="{{ order.total_cost }}" name="total">


              <button style="margin-bottom: 2rem;" class="subtotal__botao" type="submit">
                Confirm Order
              </button>
              {% if error %}
                {% if error == "conflicting_cost" %}
                    <p class="checkout_erro">Invalid product total cost. Try again or return to the cart.</p>
                {% endif %}
                    
                {% if error == "adress" %}
                    <p class="checkout_erro">Select a delivery adress to continue.</p>
                {% endif %}
                    
                {% if error == "email" %}
                    <p class="checkout_erro">Fill in your email to continue.</p>
                {% endif %}
                
                {% if error == "email_in_use" %}
                    <p class="checkout_erro">Account with that email already exists. Log in or use another.</p>
                {% endif %}
              {% endif %}
            </div>
          </div>
        </form>
      </div>
    </section>
  </main>


{% endblock %}

Desktop view

Mobile view