Online store on Steemit blockchain| Step Eight | Backend and Frontend.

Hello, friends!

Let's start with the frontend.
I cut it into pieces in order to avoid repetition of the code. Thus, I have two new files sidebar .html and navbar .html. In which you think you already guessed and there is a code from the sidebar and navbar.

After that, I integrated these pieces of code into the base file in this way. Through the standard django system. Block principle of integration.

Leaving in the main template the main class and the main content block.

I also integrated categories into the menu. Thus, when adding any category through the admin panel, it will automatically be displayed in the menu.

This function is implemented through a for loop, thereby sorting through and showing all the categories that are in the database in the product model.

We can observe that there are no other menu categories and subcategories. Since we have only one main category and four subcategories.

Now not much of a view.
I created views to filter products by category. So that the user can choose a programming language, and the site gives him the entire list of courses that are currently available.

If we need a Python category, then we just need to write the category and the name of the category itself.
The link looks like this:
http://127.0.0.1:8000/category/python

Be sure to write the path in the urls .py file.

Another of the points that we managed to implement today is to change a little design. Home page and category pages. Having made courses in the grid. And also highlight the time of the course.

The style of the main pictures was also changed, as they were displayed crookedly. And now they are the full width of the container.

I also solved the problem with displaying images from statics. I didn't forget a lot about the fact that the project must specify the path of the statics in order for it to start working correctly.

This is done in the project in the urls .py file.

In the next post, most likely there will already be a full-fledged template for a full course card. And we will also make automatic links to categories and buttons in more detail.

Thanks for supporting the project.

@rme , @rex-sumon , @shy-fox , @hungry-griffin, @pennsif

The project is being created in partnership with @steemit-market.

Above may be wrong. Since I wrote the code from memory and then corrected it. But git will have no errors.

Link to the git.

You can get acquainted with the project here.

This is the first part: Step one
This is the second part: Step two
This is the third part: Step three
This is the fourth part: Step four
This is the fifth part: Step five
This is the sixth part: Step Six
This is the eightth part: Step Eight

To be continued...

Sincerely, your @HardPhotographer