En el siguiente tutorial, vamos a agregar y habilitar la funcionalidad de Blog.
HTML
1. Para empezar creamos el blog.tpl con el siguiente código, dentro de la carpeta de 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. Luego creamos el blog-post.tpl, este archivo debe agregarse tambien en la carpeta 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. Ahora modificamos el breadcrumbs.tpl y agregamos las entradas para Blog y 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. Agregamos ahora el pagination.tpl en la siguiente carpeta 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
Requisito:
Tener agregados en tu diseño las clases helpers, Podés seguir este pequeño tutorial para hacerlo (simplemente es copiar y pegar algunas, no toma mas de 1 minuto).
Agregando los estilos dentro del archivo static/style-critical.tpl
Si en tu diseño no usas una hoja de estilos para el CSS crítico, vamos a necesitar el siguiente código dentro de tu 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;
}
}Traducciones
debemos actualizar nuestro archivo de traducciones, podes encontrarlo como translations.txt y agregar las siguientes traducciones
es "Blog" pt "Blog" en "Blog" es_mx "Blog"
Activación
Actualmente cuando entras al panel de administrador de la tienda podras observar que tienes habilitada la sección del blog, que te permite crear, editar, publicar y eliminar los posts en la tienda.
1. Crear un post y publicarlo como visible
2. Agregar el blog al Menú
