Topo Flutuante
Snippet para criar um topo flutuante.
Lembrando que no exemplo usamos apenas a logo e uma mensagem de bem-vindo para o cliente realizar o login ou o cadastro, mas você pode utilizar qualquer elemento que deseje
{#
# Topo Flutuante
# elements/snippets/topo_flutuante.html
#}
<div class="header-fixed">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 logo">
<a href="{{ links.home }}" data-tray-tst="logotipo_loja">{{ Image('logo') }}</a>
</div>
<div class="hidden-xs col-sm-8 header-customer">
<div class="login" data-tray-tst="saudacao">
<span class="tray-hide" data-logged-user="true">
{{ Translation('bem_vindo_central') }} <span data-customer="name"></span>,
<a href="{{ links.logout }}">{{ Translation('sair') }}</a></li>
</span>
<span class="tray-hide" data-logged-user="false">
{{ Translation('bem_vindo_central') }}, <a href="{{ links.login }}" data-tray-tst="login" class="{{ utils.is_https ? 'modal-login' }}">{{ Translation('login') }}</a> {{ Translation('ou') }} <a href="{{ links.register }}" data-tray-tst="cadastro">{{ Translation('cadastre_se') }}</a>
</span>
</div>
</div>
</div>
</div>
</div>
Como usar
Copie o código HTML e crie um arquivo separado, ex: elements/snippets/topo_flutuante.html
Faça a chamada desse arquivo onde desejar:
{% element('snippets/topo_flutuante') %}
Insira o bloco de código CSS em sua folha de estilo
Insira o bloco de código Javascript em seu arquivo .js
Last updated
Was this helpful?