Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Navegación mobile con tabs

La Navegación mobile con tabs mejora la Navegación mobile basada en el botón "Hamburguer". 

Esta mejora sería una nueva versión por lo que es importante que primero tengas la Navegación mobile implementada para pasar de algo como esto:

A tener esto:

Esta nueva navegación distribuye los links de la siguiente forma:

  • Todo los links relacionados a páginas que no sean categorías van a pasar a ubicarse dentro del panel que se muestra al hacer click en el botón Hamburguer.
  • Los links de idioma y relacionados a la cuenta del cliente (crear cuenta o login) también pasarán al panel conectado al Hamburguer
  • Tendremos tres tabs principales que atraviesan el flujo de compra y son:
    • Inicio: Continuara siendo un link que lleva a la home del sitio
    • Productos: Al ser clickeado mostrará un listado de todas las categorías y subcategorías de la tienda
    • Carrito: Dependiendo si tu tienda tiene el Carrito de compras rápida o no, mostrará el mismo o llevará al cliente a la página del carrito.
  • Por último tendremos un botón para realizar un busqueda el cual al ser clickeado mostrará el campo para realizar la misma.

Los siguientes pasos están basados en la plantilla Lifestyle, la cual usa Bootstrap 2 pero si tu plantilla usa Bootstrap 3 solo deberás reemplazar las clases de CSS "visible-phone" y "hidden-phone" por "visible-xs" y "hidden-xs".

1. En el archivo navigation-mobile.tpl reemplazá todo su contenido con lo siguiente:

<div class="visible-phone js-mobile-nav mobile-nav js-search-container">
    <div class="js-mobile-first-row mobile-nav_first-row row-fluid">
        <div class="mobile-nav_hamburger-btn visible-phone pull-left">
            <div class="menu-btn">
                <i class="fa fa-bars mobile-nav_hamburger-btn-icon"></i>
            </div>
        </div>
        <div class="mobile-nav_page-title">
            {% snipplet "mobile-page-title.tpl" %}
        </div>
        <div class="js-toggle-mobile-search js-toggle-mobile-search-open mobile-nav_search-btn visible-phone text-center pull-right">
            <i class="fa fa-search mobile-nav_search-btn-icon"></i>
        </div>
    </div>
    <div class="js-mobile-search-row row-fluid mobile-nav_search-row">
        <form action="{{ store.search_url }}" method="get" class="js-search-form mobile-nav_search-form">
            <div class="input-prepend">
                <span class="add-on js-search-back-btn js-toggle-mobile-search mobile-nav_search-back-btn">
                    <i class="fa fa-chevron-left mobile-nav_search-icon" aria-hidden="true"></i>
                </span>
                <input class="mobile-nav_search-input text-input span2 js-mobile-nav-search-input js-search-input" type="search" autocomplete="off" name="q" placeholder="{{ 'buscar' | translate }}"/>
                 <button type="submit" class="add-on search-submit mobile-nav_search-submit" value="">
                     <i class="fa fa-search mobile-nav_search-icon"></i>
                </button>
            </div>
        </form>
    </div>
    <div class="js-mobile-nav-second-row mobile-nav_second-row container-fluid mobile-second-row">
        {% snipplet "navigation/navigation-mobile-tabs.tpl" %}
    </div>
