Dependendo do seu layout, talvez seja necessário ter as categorias mais visíveis no celular. Neste tutorial, vamos ver como adicionar uma navegação apenas para categorias, veja como fica:
HTML
A primeira coisa que vamos fazer é criar a pasta de navigation dentro da pasta snipplets.
1. Na navigation, adicionamos os dois snipplets a seguir com seus respectivos códigos:
navigation-categories.tpl
Neste arquivo listamos todas as categorias e subcategorias da loja.
{# All store categories and subcategories with links #}
{% for category in categories %}
{% if category.subcategories %}
<a href="#" class="js-modal-open modal-list-item" data-toggle="#category-{{ category.id }}">
{{ category.name }}
{% include "snipplets/svg/chevron-right.tpl" with {svg_custom_class: "icon-inline icon-lg modal-list-icon"} %}
</a>
{% else %}
<a href="{{ category.url }}" class="modal-list-item">
{{ category.name }}
</a>
{% endif %}
{% endfor %}navigation-categories-panel.tpl
Aqui nós chamamos o componente modal ou popup por meio de um embed. Este snipplet chama a si mesmo iterando por cada subcategoria.
{# Modals for each subcategory #}
{% embed "snipplets/modal.tpl" with{modal_id: 'category-' ~ category.id, modal_class: 'categories', modal_position: 'right', modal_transition: 'slide', modal_width: 'full', modal_head: true, modal_overlay: false, modal_close_left: true, modal_helper: 'pb-5'} %}
{% block modal_head %}
{{ category.name }}
{% endblock %}
{% block modal_body %}
<a href="{{ category.url }}" class="modal-list-item font-weight-bold">
{{ "Ver toda esta categoría" | translate }}
</a>
{% snipplet "navigation/navigation-categories.tpl" with categories = category.subcategories %}
{% endblock %}
{% endembed %}
{% for subcategory in category.subcategories %}
{% snipplet "navigation/navigation-categories-panel.tpl" with category = subcategory %}
{% endfor %}2. Temos que chamar o link que abre o popup que engloba todas as categorias. No layout Base nós colocamos dentro do snipplet header.tpl dentro da pasta snipplets/header, mas no seu caso pode ser outro arquivo. O importante é que esteja dentro da navegação principal do site.
{# Main tab link #}
<a href="#" id="toggle-mobile-categories" class="js-modal-open btn btn-block nav-tab" data-toggle="#main-categories">
{{ 'Categorías' | translate }}
{% include "snipplets/svg/chevron-down.tpl" with {svg_custom_class: "js-toggle-icon icon-inline icon-lg"} %}
{% include "snipplets/svg/chevron-up.tpl" with {svg_custom_class: "js-toggle-icon icon-inline icon-lg hidden"} %}
</a>3. Em seguida, adicionamos a classe js-head-main ao div que contém todo o had do site.
4. Dentro do mesmo tpl que editamos na etapa 2, mas fora da navegação do site, chamaremos os snipplets criados na etapa 1, da seguinte maneira:
{# Main categories modal #}
<div id="nav-mobile-categories" style="display: none;">
{% embed "snipplets/modal.tpl" with{modal_id: 'main-categories', modal_class: 'categories', modal_position: 'top', modal_transition: 'slide', modal_width: 'full', modal_overlay: false} %}
{% block modal_head %}
{% endblock %}
{% block modal_body %}
<a href="{{ store.products_url }}" class="modal-list-item font-weight-bold">
{{ 'Ver todos los productos' | translate }}
</a>
{% snipplet "navigation/navigation-categories.tpl" %}
{% endblock %}
{% endembed %}
{# Subcategories modals #}
{% for category in categories %}
{% snipplet "navigation/navigation-categories-panel.tpl" %}
{% endfor %}
</div>Podemos observar que novamente usamos um embed para o modal das categorias principais e, em seguida, adicionamos ao resto dos modais para as outras subcategorias, usando um for.
5. Agora precisamos criar o snipplet para o componente modal ou pop-up dentro da pasta snipplets. Este tpl é chamado modal.tpl e o código é:
{# /*============================================================================
#Modal
==============================================================================*/
#Properties
// ID
// Position - Top, Right, Bottom, Left
// Transition - Slide and Fade
// Width - Full and Box
// modal_form_action - For modals that has a form
// modal_overlay - used for modals with an overlay behind
// modal_head - to show a header on the modal
// modal_close_left - If true shows arrow left on modal header, else shows an X to close
#Head
// Block - modal_head
#Body
// Block - modal_body
#Footer
// Block - modal_footer
#}
<div id="{{ modal_id }}" class="js-modal modal modal-{{ modal_class }} modal-{{modal_position}} transition-{{modal_transition}} modal-{{modal_width}} transition-soft {% if not modal_overlay %}js-no-overlay modal-no-overlay{% endif %}" style="display: none;">
{% if modal_form_action %}
<form action="{{ modal_form_action }}" method="post" class="{{ modal_form_class }}">
{% endif %}
{% if modal_head %}
<div class="js-modal-close modal-header">
<span class="modal-close">
{% if modal_close_left %}
{% include "snipplets/svg/chevron-left.tpl" with {svg_custom_class: "icon-inline svg-icon-text"} %}
{% else %}
{% include "snipplets/svg/times.tpl" with {svg_custom_class: "icon-inline svg-icon-text"} %}
{% endif %}
</span>
{% block modal_head %}{% endblock %}
</div>
{% endif %}
<div class="modal-body">
{% block modal_body %}{% endblock %}
</div>
{% if modal_footer %}
<div class="modal-footer d-md-block">
{% block modal_foot %}{% endblock %}
</div>
{% endif %}
{% if modal_form_action %}
</form>
{% endif %}
</div>Se você já estava usando este snipplet antes, provavelmente precisará atualizar os outros locais onde o usou, adicionando os parâmetros modal_head: true e modal_overlay: true na incorporação.
5. Por último, para a parte HTML, precisamos adicionar uma pasta SVG dentro da pasta snipplets, onde adicionaremos os sniplpets para os ícones usados. Neste caso, eles serão os seguintes:
times.tpl
<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>chevron-down.tpl
<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"/></svg>chevron-up.tpl
<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M6.101 359.293L25.9 379.092c4.686 4.686 12.284 4.686 16.971 0L224 198.393l181.13 180.698c4.686 4.686 12.284 4.686 16.971 0l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L232.485 132.908c-4.686-4.686-12.284-4.686-16.971 0L6.101 342.322c-4.687 4.687-4.687 12.285 0 16.971z"/></svg>chevron-right.tpl
<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"/></svg>chevron-left.tpl
<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M231.293 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L70.393 256 251.092 74.87c4.686-4.686 4.686-12.284 0-16.971L231.293 38.1c-4.686-4.686-12.284-4.686-16.971 0L4.908 247.515c-4.686 4.686-4.686 12.284 0 16.971L214.322 473.9c4.687 4.686 12.285 4.686 16.971-.001z"/></svg>CSS
Requisito:
Ter adicionado helper classes em seu layout. Você pode seguir este pequeno tutorial para fazer isso (é só copiar e colar algumas classes, não leva mais que 1 minuto).
1. Adicionamos o seguinte SASS de cores em style-colors.scss.tpl (ou no stylesheet do seu layout que possui as cores e fontes da loja). Lembre-se de que as variáveis de cores e fontes podem variar em relação ao seu design:
@mixin prefix($property, $value, $prefixes: ()) {
@each $prefix in $prefixes {
#{'-' + $prefix + '-' + $property}: $value;
}
#{$property}: $value;
}
{# /* // Modals */ #}
.modal{
color: $main-foreground;
background-color:$main-background;
&-list-item{
border-bottom: 1px solid rgba($main-foreground, .1);
}
}
{# /* // Buttons */ #}
.btn{
text-decoration: none;
text-align: center;
border: 0;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-transform: uppercase;
background: none;
@include prefix(transition, all 0.4s ease, webkit ms moz o);
&:hover,
&:focus{
outline: 0;
opacity: 0.8;
}
&[disabled],
&[disabled]:hover{
opacity: 0.5;
cursor: not-allowed;
outline: 0;
}
}
.nav-tab{
border-top: 1px solid $main-foreground;
}2. Adicione os estilos no arquivo static/style-critical.tpl
Se em seu layout você usar um stylesheet para o CSS crítico, precisaremos do seguinte código dentro dele, mas se não for o caso, você poderá unificar o CSS dos passos 2 e 3 em um único arquivo.
.nav-tab{
padding: 10px;
font-weight: bold;
}3. Adicione os estilos no arquivo static/style-async.tpl
{# /* // Modals */ #}
.modal {
position: fixed;
top: 0;
display: block;
width: 80%;
height: 100%;
padding: 10px;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
transition: all .2s cubic-bezier(.16,.68,.43,.99);
z-index: 20000;
&-header{
width: calc(100% + 20px);
margin: -10px 0 10px -10px;
padding: 10px 15px;
font-size: 20px;
}
&-footer{
padding: 10px;
clear: both;
}
&-full {
width: 100%;
}
&-docked-sm{
width: 100%;
}
&-docked-small{
width: 80%;
}
&-top{
top: -100%;
left: 0;
}
&-bottom{
top: 100%;
left: 0;
}
&-left{
left: -100%;
}
&-right{
right: -100%;
&.modal-categories{
top: auto;
}
}
&-centered{
height: 100%;
width: 100%;
}
&-top.modal-show,
&-bottom.modal-show {
top: 0;
&.modal-categories{
top: auto;
box-shadow: -4px 0 17px 0 rgba(0, 0, 0, 0.23);
}
}
&-left.modal-show {
left: 0;
}
&-right.modal-show {
right: 0;
}
&-close {
display: inline-block;
padding: 1px 5px 5px 0;
margin-right: 5px;
vertical-align: middle;
cursor: pointer;
}
.tab-group{
margin: 0 -10px 20px -10px;
}
&-list-item{
position: relative;
display: block;
width: 100%;
padding: 15px 5px;
text-align: left;
font-size: 14px;
}
&-list-icon{
position: absolute;
right: 10px;
}
&-categories .modal-header{
margin-bottom: 0;
}
}
.modal-overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #00000047;
z-index: 10000;
}JS
1. Precisamos adicionar os JavaScript no arquivo store.js.tpl (ou onde você tem suas funções JS). O código que precisamos é o seguinte:
var head_height = $(".js-head-main").height();
{# Nav tab #}
$("#toggle-mobile-categories").click(function(e){
e.preventDefault();
var $this = $(this);
$this.toggleClass("active");
$this.find(".js-toggle-icon").toggle();
$("#nav-mobile-categories").toggle();
});
{#/*============================================================================
#Modals
==============================================================================*/ #}
var $modal_close = $('.js-modal-close');
var $modal_open = $('.js-modal-open');
$modal_open.click(function (e) {
e.preventDefault();
var $modal_id = $(this).data('toggle');
// Only show overlay for modals with overlay
if (!$($modal_id).hasClass("js-no-overlay")) {
$(".js-modal-overlay").fadeToggle();
}
if ($($modal_id).hasClass("modal-show")) {
$($modal_id).removeClass("modal-show").delay(200).hide(0);
} else {
// Only change modal positon inside DOM if it shows an overlay behind
if (!$($modal_id).hasClass("js-no-overlay")) {
$($modal_id).detach().insertAfter(".js-modal-overlay");
}
$($modal_id).show(0).addClass("modal-show");
}
});
$modal_close.click(function (e) {
e.preventDefault();
$(this).closest(".js-modal").removeClass("modal-show").delay(200).hide(0);
$(".js-modal-overlay").fadeOut(300);
});
$(".js-modal-overlay").click(function (e) {
e.preventDefault();
$(".js-modal.modal-show").removeClass("modal-show").delay(200).hide(0);
$(this).fadeOut(300);
});Traduções
Nesta etapa vamos adicionar os textos para as traduções no arquivo config/translations.txt
es "Categorías" pt "Categorias" en "Categories" es_mx "Categorías" es "Ver todos los productos" pt "Ver todos os produtos" en "See all products" es_mx "Ver todos los productos" es "Ver toda esta categoría" pt "Ver tudo desta categoria" en "See all this category" es_mx "Ver toda esta categoría"
Parabéns! Você já tem a navegação de categorias para celular no seu layout.