search

60. Homepage FrontEnd & navbar changes

hashtag
Homepage

To update the frontend of our homepage, we will integrate the HTML structure from the home.html file located in the Frontend folder into homepage.html using Django's template system.

Specifically, the content within the <main> tag of home.html will be copied and integrated into homepage.html.

main tag of the home.html file

The code is organized into three sections, each representing a different type of banner. For our use case, we will utilize only the grid banner. As a result, the carrosel and banner-individual sections will be removed.

Within the banner-grid section, we will retain only the first <a> tag, as this will serve as a template for dynamically rendering banners from our database.

The updated homepage.html code is shown below:

Create some banners with filters to test
Now, the homepage displays all the banners appropriately

hashtag
Navbar changes

Currently, the navbar displays all types, regardless of their association with specific categories. To ensure the navbar shows only the types linked to each category, we will modify two components:

  1. navbar.html: Update the code to dynamically render only the types related to each category.

  2. category_type function in new_context.py: Adjust the logic to filter and pass the appropriate types for each category.

The updated implementations for both files are provided below:

Since the order of the types matches the order of the categories obtained from the categories_navbar queryset, we created a joined list combining both categories and types. This allows us to unpack the paired lists directly within the for loops in the HTML file for seamless rendering.

Note: If no types are available for a category, the message "No products available" will be displayed.

In the navbar.html file, update the images displayed for each category inside the div with the class cabecalho__expansao-tipos to load dynamically based on the category's associated image. Additionally, implement a category filter so that clicking on an image filters products by the selected category.

In the models.py file, add an image attribute to the Categoric class, then apply the migrations to update the database schema.

Now, the navbar dynamically displays the respective types associated with each category.
Previous59. Navigation bar FrontEndNext61. Store side filters Frontend

Last updated