Chapter 7: Detail Listing Page - Django 3...2...1...Takeoff! Series

#django #python #webdev #tutorial

For this chapter, we will work on the detail view of the listings. If users want to see more pictures and more information about any particular listing, they will click on it to see this page.

Detail Listing URL

Open urls.py and add the following code.

path('all_listings//', views.detail, name='detail')

For the path to the detail listing page, we take the same path to all_listings but include detail_id which is the variable which will hold the listing number. For example, all_listings/1/ corresponds to listing number 1 (detail_id=1), and so for and so on.

Detail Listing View

Open views.py and add the following code.

def detail(request, detail_id):

Notice that we are adding to the detail function the parameter detail_id. We do this because we need the number in detail_id to get each individual listing.

detail = Listings.objects.get(id=detail_id)

We create a variable name detail which will store all objects for each listing depending on which listing users select. If a user selects to see the details of listing 1, then detail_id =1 which means that id= 1, so we’ll have the following, detail = Listings.objects.get(1) which means get all objects for listing 1. Same logic for the other listings.

context = {'detail': detail}
return render(request, 'listings/detail.html', context)

Finally, we store the variable detail in a dictionary as usual and pass it to the template, so that we can use it.

Detail Listing Template

Create a template called detail.html in the templates folder and add the following code.

Since we have passed the detail variable to the template, we can access the information by using the dot. In this template, we display extra information about each listing, and the photos associated with it. We haven’t included the photos yet, but we’ll do it in the next chapters.

The product type and the contact email fields are new in this page. You can play around with the templates. Maybe for the listings page you want to display only the title and condition, and once users click on an individual listing, then you show them most of the information. Don’t feel constrained by these examples and venture out to try new things.

Listings Template Revisited

Before we close the chapter, go back to the all_listings template and add the path to the detail page. Remember the View Listing button that we added in the previous chapters, let’s activate it.

Open all_listings.html and add the following code.

a class="btn" href="% url 'listings:detail' listing.id%">View Listing/a

The above line reads as follows. If someone clicks on the View Listing button/link, take them to the detail view of the listing and pass the ID of that listing. We use listing.id because remember that for this template, we use the variable listing to access the objects in the all_listings variable.

After you make this change, run the server, and test the link. Once you click on the View Listing button, you should be redirected to a page where you can see more details about the listing that you selected.

If you take a look at the URL for each invidual listing, you will see something like the screenshot below. The last part of the URL will change depending on the listing that you select.