Aula 17 – Loja Online – Django – Include Tag

Aula 17 – Loja Online – Django – Include Tag

Ecommerce – Django – Include Tag

Loja Online - Django - Include Tag

Loja Online – Django – Include Tag

Voltar para página principal do blog

Todas as aulas desse curso

Aula 16                  Aula 18

Para baixar o código como está até agora, acesse o link abaixo:
https://github.com/toticavalcanti/django_ecommerce/tree/include_tag

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Esse é o link do código fluente no Pinterest

Meus links de afiliados:

Hostinger

Digital Ocean

One.com

Seguindo!

Vamos extender o base.html na src/products/templates/products/detail.html

src/products/templates/products/detail.html


{% extends "base.html" %}

{% block content %}
    {{ object.title }} 
    {{ object.description }} 
    {% if object.image %}
        <img src='{{ object.image.url }}' class='img-fluid'/>
    {% endif %}
{% endblock content %}

Isso chama-se herança, o {% extends “base.html” %} faz com que src/products/templates/products/detail.html herde de src/templates/base.html.

Tudo que tá dentro do {% block content %} ——- {% endblock content %} das páginas que herdam da base.html, é colocado no src/templates/base.html onde tem {% block content %} —— {% endblock content %}.

Agora, para fazer o css voltar a funcionar e poder dá formatação ao nossos htmls, utilizaremos o include.

Vamos colocar 2 includes no src/templates/base.html

src/templates/base.html


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Base Template</title>
        {% include 'base/css.html' %}
    </head>
    <body>
        {% block content %} {% endblock %}
        {% include 'base/js.html' %}
    </body>
</html>

Com os includes em laranja no html do base.html acima, estamos informando o caminho do css e do js para incluir no base.html.

Vamos criar o src/templates/base/navbar.html.

src/templates/base/navbar.html


<h1>NavBar</h1>

Por enquanto, vamos deixar só com esse h1.

Vamos incluir usando o include, o navbar no src/templates/base.html

src/templates/base.html


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Base Template</title>
        {% include 'base/css.html' %}
    </head>
    <body>
        {% include 'base/navbar.html' %}
        {% block content %} {% endblock %}
        {% include 'base/js.html' %}
    </body>
</html>

Com o servidor rodando, teste:

127.0.0.1:8000/contact/

127.0.0.1:8000/about/

127.0.0.1:8000/

Veja que o NavBar aparece em todas as páginas no canto superior esquerdo do browser.

A formatação também melhorou.

O /static_local/css/main.css é um css só para a src/templates/home_page.html.

Ele deixa tudo no <body> com a cor #ccc, ou seja, cinza claro.

Temos então que cortar o que tá em vermelho no src/templates/base/css.html


{% load static %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel='stylesheet' href='{% static "css/main.css" %}'>

E colar dentro de src/templates/home_page.html entre:

{% block base_head %} Colar entre essas tags {% endblock base_head%}

src/templates/home_page.html


{% extends "base.html" %}

{% load static %}

<title>Home Page Template</title>

{% block base_head %}
    <link rel='stylesheet' href='{% static "css/main.css" %}'>
{% endblock base_head%}

{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
             <p>{{ content }}</p>
    </div>
    <div class='container'>
	<div class='row'>
	    <div class='col'>
		<img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
		<p>{{ content }}</p>
	    </div>
	</div>

	{% if request.user.is_authenticated %}
	    <div class='row'>
		<div class='col'>
		    <h1>Premium</h1>
			<p>{{ premium_content }}</p>
		</div>
	    </div>
	{% endif %}
    </div>
{% endblock %}

Agora vamos no src/templates/base.html colocar o {% block base_head %} dentro do head que é onde se coloca o css.

src/templates/base.html


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Base Template</title>
        {% include 'base/css.html' %}
        {% block base_head %}{% endblock base_head %}
    </head>
    <body>
        {% include 'base/navbar.html' %}
        {% block content %} {% endblock %}
        {% include 'base/js.html' %}
    </body>
</html>

Com o servidor rodando, teste novamente:

127.0.0.1:8000/contact/

127.0.0.1:8000/about/

127.0.0.1:8000/

Na próxima vamos aprender mais coisas fazendo nossa navbar.

Aula 16                  Aula 18

Todas as aulas desse curso

Voltar para página principal do blog

Para baixar o código como está até agora, acesse o link abaixo:
https://github.com/toticavalcanti/django_ecommerce/tree/include_tag

Esse são meus link de afiliados na Hostinger: Hostinger

Link da página do Código Fluente no Facebook para vocês darem um 👍. 🙂
https://www.facebook.com/Codigofluente-338485370069035/

Pinterest:
https://br.pinterest.com/codigofluente/

Meu link de referidos na digitalocean .

Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:

Digital Ocean

E o da one.com:

One.com

Obrigado, até a próxima e bons estudos. 😉

 

 

About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>