40. View orders made

Next, we will add functionality for users to view their orders. To achieve this, we will:

1. Create a new view function called my_orders.

2. This function will handle the retrieval and display of all orders made by the user, redirecting them to a page that lists their order history.

views.py

@login_required
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}
    return render(request, 'user/my_orders.html', context)

Here's a explanation of the code:

• Decorator: @login_required

  • Ensures that the view is accessible only to authenticated users.

• Function Definition: def my_orders(request)

  • Defines a view function that handles HTTP requests.

• Get Client: client = request.user.client

  • Retrieves the client object associated with the currently authenticated user.

• Query Orders: orders = Order.objects.filter(finished=True, client=client).order_by("-end_date")

  • Filters Order objects to include only those that are finished and associated with the current client.

  • Orders the results in descending order by end_date.

• Context Creation: context = {"orders": orders}

  • Prepares a context dictionary containing the retrieved orders for rendering.

• Render Template: return render(request, 'user/my_orders.html', context)

  • Renders the my_orders.html template using the provided context, displaying the list of orders.

Since we've created a new view function, we also need to add a URL pattern for the my_orders view function in the urlpatterns list.

urls.py

path('myorders/', my_orders, name="my_orders"),  

To display the products for each order, we have two options: either display them directly through the my_orders view function or add a new @property to the Order class in the models.py file to retrieve the items.

We chose to add a new property to the Order class, as it provides greater flexibility for future scenarios.

models.py Order class

@property
    def items(self) :
        items_ordered = OrderedItem.objects.filter(order__id = self.id) #? gets all the items of the order
        return items_ordered

Next, we will create a new HTML file called my_orders.html inside the user template folder.

my_orders.html

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

{% block body %}

<h3>
    My orders
</h3>
<a href="{% url 'your_account' %}">My account</a>

{% for order in orders %}
<div style="display: flex;">
    <p>Date: {{ order.end_date }}</p>
    <p>Order ID: {{ order.id }}</p>
    <p>Transaction ID: {{ order.id_transaction }}</p>
    <p>Total Price: {{ order.total_cost }}</p>
    <p>Adress: {{ order.adress.zip_code }}, {{ order.adress.city }}-{{ order.adress.state }}</p>

    {% for item in order.items %}
        <img src= "{{ item.itemstock.product.image.url }}" width="50" height="75">
        <p>Product: {{ item.itemstock.product.name }}</p>
        <p>Quantity: {{item.quantity }}</p>
        <p>Total price: {{item.total_price }}</p>
    {% endfor %}
</div>
<hr>
{% endfor %}

{% endblock %}

Here's a explanation of the code:

• Template Inheritance: {% extends 'base.html' %}

  • Inherits from the base.html template, allowing for a consistent layout across pages.

• Static Files: {% load static %}

  • Loads the static file handling tags, which can be used to reference static files like images or stylesheets.

• Block Definition: {% block body %}

  • Defines a block named body where content specific to this template will be inserted.

• Header: <h3> My orders </h3>

  • Displays a heading for the page.

• Navigation Link: <a href="{% url 'your_account' %}">My account</a>

  • Creates a link to the 'your_account' view, which is defined in the URL configuration.

• Orders Loop: {% for order in orders %}

  • Iterates over each order object in the orders context variable.

  • Order Details:

    • <p>Date: {{ order.end_date }}</p>: Displays the end date of the order.

    • <p>Order ID: {{ order.id }}</p>: Displays the unique ID of the order.

    • <p>Transaction ID: {{ order.id_transaction }}</p>: Displays the transaction ID.

    • <p>Total Price: {{ order.total_cost }}</p>: Displays the total cost of the order.

    • <p>Address: {{ order.adress.zip_code }}, {{ order.adress.city }}-{{ order.adress.state }}</p>: Displays the address associated with the order.

  • Items Loop: {% for item in order.items %}

    • Iterates over each item in the order.items list.

    • Item Details:

      • <img src="{{ item.itemstock.product.image.url }}" width="50" height="75">: Displays an image of the product with specified dimensions.

      • <p>Product: {{ item.itemstock.product.name }}</p>: Displays the name of the product.

      • <p>Quantity: {{ item.quantity }}</p>: Displays the quantity of the product ordered.

      • <p>Total price: {{ item.total_price }}</p>: Displays the total price for this item.

  • Separator: <hr>

    • Inserts a horizontal line to separate each order.

• End Block: </div>

  • Ends the body block defined earlier.

To allow the user to access their orders, add an <a> tag linking to the my_orders page inside the your_account.html file. This will enable users to view all their orders from their account page.

your_account.html

<h3>
    Your account
</h3>
<a href="{% url 'my_orders' %}">My orders</a>

<a href="{% url 'perform_logout' %}">Logout</a>

{% endblock %}

Important Note: To view the orders, log into your admin account and manually set the finalized status of some orders to True within the Orders section. Also change other elements such as adress and end date (the orders are listed in descending order).

Now, all of the orders are displayed on the "My Orders" page. We will improve the front end of this page at a later stage.

Note: Ensure you are logged into the same account that corresponds to the finalized orders set in the admin page.