57. Importing the FrontEnd

The main GitHub repository will include the frontend files, which contains all the files you can use and adapt.

Alternatively, you can download the folder from here and implement it outside the e-commerce_main directory.

701KB

FrontEnd.zip

archive

In this section and the following ones, we will adapt each HTML file to the Django format, linking each CSS file and function via URLs.

First, navigate to the css folder within the FrontEnd directory and copy its contents. Paste these files into the css folder inside the static directory of our website, replacing the existing main.css with the files from the FrontEnd folder.

Next, perform the same procedure for the images folder. Copy its contents from the FrontEnd directory and paste them into the images folder inside the static directory of our website, replacing any existing files.

In this case you dont need to delete the current files

Lastly, copy the contents of the javascript folders from the FrontEnd directory and paste them into the javascript folder inside the static directory of our website, replacing any existing files.

Then, in the base.html file (located in the templates folder), reference the newly imported JavaScript files alongside the already referenced main.js file.

base.html

<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/checkout.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/home.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/loja.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/produto.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/scripts.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/slider.js' %}"></script>

To test, force a page reset using Ctrl + F5. The background should turn white and the font should change accordingly. Additionally, verify that the price filters on the store page are still functioning correctly.

Important note: Make sure your main css file is called main.css and not main copy.css! Also verify any other files with that name.