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.