Aula 17 – Loja Online – Django – Include Tag
Aula 17 – Loja Online – Django – Include Tag
Ecommerce – 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. 😉
