No tutorial a seguir, adicionaremos e habilitaremos a funcionalidade Blog.
HTML
1. Para começar, criamos o blog.tpl com o seguinte código, dentro da pasta templates.
<div class="container">
{% embed "snipplets/page-header.tpl" with { breadcrumbs: true } %}
{% block page_header_text %}{{ "Blog" | translate }}{% endblock page_header_text %}
{% endembed %}
<section class="blog-page">
{% for post in blog.posts %}
{% if loop.index % 3 == 1 %}
<div class="row">
{% endif %}
{{ component(
'blog/blog-post-item', {
image_lazy: true,
image_lazy_js: true,
post_item_classes: {
item: 'col-md-4 item',
image_container: 'mb-2',
image: 'img-absolute img-absolute-centered fade-in',
title: 'font-big mb-2',
summary: 'mb-3',
read_more: 'btn-link d-inline-block',
},
})
}}
{% if loop.index % 3 == 0 or loop.last %}
</div>
{% endif %}
{% endfor %}
</section>
{% include 'snipplets/grid/pagination.tpl' with {'pages': blog.pages} %}
</div>
2. Em seguida, criamos o blog-post.tpl. Esse arquivo também deve ser adicionado à pasta de templates.
<div class="container container-narrow">
{% embed "snipplets/page-header.tpl" with { breadcrumbs: true} %}
{% block page_header_text %}{{ post.title | translate }}{% endblock page_header_text %}
{% endembed %}
<div class="blog-post-page">
{{ component(
'blog/blog-post-content', {
image_lazy: true,
image_lazy_js: true,
post_content_classes: {
date: 'mb-4 font-smallest',
image: 'img-fluid fade-in mb-4 pb-2',
content: 'mb-2',
},
})
}}
</div>
</div>
3. Agora, modificamos o breadcrumbs.tpl e adicionamos as entradas Blog e Blog Post.
{# /*============================================================================
#Page breadcrumbs
==============================================================================*/
#Properties
#Breadcrumb
//breadcrumbs_custom_class for custom CSS classes
#}
{% if breadcrumbs %}
<div class="breadcrumbs {{ breadcrumbs_custom_class }}">
<a class="crumb" href="{{ store.url }}" title="{{ store.name }}">{{ "Inicio" | translate }}</a>
<span class="divider">></span>
{% if template == 'page' %}
<span class="crumb active">{{ page.name }}</span>
{% elseif template == 'cart' %}
<span class="crumb active">{{ "Carrito de compras" | translate }}</span>
{% elseif template == 'search' %}
<span class="crumb active">{{ "Resultados de búsqueda" | translate }}</span>
{% elseif template == 'account.order' %}
<span class="crumb active">{{ 'Orden {1}' | translate(order.number) }}</span>
{% elseif template == 'blog' %}
<span class="crumb active">{{ 'Blog' | translate }}</span>
{% elseif template == 'blog-post' %}
<a href="{{ store.blog_url }}" class="crumb">{{ 'Blog' | translate }}</a>
<span class="divider">></span>
<span class="crumb active">{{ post.title }}</span>
{% else %}
{% for crumb in breadcrumbs %}
{% if crumb.last %}
<span class="crumb active">{{ crumb.name }}</span>
{% else %}
<a class="crumb" href="{{ crumb.url }}" title="{{ crumb.name }}">{{ crumb.name }}</a>
<span class="divider">></span>
{% endif %}
{% endfor %}
{% endif %}
</div>
{% endif %}
4. Agora, adicionamos o pagination.tpl na seguinte pasta snipplets/grid.
{% if infinite_scroll %}
{% if pages.current == 1 and not pages.is_last %}
<div class="text-center mt-5 mb-5">
<a class="js-load-more btn btn-primary">
<span class="js-load-more-spinner" style="display:none;">{% include "snipplets/svg/sync-alt.tpl" with {svg_custom_class: "icon-inline icon-spin"} %}</span>
{{ 'Mostrar más productos' | t }}
</a>
</div>
<div id="js-infinite-scroll-spinner" class="mt-5 mb-5 text-center w-100" style="display:none">
{% include "snipplets/svg/sync-alt.tpl" with {svg_custom_class: "icon-inline icon-3x svg-icon-text icon-spin"} %}
</div>
{% endif %}
{% else %}
<div class="d-flex flex-row justify-content-center align-items-center">
{% if pages.numbers %}
<a {% if pages.previous %}href="{{ pages.previous }}"{% endif %}>
{% include "snipplets/svg/chevron-left.tpl" with {svg_custom_class: "icon-inline icon-w-8 icon-lg"} %}
</a>
<div class="mx-2 font-big px-1">
{{ page.number }}
{% for page in pages.numbers %}
{% if page.selected %}
<span>{{ page.number }}</span>
{% endif %}
{% endfor %}
<span>/</span>
<span>{{ pages.amount }}</span>
</div>
<a {% if pages.next %}href="{{ pages.next }}"{% endif %}>
{% include "snipplets/svg/chevron-right.tpl" with {svg_custom_class: "icon-inline icon-w-8 icon-lg"} %}
</a>
{% endif %}
</div>
{% endif %}
CSS
Requisitos:
Depois de adicionar em seu design as classes auxiliares, você pode seguir este pequeno tutorial para fazer isso (basta copiar e colar alguns, não leva mais de 1 minuto).
Adição dos estilos dentro do arquivo static/style-critical.tpl
Se o seu design não usar uma folha de estilo para o CSS crítico, precisaremos do seguinte código dentro do CSS principal.
*============================================================================
#Blog
==============================================================================*/
.post-item-image-container {
position: relative;
height: 200px;
overflow: hidden;
}
.post-item-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.post-item-title,
.post-item-summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5em;
}
.post-content,
.post-content p {
font-size: 16px;
line-height: 1.8rem;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
margin: 2rem 0 1rem 0;
line-height: initial;
}
.post-content h1,
.post-content .h1 {
font-size: 28px;
}
.post-content h2,
.post-content .h2 {
font-size: 24px;
}
.post-content h3,
.post-content .h3 {
font-size: 20px;
}
.post-content h4,
.post-content .h4 {
font-size: 18px;
}
.post-content h5,
.post-content .h5 {
font-size: 16px;
}
.post-content h6,
.post-content .h6 {
font-size: 14px;
}
@media (min-width: 768px) {
.container-narrow {
max-width: 680px;
}
}
Traduções
Precisamos atualizar nosso arquivo de traduções, que pode ser encontrado como translations.txt e adicionar as seguintes traduções.
es "Blog" pt "Blog" en "Blog" es_mx "Blog"
Ativação
Atualmente, ao fazer login no painel de administração da loja, você perceberá que já tem a seção de blog ativada, o que permite criar, editar, publicar e excluir publicações na loja.
1. crie uma postagem e publique-a como uma postagem visível.
2. Adicionar o blog ao menu
