LogoLogo
Documentação de Temas
Documentação de Temas
  • 🚀COMECE POR AQUI
    • Temas Tray
    • Entenda o Tema
    • Meu primeiro tema
  • 💻Tray CLI
    • Instalação
    • Comandos
      • Erros Retornados
    • API para integrações Tray CLI
  • 🧱Construindo seu Template
    • Twig
      • O que é o Twig
      • Como ele é utilizado nos temas
      • Possibilidades de uso
      • Documentação para consulta
    • Visão Geral
      • Estrutura do Tema
      • Arquivo de configuração
      • Extensões de arquivos
      • Codificação de Arquivos
      • Avisos e Recomendações
      • Flags
    • Editor do Tema
      • Antigo
        • Como criar um Editor
        • Settings.html
      • Novo
        • Estrutura
          • Seções
          • Ícones
          • Componentes
            • Text
            • Textarea
            • Email
            • Number
            • Color
            • Checkbox
            • Radio
            • Select
            • Toggle
            • Upload
            • Tab
            • Alert
          • Exemplo de utilização
        • Thumb preview do tema
        • Imagens padrões
        • Como desabilitar e reabilitar?
      • Settings.json
    • Desenvolver
      • Atributo Google Analytics 4
      • Como adicionar o botão comprar na listagem dos produtos
      • Como criar um carrossel de produtos
      • Como inserir um vídeo na home da loja
      • Como manipular as variações de produtos
      • Como saber se o usuário está logado
      • Descontinuação do carrinho.php
      • Exibindo as formas de pagamento de um produto
      • Informação de preço com tempo de cache menor
      • Order Bump - Produtos Relacionados
      • Páginas Institucionais
      • Página de recuperação de senha
      • Página Live Shop
      • Recursos extras
      • Personalização das paginas de carrinho e checkout
    • Core Web Vitals
      • Desempenho
        • Lazyload
        • Primeira dobra
        • Fontes
        • Definição largura e altura
        • Sprite formas de pagamentos
      • Boas Práticas
        • Origem cruzada
      • Acessibilidade
        • Atributo Lang
        • Nome discernível
        • Atributo ALT
        • Contraste
        • IDs únicos
        • ARIA Labelled By
        • Tabindex
    • Otimizar e Medir
      • Carregamento na home
      • Layout AMP
      • Utilizando PWA na loja
    • Referências
      • Objetos
        • banner
        • breadcrumb
        • category
        • categories
        • filters
        • filter_options
        • links
        • pages
        • paginate
        • paymentMethods
        • product
        • productTabs
        • products
        • productFeatured
        • seals
        • search
        • settings
        • store
        • tags
        • tray
        • themePath
        • utils
      • Funções
        • asset()
        • Brands()
        • Categories()
        • Image()
        • Products()
        • Translation()
      • Data Attributes
        • Banners
        • Cart
        • Compare
        • Filter
        • Logged User
        • Search (Suggestion)
      • Componentes
        • Adicionar ao carrinho sem sair da página
        • Banner Desconto Progressivo
        • Banner extra com contagem de cliques
        • Banner Régua
        • Banner Rotativo
        • Botão "Voltar para o topo"
        • Botões Quantidade
        • Carrinho Lateral
        • Exibir a segunda imagem ao passar o mouse
        • Filtro Inteligente
        • Link flutuante para Whatsapp
        • Menu de Categorias
        • Menu de Categorias em 3 Níveis
        • Menu de Categorias com ver mais categorias
        • Menu de Categorias com Imagens
        • Menu de Categorias com Imagens - Hover
        • Menu de Categorias com produto
        • Menu de Marcas
        • Modal de Ofertas
        • Notícias com imagem na home
        • Novo Filtro Inteligente
        • Paginação
        • Porcentagem Desconto
        • Popup de Newsletter
        • Star Ranking
        • Selos da Loja
        • Selos do produto
        • Showcase ( List / Grid )
        • Topo Flutuante
        • Tray Login
        • Whatsapp flutuante
    • APIs Disponíveis
      • Busca
      • Carrinho de Compra
      • Categorias
      • Produtos
      • Variações de Produto
  • ✔️Homologação
    • Loja de Temas Tray
    • Requerimentos
      • Exclusividade
      • Identidade única
      • Estrutura necessária
      • Funcionalidades
      • Nova Busca e Filtro inteligente
      • Selos de produtos
      • Google Lighthouse
      • Consistência e funcionalidade
      • Compatibilidade com navegadores
      • Assets
      • Otimização para buscadores (SEO)
      • Acessibilidade
      • Configurações
      • Sistema de cores
      • Imagens responsivas
      • Nomes dos temas
      • Versionamento e notas de lançamento
      • Lojas demonstrativas
      • Documentação e suporte
    • Checklist obrigatório
    • Templates
    • Homologando o tema
    • Atualizando o tema
    • FAQ
  • 📣NOVIDADES
    • Tray CLI
    • Checklist
    • Tema Draft
    • Novo Editor