</div>
<div class="js-search-suggest search-suggest">
    {# AJAX container for search suggestions #}
</div>
{# Categories list for mobile #}
<div class="js-categories-mobile-container" style="display:none;">
    <ul class="mobile-nav_main-categories-container list-style-none p-fixed full-height full-width p-left-none p-right-none">
        <li>
            <a class="d-block text-decoration-none text-wrap no-link p-all border-top border-bottom mobile-nav_all-categories-link font-bold text-uppercase"  href="{{ store.products_url }}">
                {{ 'Ver todos los productos' | translate }}
            </a>
        </li>
        {% snipplet "navigation/navigation-mobile-categories.tpl" %}
    </ul>
    {% for category in categories %}
        {% snipplet "navigation/navigation-mobile-categories-panels.tpl" %}
    {% endfor %}
</div>

Luego crea una carpeta llamada navigation dentro de la carpeta snipplets. Quedaría un directorio así /snipplets/navigation

2. Creá los siguientes archivos con sus respectivos nombres dentro de la carpeta navigation:

Nombre: navigation-mobile-categories.tpl
Este archivo va a listar todas las categorías de la tienda

{% for category in categories %}
    {% if category.subcategories %}
        <li class="mobile-nav_category-list-item mobile-nav_category-list-item-w-subitems mobile-subitems-container">
            <span data-target="js-category-{{ category.id }}" class="mobile-nav_category-list-item-link js-open-mobile-subcategory">
                {{ category.name }}
                <i class="fa fa-chevron-right mobile-right-panel_arrow-right"></i>
            </span>
        </li>
    {% else %}
        <li class="mobile-nav_category-list-item">
            <a class="mobile-nav_category-list-item-link" href="{{ category.url }}">
                {{ category.name }}
            </a>
        </li>
    {% endif %}
{% endfor %}

Nombre: navigation-mobile-tabs.tpl
Este archivo va a contener los componentes relacionados a las tabs de la navegación

<div class="mobile-nav_tabs-container visible-phone">
    <a href="{{ store.url }}" class="mobile-nav_tab {% if store.is_catalog %}mobile-nav_tab-half{% endif %} {% if template == 'home' %} mobile-nav_tab-selected mobile-nav_tab-current-page{% endif %} pull-left">
        <i class="fa fa-home mobile-nav_tab-icon"></i>
        <span class="mobile-nav_tab-text">{{ 'Inicio' | translate }}</span>
    </a>
    <a {% if categories %}href="#"{% else %}href="{{ store.products_url }}"{% endif %} class="mobile-nav_tab {% if categories %}js-toggle-mobile-categories{% endif %} {% if store.is_catalog %}mobile-nav_tab-half{% endif %} {% if template == 'category' or template == 'product' %} mobile-nav_tab-selected mobile-nav_tab-current-page{% endif %} pull-left">
        <i class="fa fa-th-list mobile-nav_tab-icon mobile-nav_tab-list-icon"></i>
        <span class="mobile-nav_tab-text">{{ 'Productos' | translate }}</span>
    </a>
    {% if not store.is_catalog %}
        {% if settings.ajax_cart %}
            <a href="#" class="mobile-nav_tab js-toggleCart js-toggleCart-ajax p-relative {% if template == 'cart' %} mobile-nav_tab-selected mobile-nav_tab-current-page{% endif %} pull-left">
                <i class="fa fa-shopping-cart mobile-nav_tab-icon"></i>
                <div class="mobile-tav_cart-text-container d-inline-block">
                    <span class="mobile-nav_tab-text">{{ 'Carrito' | translate }}</span>
                    {% if template != 'cart' %}
                        <span id="mobile-cart-amount" class="mobile-nav_tab-cart-amount">{{ "{1}" | translate(cart.items_count ) }}</span>
                    {% endif %}
                </div>
            </a>
        {% else %}
            <div class="mobile-nav_tab {% if template == 'cart' %} mobile-nav_tab-selected mobile-nav_tab-current-page{% endif %} pull-left">
            {% if cart.items_count > 0 %}
            <a href="{{ store.cart_url }}">
            {% else %}
            <a href="#" class="js-trigger-empty-cart-alert">
            {% endif %}
                <i class="fa fa-shopping-cart mobile-nav_tab-icon"></i>
                <div class="mobile-tav_cart-text-container d-inline-block">
                    <span class="mobile-nav_tab-text">{{ 'Carrito' | translate }}</span>
                    {% if template != 'cart' %}
                       <span id="mobile-cart-amount" class="mobile-nav_tab-cart-amount">{{ "{1}" | translate(cart.items_count ) }}</span>
                    {% endif %}
                </div>
            </a>
            </div>
            <div class="js-mobile-nav-empty-cart-alert alert alert-info mobile-nav_empty-cart-alert p-fixed">{{ "El carrito de compras está vacío." | translate }}</div>
        {% endif %}
    {% endif %}
</div>

Nombre: navigation-mobile-categories-panels.tpl
Este archivo va a mostrar los "paneles" que aparecerán animados desde la derecha cuando se navegan las subcategorías mobile

<ul id="js-category-{{ category.id }}" class="mobile-nav_subcategories-panel mobile-nav_subcategories-panel mobile-right-panel" style="display:none;">
    <a class="js-go-back-mobile-categories mobile-right-panel_header" href="#">
        <i class="fa fa-arrow-left mobile-right-panel_arrow-left"></i>
        <span class="mobile-right-panel_header-text">{{ category.name }}</span>
    </a>
    <li class="mobile-nav_category-list-item">
        <a class="mobile-nav_all-categories-link" href="{{ category.url }}">
        {{ "Ver toda esta categoría" | translate }}
        </a>
    </li>
    {% snipplet "navigation/navigation-mobile-categories.tpl" with categories = category.subcategories %}
</ul>
{% for subcategory in category.subcategories %}
    {% snipplet "navigation/navigation-mobile-categories-panels.tpl" with category = subcategory %}
{% endfor %}

Nombre: navigation-hamburguer-panel.tpl
Este archivo contiene el panel que aparece animado desde la izquierda de la pantalla cuando se hace click en el botón "Hamburguer".

<div class="mobile-sidenav_first-row p-half-bottom">
    <span class="mobile-sidenav_close-btn p-absolute"><i class="fa fa-times menu-btn mobile-sidenav_close-btn-icon pull-right p-half-all"></i></span>
    {% if languages | length > 1 %}
        <div class="mobile-sidenav_mobile-languages languages span12 clear pull-left p-quarter-left p-half-top p-double-right">
            {% for language in languages %}
                {% set class = language.active ? "active" : "" %}
                <a href="{{ language.url }}" class="{{ class }} pull-left p-half-all border-top-none-xs border-bottom-none-xs">{{ language.country | flag_url | img_tag(language.name) }}</a>
            {% endfor %}
        </div>
    {% endif %}
    <ul class="clear-both">
        <div class="mobile-sidenav_mobile-accounts">
             {% if not customer %}
                {% if store.customer_accounts != 'mandatory' %}
                    <li>{{ "Crear cuenta" | translate | a_tag(store.customer_register_url, '', 'd-block container text-decoration-none text-wrap no-link border-bottom-none-xs border-top-none-xs') }}</li>
                {% endif %}
                <li>{{ "Iniciar sesión" | translate | a_tag(store.customer_login_url, '', 'd-block container text-decoration-none text-wrap no-link border-top-none-xs') }}</li>
            {% else %}
                <li>{{ "Mi cuenta" | translate | a_tag(store.customer_home_url, '', 'd-block container text-decoration-none text-wrap no-link border-bottom-none-xs border-top-none-xs') }}</li>
                <li>{{ "Cerrar sesión" | translate | a_tag(store.customer_logout_url, '', 'd-block container text-decoration-none text-wrap no-link border-top-none-xs') }}</li>
            {% endif %}
        </div>
    </ul>
</div>
<div class="mobile-sidenav_second-row clear-both">
    <ul>
        {% snipplet "navigation/navigation-hamburguer-list.tpl" %}
    </ul>
</div>

Nombre: navigation-hamburguer-list.tpl
Este archivo, como su nombre lo indica, mostrará el listado de páginas dentro del panel relacionado con al botón Hamburguer.

{% for item in navigation %}
    {% if not item.isRootCategory and not item.isHomePage  %}
	    {% if item.subitems %}
	    	<li class="item-with-subitems p-relative">
	    		<div class="js-mobile-sidenav-pages-link-container mobile-sidenav_pages-link-container">
		            <a class="d-block clear-both text-decoration-none text-wrap no-link p-double-right" href="{{ item.url }}">
		                {{ item.name }}
		            </a>
		             <span class="text-center  mobile-sidenav_pages-arrow js-toggle-page-accordion c-pointer p-quarter-all p-absolute"><i class="fa fa-chevron-down p-half-all mobile-sidenav_pages-arrow-icon"></i></span> 
		         </div>
 				<ul class="d-none pages-accordion subpages-container p-none">
					{% snipplet "navigation/navigation-hamburguer-list.tpl" with navigation = item.subitems %}
				</ul>
			</li>
		{% else %}
			 <li>
	            <a class="d-block clear-both text-decoration-none text-wrap no-link" href="{{ item.url }}">
	                {{ item.name }}</a>
	         </li>
		{% endif %}
    {% endif %}
{% endfor %}

3. Creá un nuevo archivo llamado mobile-page-title.tpl dentro de la carpeta snipplets. Este debe contener lo siguiente:

{% if template == 'home' %}
    {{ "Inicio" | translate }}
{% endif %}
{% if template == 'category' %}
    {{ category.name }}
{% endif %}
{% if template == 'page' %}
    {{ page.name }}
{% endif %}
{% if template == 'product' %}
    {{ product.name }}
{% endif %}
{% if template == 'cart' %}
    {% if settings.ajax_cart %}
    	{{ "Edición del carrito de compras" | translate }}
    {% else %}
    	{{ "Carrito de Compras" | translate }}
    {% endif %}
{% endif %}
{% if template == 'contact' %}
    {{ "Contacto" | translate }}
{% endif %}
{% if template == 'search' %}
    {{ "Resultados de búsqueda" | translate }}
{% endif %}
{% if template == '404' %}
    {{ "La página no existe" | translate }}
{% endif %}
{% if template == 'account.login' %}
    {{ "Iniciar sesión" | translate }}
{% endif %}
{% if template == 'account.register' %}
    {{ "Crear cuenta" | translate }}
{% endif %}
{% if template == 'account.reset' %}
    {{ "Cambiar Contraseña" | translate }}
{% endif %}
{% if template == 'account.orders' %}
    {{ "Mi cuenta" | translate }}
{% endif %}
{% if template == 'account.info' %}
    {{ "Mi cuenta" | translate }}
{% endif %}
{% if template == 'account.address' %}
    {{ "Dirección" | translate }}
{% endif %}
{% if template == 'account.addresses' %}
    {{ "Mis direcciones" | translate }}
{% endif %}
{% if template == 'account.order' %}
    {{ "Orden {1}" | translate(order.number) }}
{% endif %}

4. En el archivo layout.tpl vamos a necesitar hacer varios cambios. 

Lo primero que necesitarás hacer es esconder todos los componentes que no se verán en mobile pero si en su versión de escritorio usando la clase de CSS "hidden-phone" para Bootstrap 2 y "hidden-xs" para Bootstrap 3. Estos componentes son:

Todo lo que esté relacionado a links de idiomas, cuentas y el campo de búsqueda:

Y todo lo relacionado a la navegación de escritorio, excepto el logo de la tienda:

5. En layout.tpl reemplazá todo lo que se encuentra dentro del componente con la clase de CSS "pushy"

<nav class="pushy pushy-left mobile-sidenav">
    ....
</nav>

Dentro del mismo componente pega el llamado a uno de los tpls que agregamos anteriormente:

<nav class="pushy pushy-left mobile-sidenav">
    {% snipplet "navigation/navigation-hamburguer-panel.tpl" %}
</nav>


6. Todavía en layout.tpl englobá todo el HTML (menos los componentes que fueron escondidos para mobile en el paso 4 y el componente que fue modificado en el paso 5) dentro de un div con la clase de CSS "main-content"

El contenido dentro de ese div debería ser similar al resaltado en azul en la imagen debajo (incluyendo banners, {% template_content %} y el footer):

Asegurate que fuera de ese div y antes de que este abra agregues el siguiente llamado al tpl navigation-mobile.tpl

Debería quedar algo como lo siguiente en tu código:

... contenido escondido para mobile
{% snipplet "navigation/navigation-mobile.tpl" %}
<div class="main-content">
    ...contenido del sitio
</div>

A su vez tanto el div "main-content" como navigation-mobile.tpl y el contenido escondido durante el paso 4 deberían seguir permaneciendo englobados dentro del div con el id "container", sin embargo el componente con la class "pushy" debe estar por fuera, quedando de las siguiente forma:

<nav class="pushy pushy-left mobile-sidenav">
    {% snipplet "navigation/navigation-hamburguer-panel.tpl" %}
</nav>
<div class="site-overlay"></div>
<div id="container">
    ... contenido escondido para mobile
    {% snipplet "navigation/navigation-mobile.tpl" %}
    <div class="main-content">
        ...contenido del sitio
    </div>
</div>

Justo debajo del componente pushy pegá el siguiente div:

<div class="js-search-backdrop search-backdrop backdrop js-toggle-mobile-search container-fluid full-width" style="display: none;"></div>

7. Llegó el momento de aplicar el javascript relacionado con esta funcionalidad. Este será agregado dentro de layout.tpl pero primero debemos modificar el JS relacionado a la primera versión de la navegación mobile.

Borrá el siguiente código:

$(".mobile-dropdown").click(function(){
    $(this).next("#accordion").slideToggle(300);
    $(this).toggleClass("dropdown-selected");
});


Dentro de un $(document).ready agregá el siguiente código al pie del archivo donde se encuentra el resto del Javascript de la tienda:

$(document).ready(function(){

    // Mobile navigation main element
    var $top_nav = $(".js-mobile-nav");
    var $page_main_content = $(".main-content");
    var $mobile_categories_btn = $(".js-toggle-mobile-categories");
    var $main_categories_mobile_container = $(".js-categories-mobile-container");
    var $search_backdrop = $(".js-search-backdrop");

    // Mobile search
    $(".js-toggle-mobile-search").click(function(e){
        e.preventDefault;
        var $mobile_tab_navigation = $(".js-mobile-nav-second-row");
        $(".js-mobile-first-row").toggle();
        $(".js-mobile-search-row").toggle();
        $mobile_tab_navigation.toggle();
        $(".js-search-input").val();
        $search_backdrop.toggle().toggleClass("search-open");
        if(!$("body").hasClass("mobile-categories-visible")){
            $("body").toggleClass("overflow-none");
        }else{
            $("body").removeClass("mobile-categories-visible");
        }
        $main_categories_mobile_container.hide();
        if($search_backdrop.hasClass("move-up")){
            $page_main_content.removeClass("move-up").addClass("move-down");
            $search_backdrop.removeClass("move-up").addClass("move-down");
            setTimeout(function() { 
                $page_main_content.removeClass("move-down");
            }, 200);
        }else{
            $page_main_content.removeClass("move-down").addClass("move-up");
            $search_backdrop.removeClass("move-down").addClass("move-up");
        }
        if($mobile_categories_btn.hasClass("mobile-nav_tab-selected")){
            $mobile_categories_btn.removeClass("mobile-nav_tab-selected");
            $(".mobile-nav_tab-current-page").addClass("mobile-nav_tab-selected");
        }
    });
    var $mobile_search_input = $(".js-mobile-nav-search-input");
    $(".js-toggle-mobile-search-open").click(function(e){
        e.preventDefault;
        $mobile_search_input.focus();
    });
    $(".js-search-back-btn").click(function(e){
        $(".js-search-suggest").hide();
        $mobile_search_input.val('');
    });
    // Mobile categories 
    $top_nav.addClass("move-down").removeClass("move-up");
    $mobile_categories_btn.click(function(e){
        e.preventDefault();
        $("body").toggleClass("overflow-none mobile-categories-visible");
        if($mobile_categories_btn.hasClass("mobile-nav_tab-selected")){
            $mobile_categories_btn.removeClass("mobile-nav_tab-selected");
            $(".mobile-nav_tab-current-page").addClass("mobile-nav_tab-selected");
        }else{
            $mobile_categories_btn.addClass("mobile-nav_tab-selected");
            $(".mobile-nav_tab-current-page").removeClass("mobile-nav_tab-selected");
        }
        $main_categories_mobile_container.toggle();
        if($top_nav.hasClass("move-up")){
            $main_categories_mobile_container.toggleClass("move-list-up");
        }
    });

    // Mobile subcategories navigation
    $(".js-open-mobile-subcategory").click(function(e){
        e.preventDefault();
        var $this = $(this);
        var this_link_id_val = $this.data("target");
        var $subcategories_panel_to_be_visible = $this.closest($main_categories_mobile_container).find("#" + this_link_id_val);
        $subcategories_panel_to_be_visible.detach().insertAfter(".js-categories-mobile-container > ul:last-child");
        $subcategories_panel_to_be_visible.addClass("animation-panel-right-close").show();
        setTimeout(function(){
            $subcategories_panel_to_be_visible.toggleClass("animation-panel-right-open animation-panel-right-close");
        },100);
    });

    $(".js-go-back-mobile-categories").click(function(e){
        e.preventDefault();
        var $this = $(this);
        var $subcategories_panel_to_be_closed = $this.closest(".mobile-nav_subcategories-panel");
        $(".mobile-nav_subcategories-panel").scrollTop(0);
        $subcategories_panel_to_be_closed.toggleClass("animation-panel-right-open animation-panel-right-close");
        setTimeout(function() { 
            $subcategories_panel_to_be_closed.removeClass("animation-panel-right-close").hide();
        },300);
    });

    //Pages inside hamburguer sidenav navigation
    $(".js-toggle-page-accordion").click(function(e){
        e.preventDefault();
        $(this).toggleClass("mobile-sidenav_pages-arrow-selected").closest(".js-mobile-sidenav-pages-link-container").next(".pages-accordion").slideToggle(300);
    });

    // Empty cart alert (only if AJAX cart widget is not active)
    $(".js-trigger-empty-cart-alert").click(function(e){
        e.preventDefault();
        $(".js-mobile-nav-empty-cart-alert").fadeIn(100).delay(1500).fadeOut(500);
    });
    // Show and hide part of nav depending scroll up or down
    var didScroll;
    var lastScrollTop = 0;
    var delta = 20;
    var navbarHeight = $('header').outerHeight();

    $(window).scroll(function(event){
        didScroll = true;
    });

    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 250);

    function hasScrolled() {
        var st = $(this).scrollTop();
        
        // Make sure they scroll more than delta
        if(Math.abs(lastScrollTop - st) <= delta)
            return;
        
        // If they scrolled down and are past the navbar, add class .move-up.
        if (st > lastScrollTop && st > navbarHeight){
            // Scroll Down
                if(!$("body").hasClass("mobile-categories-visible")){
                    $top_nav.addClass("move-up").removeClass("move-down");
                }
                $(".backdrop").addClass("move-up").removeClass("move-down");
        } else {
            // Scroll Up
            if(st + $(window).height() < $(document).height()) {
                if(!$("body").hasClass("mobile-categories-visible")){
                    $top_nav.removeClass("move-up").addClass("move-down");
                }
                $top_nav.removeClass("move-up").addClass("move-down");
                $(".backdrop").removeClass("move-up").addClass("move-down");
            }
        }
        
        lastScrollTop = st;
    }

  //Mobile cart update
  $('.js-toggleCart').click(function(){
      var ajax_cart_value = $('#cart-amount').text();
      $("#mobile-cart-amount").html(ajax_cart_value);
  });

});

8. Ahora necesitamos agregar el CSS correspondiente.

Recomendamos es que agregues las siguientes clases "helpers" al final de tu hoja de estilos común, por ejemplo style.css.

/****** PROPERTIES HELPERS ******/
 
/*CSS properties helpers minified, to unminify it you have to copy the code and paste it here http://unminify.com/, after that paste the unminified code here */

.text-danger{color:red}.border-box{box-sizing: border-box}.c-pointer{cursor:pointer}.f-none{float:none!important}.d-none{display:none}.d-inline{display:inline}.d-block{display:block}.d-inline-block{display:inline-block}.p-relative{position:relative!important}.p-absolute{position:absolute}.p-fixed{position:fixed}.clear-both{clear:both}.opacity-80{opacity:.8}.opacity-50{opacity:.5}.full-height{height:100%}.full-width{width:100%}.z-index-above{z-index:999999}.m-top{margin-top:20px}.m-bottom{margin-bottom:20px}.m-right{margin-right:20px}.m-left{margin-left:20px}.m-all{margin:20px}.m-half-top{margin-top:10px!important}.m-half-bottom{margin-bottom:10px!important}.m-half-right{margin-right:10px}.m-half-left{margin-left:10px!important}.m-half-all{margin:10px}.m-quarter-top{margin-top:5px!important}.m-quarter-right{margin-right:5px}.m-quarter-bottom{margin-bottom:5px}.m-quarter-left{margin-left:5px}.m-none-left{margin-left:0!important}.m-quarter-all{margin:5px}.m-double-top{margin-top:40px}.m-double-right{margin-right:40px}.m-double-bottom{margin-bottom:40px}.m-auto{margin:auto}.m-none{margin:0!important}.m-none-bottom{margin-bottom:0}.m-none-top{margin-top:0!important}.m-center{margin:0 auto;position:relative;display:block}.p-double-top{padding-top:40px!important}.p-double-right{padding-right:40px!important}.p-double-bottom{padding-bottom:40px!important}.p-double-left{padding-left:40px!important}.p-top{padding-top:20px!important}.p-none-top{padding-top:0!important}.p-right{padding-right:20px!important}.p-right-none{padding-right:0!important}.p-left-none{padding-left:0!important}.p-bottom{padding-bottom:20px!important}.p-none-bottom{padding-bottom:0!important}.p-left{padding-left:20px!important}.p-all{padding:20px!important}.p-half-top{padding-top:10px!important}.p-half-right{padding-right:10px!important}.p-half-bottom{padding-bottom:10px!important}.p-half-left{padding-left:10px!important}.p-half-all{padding:10px!important}.p-quarter-top{padding-top:5px!important}.p-quarter-right{padding-right:5px}.p-quarter-bottom{padding-bottom:5px}.p-quarter-left{padding-left:5px}.p-quarter-all{padding:5px}.p-none{padding:0!important}.col-tight{padding-left:8px;padding-right:8px}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-wrap{-ms-word-break:break-all;word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto}.font-weight-normal{font-weight:400}.text-decoration-none{text-decoration:none}.text-line-through{text-decoration:line-through}.text-underline{text-decoration:underline}.font-italic{font-style:italic}.font-normal{font-weight:normal}.font-bold{font-weight:700}.line-height-inherit{line-height:inherit}.line-height-initial{line-height:initial}ul.list-style-none li{list-style:none}.mail-to a,.mail-to a:hover,.no-link,.no-link:focus,.no-link:hover{text-decoration:none}.border-radius-none{border-radius:0}.overflow-none{overflow:hidden}.overflow-y{overflow-y:auto}

/* Mobile Helpers */
@media (max-width: 767px) {
  .full-width-xs{width:100%!important}.clear-both-xs{clear:both}.f-none-xs{float:none!important}.pull-left-xs{float: left!important;}.d-inline-block-xs{display:inline-block!important}.p-none-xs{padding:0!important}.p-left-none-xs{padding-left:0}.p-right-none-xs{padding-right:0}.p-half-left-xs{padding-left:10px!important}.p-quarter-left-xs{padding-left:5px}.p-quarter-right-xs{padding-right:5px}.p-half-right-xs{padding-right:10px!important}.p-top-xs{padding-top:20px}.p-half-top-xs{padding-top:10px}.p-bottom-xs{padding-bottom:20px}.p-half-bottom-xs{padding-bottom:10px}.p-double-bottom-xs{padding-bottom:40px}.m-none-xs{margin:0!important}.m-bottom-xs{margin-bottom:20px}.m-half-bottom-xs{margin-bottom:10px}.m-quarter-bottom-xs{margin-bottom:5px!important}.m-top-xs{margin-top:20px!important}.m-half-top-xs{margin-top:10px}.m-quarter-top-xs{margin-top:5px}.m-none-top-xs{margin-top:0}.m-half-right-xs{margin-right:10px!important}.text-center-xs{text-align:center}.text-left-xs{text-align:left}.col-tight-xs{padding-left:8px;padding-right:8px}.drop-shadow-xs{-moz-box-shadow:0 0 3px #ccc;-webkit-box-shadow:0 0 3px #ccc;box-shadow:0 0 3px #ccc}.border-top-none-xs{border-top:0!important}.border-bottom-none-xs{border-bottom:0!important}.horizontal-container{overflow-x:scroll;width:100%;margin:0px}.horizontal-container::-webkit-scrollbar{width:1px;height:0}.horizontal-container::-webkit-scrollbar-track{background:0 0;border-radius:10px}.horizontal-container::-webkit-scrollbar-thumb{border-radius:1px}.horizontal-container ul, .horizontal-products-scroller{white-space:nowrap}
}

Luego en esta misma hoja de estilos 

@media (max-width: 767px) {
    .mobile-nav{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 4000;
        transition: top .3s cubic-bezier(.16,.68,.43,.99);
        -moz-transition: top .3s cubic-bezier(.16,.68,.43,.99); 
        -webkit-transition:top .3s cubic-bezier(.16,.68,.43,.99); 
        -o-transition: top .3s cubic-bezier(.16,.68,.43,.99);
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.04),0 3px 1px -2px rgba(0,0,0,.04),0 1px 5px 0 rgba(0,0,0,.04);
    }
    .mobile-nav_first-row{
        width: 100%;
        height: 50px;
    }
    .mobile-nav_search-row{
        height: 60px;
    }
    /* Mobile Panels */
    .mobile-right-panel{
        position: fixed;
        top: 0;
        z-index: 4000;
        box-sizing:border-box;
        width: 100%;
        height: 100%;
        padding: 0 0 300px 0;
        overflow: auto;
        -webkit-box-shadow: -4px 0px 17px 0px rgba(0,0,0,0.23);
        -moz-box-shadow: -4px 0px 17px 0px rgba(0,0,0,0.23);
        box-shadow: -4px 0px 17px 0px rgba(0,0,0,0.23);
        -webkit-overflow-scrolling: touch;
    }
    .mobile-right-panel_header{
        position: relative;
        display: block;
        padding: 20px 10px;
        clear: both;
        text-decoration: none;
        ms-word-break: break-all;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
    .mobile-right-panel_header-text{
        display: inline-block;
        clear: both;
        margin-left: 34px;
        font-size: 18px; 
    }
    .mobile-right-panel_arrow-right{
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -12px;
        font-size: 24px;
    }
    .mobile-right-panel_arrow-left{
        position: absolute;
        top: 18px;
        font-size: 22px;
    }
    /* Mobile moving content animation*/
    .move-down{
        top: 0;
        transition: all .5s cubic-bezier(.16,.68,.43,.99);
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    .move-up{
        top: 0;
        transition: all .5s cubic-bezier(.16,.68,.43,.99);
        -webkit-transform: translate3d(0,-45px,0);
        -moz-transform: translate3d(0,-45px,0);
        -ms-transform: translate3d(0,-45px,0);
        -o-transform: translate3d(0,-45px,0);
        transform: translate3d(0,-45px,0);
    }
    .main-content.move-up{
        padding-top: 115px;
    }
    .has_store_bar_thin .main-content.move-down{
        padding-top: 113px;
    }
    /*Mobile Search*/
    .add-on.mobile-nav_search-back-btn,
    .add-on.mobile-nav_search-submit{
        height: auto;
        border:0;
        background: none;
        margin-top: 12px;
    }
    .mobile-nav_search-btn{
        width: 10%;
    }
    .mobile-nav_search-submit{
        z-index: 99;
        position: absolute;
        right: 10px;
    }
    .mobile-nav_search-form{
        padding: 0 12px;
    }
    input.mobile-nav_search-input{
        width: 80%!important;/* Necesary to overide bootstra*/
        height: 50px;
        margin-top: 3px;
        margin-left: 10px;
        padding: 10px;
        border: 0;
        font-size: 14px;
        font-weight: normal;
    }
    input.mobile-nav_search-input:focus{
        box-shadow: none;
    }
    .mobile-nav_search-btn-icon{
        font-size: 24px;
        right: 15px;
        padding-top: 12px;
        padding-right:10px;
        padding-bottom: 10px; 
    }
    .backdrop{
        top: 0;
        left: 0;
        height: 140%; /* Height to always take full height even then the mobile nav moves up on scroll or the device keyboard is visible*/
        background-color: rgba(0,0,0,0.5); /* Dark overlay when cart or search is active */
        position: fixed;
        z-index: 3000;
    }
    /*Mobile Logo and page title*/
    .mobile-nav_page-title{
        float: left;
        width: 70%;
        margin-left: 5px;
        margin-top: 16px;
        font-size: 16px;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .logo img{
        max-height: 75px;
        margin: 15px 0;
        max-width: 60%;
    }
    .logo.mobile-logo-home img{
        max-height: 100px;
        max-width: 80%;
    }
    /*Hamburguer Navigation*/
    .mobile-nav_hamburger-btn{
        width: 40px;
    }
    .mobile-nav_hamburger-btn-icon{
        padding: 12px 10px 10px 10px;
    }
    .pushy-active{
        margin: 0; 
        height: 100%; 
        overflow: hidden;
        position: absolute;
    }
    .pushy{
        position: fixed;
        z-index: 99999;
        left: -50px;
        display: block;
         -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
    .site-overlay, 
    .pushy-active .site-overlay{
        display: block;
    }
    .pushy-active .site-overlay{
        height: 120%;
        top: -60px;
    }
    .pushy{
        width: 250px; /* Changed the width to 400px */
    }
    .pushy-left{
        transform: translate3d(-250px,0,0);
        -webkit-transform: translate3d(-250px,0,0);
        -moz-transform: translate3d(-250px,0,0);
        -ms-transform: translate3d(-250px,0,0);
        -o-transform: translate3d(-250px,0,0);
    }
    .pushy-open{
        left: 0px;
    }
    .container-push, .push-push{
        transform: translate3d(250px,0,0);
        -webkit-transform: translate3d(250px,0,0);
        -moz-transform: translate3d(250px,0,0);
        -ms-transform: translate3d(250px,0,0);
        -o-transform: translate3d(250px,0,0);
    }
    .mobile-sidenav a{
        border-bottom: 0px;
        padding: 20px;
        color: #F2F2F2;
        font-weight: normal;
    }
    .mobile-sidenav_pages-arrow-selected i{
        transform-origin: center;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
    }
    /*Mobile tab navigation*/
    .mobile-nav_second-row{
        display: block;
    }
    .mobile-nav_tab,
    .mobile-nav_tab:hover{
        position: relative;
        width: 33.33333333%;
        padding: 10px 0;
        text-align: center;
        text-decoration: none;
    }
    .mobile-nav_tab-half{
        width: 50%;
    }
    .mobile-nav_tab-text{
        display: inline-block;
        text-transform: uppercase;
        font-size: 12px;
    }
    .mobile-nav_tab-icon{
        font-size: 19px;
        margin: 0;
        padding: 0;
    }
    .mobile-nav_tab-icon.mobile-nav_tab-list-icon{
        font-size: 15px;
    }
    i.fa.fa-shopping-cart{
        font-size: 18px;
    }
    .mobile-nav_search-icon{
        font-size: 24px;
    }
    .mobile-nav_tab-cart-amount{
        height: 17px;
        float: right;
        z-index: 1;
        padding: 0 4px;
        margin: 0 5px;
        font-size: 12px;
        font-weight: bold;
        line-height: 16px;
    }
    .alert.mobile-nav_empty-cart-alert{
        width: 90%;
        top: 110px;
        left: 5%;
    }
    /* Mobile Categories Dropdown */
    .mobile-nav_main-categories-container{
        box-sizing: border-box;
        z-index: 3000;
        padding-bottom: 250px;
        top: 90px;
        bottom: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Mobile subcategories panels */
    .mobile-nav_category-list-item{
        clear: both;
        padding: 0;
    }
    .mobile-nav_category-list-item-link{
        position: relative;
        display: block;
        clear: both;
        padding: 20px 15px;
        text-decoration: none;
        -ms-word-break: break-all;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
    a.mobile-nav_category-list-item-link{
        text-decoration: none;
    }
    .mobile-nav_all-categories-link{
        display: block;
        clear: both;
        padding: 20px 15px;
        text-decoration: none;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 700;
    }
    /* Mobile subcategories panels */
    .mobile-nav_subcategories-panel{
        top: 93px;
        z-index: 3000;
    }
    .move-list-up .mobile-nav_main-categories-container,
    .move-list-up .mobile-nav_subcategories-panel{
       top: 44px;
    }
    /*Mobile categories and pages buttons*/
    .mobile-nav_main-categories-container .mobile-category-item.no-mobile-subitems:last-child > a{
        border-bottom: 0;
    }
    .mobile-sidenav_pages-arrow{
        top: 15px;
        right: 10px;
        margin-top: -10px;
        font-size: 20px;
    }
    /* Mobile animations */
    .animation-panel-right-open{
        transition: all .5s cubic-bezier(.16,.68,.43,.99);
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    .animation-panel-right-close{
        transition: all 1.5s cubic-bezier(.16,.68,.43,.99);
        -webkit-transform: translate3d(200%,0,0);
        -moz-transform: translate3d(200%,0,0);
        -ms-transform: translate3d(200%,0,0);
        -o-transform: translate3d(200%,0,0);
        transform: translate3d(200%,0,0);
    }
}

Luego en tu hoja de estilos SASS deberás agregar lo siguiente (las variables dependerán de cada plantilla):

@media (max-width: 767px) {
    /**** MOBILE NAVIGATION ****/
    .mobile-nav{
        background-color:$back ;
    }
    #header, 
    #header-slim{
        border-bottom:0;
    }
    /*Mobile Tab Nav*/
    i.mobile-nav_tab-icon{
        color: $txt;
    }
    .mobile-nav_tab-text{
        font-family: $fontheadprod;
    }
    .mobile-nav_tab-selected .mobile-nav_tab-icon,
    .mobile-nav_tab-selected .mobile-nav_tab-text{
        color: $primary;
    }
    .mobile-nav_tab-cart-amount{
        background-color: $primary;
        color:$back;
    }
    /*Mobile search*/
    input.mobile-nav_search-input{
        background-color:$back;
    }
    /* Mobile Categories Links */
    .mobile-nav_main-categories-container{
        background-color:lighten($back, 3%);
        box-shadow: 2px 0px 1px 1px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }
    .mobile-sidenav_pages-arrow-selected i{
        background-color: $primary;
    }
    .mobile-nav_category-list-item-link,
    .mobile-nav_all-categories-link{
        color: $txt;
        border-bottom: 1px solid rgba($txt, .3);
    }
    .mobile-nav_all-categories-link{
        background-color:darken($back, 2%);
    }
    .mobile-nav_category-list-item-link:hover{
        color: $txt;
    }
    .mobile-right-panel{
        background-color:lighten($back, 3%); 
    }
    .mobile-right-panel_header,
    .mobile-right-panel_arrow-right,
    .mobile-right-panel_arrow-left{
        color: $primary;
    }
    .mobile-nav_main-categories-container li a:active,
    .mobile-nav_main-categories-container li a:active span, 
    .mobile-nav_category-list-item-link:active, 
    .mobile-nav_category-list-item-link:active .mobile-right-panel_arrow-right, 
    .mobile-nav_main-categories-container a:active .mobile-right-panel_arrow-left,
    .mobile-right-panel_header:active,
    .mobile-right-panel_header:active .mobile-right-panel_arrow-left{
        background-color:$primary;
        color:$back;
    }
    /* Hamrbuguer nav */
    .pushy a:hover{
        background:$primary;
        text-decoration:none;
    }
    i.mobile-sidenav_pages-arrow-icon{
        background:rgba(131, 131, 131, 0.4);
        color:white;
    }
    i.mobile-nav_hamburger-btn-icon{
      font-size: 24px;
      color: $txt;
    }
    .mobile-sidenav_first-row,
    .item-with-subitems > .pages-accordion{
        background:rgba(131, 131, 131, 0.4);
        color:white;
    }
}

9. En este último paso solo queda agregar los textos relacionados a la nueva funcionalidad dentro del archivo translations.txt. Agregá lo siguiente:

es "Inicio"
pt "Início"
en "Home"

es "Ver toda esta categoría"
pt "Ver tudo desta categoria"
en "See all this category"

es "Todos los productos"
pt "Todos os produtos"
en "All products"

Listo! terminaste de aplicar la nueva navegación mobile con tabs en tu tienda!

Los siguientes pasos son anexos en caso que tengas en tu tienda implementadas las mejoras del Carrito de compras rápidas o las Sugerencias de búsqueda.

Anexo 1: En caso de tener el Carrito de compras rápidas

Si en tu tienda tenés implementado el Carrito de compras rápidas te sugerimos que apliques las siguientes mejoras:

Abrí el archivo cart_ajax.tpl, vamos a dividirlo en dos partes: una parte para el componente que muestra el icono, la plata y la cantidad de productos en el carrito; por otro lado el componente del panel que se muestra al agregar un producto al carrito:

Dentro del archivo ajax_cart.tpl corta el siguiente código:

<div id="ajax-cart" class="cart-summary">
    <a href="#" class="js-toggleCart">
      <span class="items">
        <span id="cart-amount">{{ "{1}" | translate(cart.items_count ) }}</span> 
        <small>x</small> 
        <span id="cart-total">{{ cart.total | money }}</span>
      </span>
      <span class="item-img"><i class="fa fa-shopping-cart"></i></span>
    </a>
</div>

y pegalo en un nuevo archivo llamado cart-widget-ajax.tpl, el cual se ubicará dentro de la carpeta snipplets.

Luego renombrá el archivo ajax_cart.tpl a cart-panel-ajax.tpl. Este archivo solo tendrá de ahora en más el código relacionado al panel que contiene el detalle del carrito:

<div id="ajax-cart-details" style="display: none;">
  <div id="store-curr" class="hidden">{{ store.currency }}</div>
  <div class="subtotal-price hidden" data-priceraw="{{ cart.total }}"></div>
  <button type="button" class="button close-cart js-toggleCart">
    <i class="fa fa-angle-left" aria-hidden="true"></i> 
    <span class="hidden-phone">{{ "Seguir comprando" | translate }}</span> 
    <span class="visible-phone">{{ "Volver" | translate }}</span></button>
  <h2>{{ "Resumen del carrito de compras" | translate }}</h2>
  <table id="cart-table" class="table table-striped">
    <thead>
      <tr>
        <th>{{ "Producto" | translate }}</th>
        <th>{{ "Cantidad" | translate }}</th>
        <th>{{ "Precio" | translate }}</th>
        <th>{{ "Subtotal" | translate }}</th>
      </tr>
    </thead>
    <tbody id="cart-table-body">
      {% if cart.items %}
        {% for item in cart.items %}
        <tr>
          <td>{{ item.name }}</td>
          <td>{{ item.quantity }}</td>
          <td>{{ item.unit_price | money }}</td>
          <td>{{ item.subtotal | money }}</td>
        </tr>
        {% endfor %}
      {% endif %}
    </tbody>
    <tfoot>
      <tr>
        <th></th>
        <th></th>
        <th>{{ "Total" | translate }}</th>
        <th id="cart-table-total">{{ cart.total | money }}</th>
      </tr>
    </tfoot>
  </table>
  <div id="ajax-cart-shipping">
    {% snipplet "shipping_cost_calculator.tpl" with shipping_calculator_show = settings.shipping_calculator_cart_page %}
  </div>
  <div id="ajax-cart-totalwshipping" class="total-price"></div>
  <div class="row-fluid clearfix ajax-cart-bottom">
    <div class="span6 edit-cart">
      <a href="{{ store.cart_url }}" class="btn btn-link sst ssb">{{ 'Editar carrito' | translate }}</a>
    </div>
    {% set cart_total = (settings.cart_minimum_value * 100) %}
    <div class="span6" {{ cart.total < cart_total ? 'style="display:none"' }} id="ajax-cart-submit-div">
      <form action="{{ store.cart_url }}" method="post">
        <input class="button pull-right" type="submit" name="go_to_checkout" value="{{ 'Iniciar Compra' | translate }}"/>
        </form>
    </div>
    <div class="span12" {{ cart.total >= cart_total ? 'style="display:none"' }} id="ajax-cart-minumum-div">
        <div class="alert alert-warning" role="alert">
          <h4 class="text-center">{{ "El monto mínimo de compra (subtotal) es de" | translate }} {{ cart_total | money }}</h4>
        </div>
    </div>
    <input type="hidden" id="ajax-cart-minimum-value" value="{{ cart_total }}"/>
  </div>
</div>
<div id="ajax-cart-backdrop" class="js-toggleCart full-width" style="display: none;"></div>

Dentro del archivo layout.tpl agregá el siguiente código justo despúes de que cierra el div con la clase "main-content".

<div class="main-content">
...
</div>
{# AJAX Cart Panel #}
{% if not store.is_catalog and template != 'cart' and settings.ajax_cart %}
    {% snipplet "cart-panel-ajax.tpl" %}
{% endif %}

Todavía en layout.tpl renombrá el llamado al archivo ajax_cart.tpl por cart-widget-ajax.tpl.

Deberías pasar de tener algo similar a esto:

{% if not store.is_catalog and template != 'cart' %}
    {% if settings.ajax_cart %}
        {% snipplet "cart_ajax.tpl" as "cart" %}
    {% else %}
        {% snipplet "cart.tpl" as "cart" %}
    {% endif %}
{% endif %}

A tener algo como esto:

{% if not store.is_catalog and template != 'cart' %}
  <div class="hidden-phone">
      {% if settings.ajax_cart %}
          {% snipplet "cart-widget-ajax.tpl" as "cart" %}
      {% else %}
          {% snipplet "cart-widget.tpl" as "cart" %}
      {% endif %}
  </div>
{% endif %}

Anexo 2: En caso de tener las Sugerencias de búsqueda

Si ya tenés las sugerencias de búsqueda en tu tienda te recomendamos que agregues el siguiente CSS

En tu hoja de estilos común, por ejemplo style.css agregá lo siguiente:

@media (max-width: 767px) {
    /* Search suggestions */
    .search-suggest{
        position: fixed;
        top: 64px;
        z-index: 3000;
        display: none;
        height: 100%;
        width: 100%;
        box-sizing:border-box;
        margin: 0;
        padding-bottom: 1000px;
        overflow-y: scroll;
    }
    .search-suggest_link{
        padding: 20px 15px;
        font-size: 14px;
    }
}

Por último en tu hoja de estilos SASS agregá lo siguiente:

@media (max-width: 767px) {
    /* Search Suggestons */
    .search-backdrop{
        background: rgba($back, .9);
    }
}

En el archivo config/translations.txt, compruebe que ya existe el siguiente code, si no existe:

es "Carrito"
pt "Carrinho"
en "Cart”

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.