Powered by GitBook
On this page

Was this helpful?

  1. Construindo seu Template
  2. Referências
  3. Componentes

Banner Régua

PreviousBanner extra com contagem de cliquesNextBanner Rotativo

Last updated 1 year ago

Was this helpful?

Utilizado para exibir algumas informações sobre a loja.

Snippet para criar o banner régua.

{#
# Banner regua - arquivo de configuração do painel
# configs/settings.html
#}

<div class="tab-show">
    <div class="title-col">R&eacute;gua fio</div>
    <div class="msg">Edite os &iacute;cones e textos da r&eacute;gua fio de acordo com as suas necessidades.</div>
    <div class="box-section">
        <div class="title flex justify-between align-center">
            <span>Exibir R&eacute;gua Fio </span>
            <label class="check-drag">
                <input type="checkbox" name="regua_fio" value="1">
                <span class="icon"></span>
            </label>
        </div>
    </div>
    <div class="list-position large">
        <ul class="drag-list banner-info not-hidden">
            <li>
                <div class="banner">
                    <div class="bar">
                        <input type="hidden" name="icon_1_position">
                        <div class="text"></div>
                        <div class="box-file">
                            <div class="input-group file">
                                <div class="area-file">
                                    <input type="file" class="form-control" accept="image/*" name="linha_fio_icon_1">
                                    <div class="show-upload"></div>
                                </div>
                                <a class="remove-img"></a>
                            </div>
                        </div>
                        <label class="input-area">
                            <span class="name">T&iacute;tulo principal</span>
                            <input type="text" placeholder="Digite o t&iacute;tulo" class="encode-characters">
                            <input type="hidden" name="linha_fio_title_1">
                        </label>
                        <label class="input-area">
                            <span class="name">Texto secund&aacute;rio</span>
                            <input type="text" placeholder="Digite o texto secund&aacute;rio" class="encode-characters">
                            <input type="hidden" name="linha_fio_description_1">
                        </label>
                    </div>
                </div>
            </li>
            <li>
                <div class="banner">
                    <div class="bar">
                        <input type="hidden" name="icon_2_position">
                        <div class="text"></div>
                        <div class="box-file">
                            <div class="input-group file">
                                <div class="area-file">
                                    <input type="file" class="form-control" accept="image/*" name="linha_fio_icon_2">
                                    <div class="show-upload"></div>
                                </div>
                                <a class="remove-img"></a>
                            </div>
                        </div>
                        <label class="input-area">
                            <span class="name">T&iacute;tulo principal</span>
                            <input type="text" placeholder="Digite o t&iacute;tulo" class="encode-characters">
                            <input type="hidden" name="linha_fio_title_2">
                        </label>
                        <label class="input-area">
                            <span class="name">Texto secund&aacute;rio</span>
                            <input type="text" placeholder="Digite o texto secund&aacute;rio" class="encode-characters">
                            <input type="hidden" name="linha_fio_description_2">
                        </label>
                    </div>
                </div>
            </li>
            <li>
                <div class="banner">
                    <div class="bar">
                        <input type="hidden" name="icon_3_position">
                        <div class="text"></div>
                        <div class="box-file">
                            <div class="input-group file">
                                <div class="area-file">
                                    <input type="file" class="form-control" accept="image/*" name="linha_fio_icon_3">
                                    <div class="show-upload"></div>
                                </div>
                                <a class="remove-img"></a>
                            </div>
                        </div>
                        <label class="input-area">
                            <span class="name">T&iacute;tulo principal</span>
                            <input type="text" placeholder="Digite o t&iacute;tulo" class="encode-characters">
                            <input type="hidden" name="linha_fio_title_3">
                        </label>
                        <label class="input-area">
                            <span class="name">Texto secund&aacute;rio</span>
                            <input type="text" placeholder="Digite o texto secund&aacute;rio" class="encode-characters">
                            <input type="hidden" name="linha_fio_description_3">
                        </label>
                    </div>
                </div>
            </li>
            <li>
                <div class="banner">
                    <div class="bar">
                        <input type="hidden" name="icon_4_position">
                        <div class="text"></div>
                        <div class="box-file">
                            <div class="input-group file">
                                <div class="area-file">
                                    <input type="file" class="form-control" accept="image/*" name="linha_fio_icon_4">
                                    <div class="show-upload"></div>
                                </div>
                                <a class="remove-img"></a>
                            </div>
                        </div>
                        <label class="input-area">
                            <span class="name">T&iacute;tulo principal</span>
                            <input type="text" placeholder="Digite o t&iacute;tulo" class="encode-characters">
                            <input type="hidden" name="linha_fio_title_4">
                        </label>
                        <label class="input-area">
                            <span class="name">Texto secund&aacute;rio</span>
                            <input type="text" placeholder="Digite o texto secund&aacute;rio" class="encode-characters">
                            <input type="hidden" name="linha_fio_description_4">
                        </label>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
{#
# Banner regua
# elements/snippets/banner-line.html
#}

{% set listInfo = [] %}

{% for i in 1..4 %}
    {% set position = attribute(settings, 'icon_'~i~'_position') %}
    {% set title = attribute(settings, 'linha_fio_title_'~i) %}
    {% set img = attribute(settings, 'linha_fio_icon_'~i) %}
    {% set description = attribute(settings, 'linha_fio_description_'~i) %}
    {% if title %}
        {% set listInfo = listInfo|merge([{ "position": position, "title": title, "img": img, "description": description }]) %}
    {% endif %}

{% endfor %}

<div class="banner-info">
    <div class="flex justify-between">

        {% for i in 1..4 %}

            {% set loopParent = loop.index %}
            {% for list in listInfo %}
                {% if list.position == loopParent %}
                <div class="item">
                    <div class="line">
                        {% if list.img %}
                            <img class="icon" src="{{ asset(list.img) }}" alt="{{ list.title }}">
                        {% endif %}
                        <span class="text">
                            <span class="featured">{{ list.title }}</span> 
                            {{ list.description }}
                        </span>
                    </div>
                </div>
                {% endif %}
            {% endfor %}

        {% endfor %}
        
    </div>
</div>
.banner-info .line {
    height: 52px;
    margin: 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-info .text {
    font-size: .75rem;    
    line-height: 1.43;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banner-info .text .featured {
    font-weight: 700;
    font-size: .875rem;
    display: block;
}

.banner-info .line .icon {
    max-width: 60px;
    max-height: 42px;
    margin-right: 20px
}

OBS: o exemplo acima permite a criação de 4 itens, caso queira exibir mais ou menos, sera necessário alteração.

Como usar

Copie o código settings.html acima e cole os itens dentro do arquivo settings.html que se encontra na pasta configs: configs/settings.html

Copie o código banner-line.html acima e crie um arquivo separado, exemplo: elements/snippets/banner-line.html

Faça a chamada desse arquivo onde desejar:

{% element('snippets/banner-line') %}

Copie o código CSS e cole em sua folha de estilo.

🧱
Exemplo de exibição do banner régua