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
  • Modelo 1 - Simples
  • Output
  • Como usar
  • Modelo 2 - Com imagem
  • Output
  • Como usar

Was this helpful?

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

Menu de Marcas

Snippet para criar um menu de marcas.

Modelo 1 - Simples

Exibe o nome das marcas cadastradas no painel.

{#
    # Brands Menu
    # elements/snippets/brands_menu.html
#} 
{% set brands = Brands() %} 
<h4>Navegue pelas marcas:</h4>
<nav>
    <ul>
        {% for brand in brands %}
        <li>
            <a href="{{ links.search_by_brand ~ brand.name }}">
                {{ brand.name }}
            </a>
        </li>
        {% endfor %}
    </ul>
</nav>

Output

<h4>Navegue pelas marcas:</h4>
<nav>
	<ul>
		<li>
			<a href="/loja/busca.php?loja=1063484&avancada=1&buscamarca=Carolina Herrera">
                Carolina Herrera
            </a>
        </li>
        <li>
        	<a href="/loja/busca.php?loja=1063484&avancada=1&buscamarca=Lancôme">
                Lancôme
            </a>
        </li>
        <li>
        	<a href="/loja/busca.php?loja=1063484&avancada=1&buscamarca=Paco Rabanne">
                Paco Rabanne
            </a>
        </li>
    </ul>
</nav>

Como usar

Copie o código acima e crie um arquivo separado, ex: elements/snippets/brands_menu.html

Faça a chamada desse arquivo onde desejar:

{% element('snippets/brands_menu') %}

Modelo 2 - Com imagem

Permite o cliente cadastrar as marcas pelo painel editor do tema utilizando imagens.

OBS: No exemplo definimos o cadastro de no máximo 3 marcas.

{#
    Inserir no arquivo settings.html
#} 

HTML:
<div class="tab-show">

    <div class="title-tab">Menu de Marcas</div>
    <div class="marcas">

        <div class="box-option">
            <div class="name">Exibir Marcas na loja?</div>
            <div class="list-radio">
                <label class="option">
                    <input type="radio" name="brands_active" value="1" checked="">
                    <div class="dot"></div>
                    <div class="text">Sim</div>
                </label>
                <label class="option">
                    <input type="radio" name="brands_active" value="0">
                    <div class="dot"></div>
                    <div class="text">Não</div>
                </label>
            </div>
        </div>

        <div class="msg">* Subir imagens com largura máxima de 180px</div>

        <div class="line-upload">
            <div class="item">
                <div class="name">Marca 01</div>
                <div class="box-file">
                    <div class="input-group file">
                        <div class="area-file">
                            <input type="file" class="form-control" accept="image/*" name="brand_1">
                        </div>
                        <a class="remove-img"></a>
                    </div>
                </div>
                <input type="text" class="input-panel" name="link_marca_1" placeholder="Link da Marca">
            </div>
            <div class="item">
                <div class="name">Marca 02</div>
                <div class="box-file">
                    <div class="input-group file">
                        <div class="area-file">
                            <input type="file" class="form-control" accept="image/*" name="brand_2">
                        </div>
                        <a class="remove-img"></a>
                    </div>
                </div>
                <input type="text" class="input-panel" name="link_marca_2" placeholder="Link da Marca">
            </div>
            <div class="item">
                <div class="name">Marca 03</div>
                <div class="box-file">
                    <div class="input-group file">
                        <div class="area-file">
                            <input type="file" class="form-control" accept="image/*" name="brand_3">
                        </div>
                        <a class="remove-img"></a>
                    </div>
                </div>
                <input type="text" class="input-panel" name="link_marca_3" placeholder="Link da Marca">
            </div>
        </div>

    </div>
</div>

JAVASCRIPT:
<script>
(function($){
        
    $('.remove-img').click(function(){
        $(this).parents('.file').find('img').remove();
        $(this).parents('.file').find(':hidden').val('');
        return false;
    });

    $('.remove-img').click(function(){
        $(this).parents('.box-file').addClass('removed');
    });

    $('.box-file').find('input:first').each(function(){
        console.log('true', 1);
        if($(this).attr('type') !== "hidden" || $(this).val() == ''){
            $(this).parents('.box-file').addClass('removed').find('.area-file > div').remove();
        }
    });
        
}(jQuery));   
</script>

CSS:
<style>
.box-file{
    border: 1px solid #e4e4e4;
    position: relative;
}

.box-file .remove{
    position: absolute;
    top: 5;
    right: 5px;
    z-index: 2;
}

.box-file .area-file{
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    width: 100%;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 110px;
}

.box-file:not(.removed) input{
    display: none;
}

.box-file .input-group{
    width: 100%;
    display: block;
}

.box-file.removed .remove-img{
    display: none;
}

.box-file .remove-img{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .6);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: ease-in-out .3s;
    cursor: pointer;
}

.box-file .remove-img::before{
    content: 'Remover';
    border-radius: 4px;
    padding: 5px;
    color: #fff;
    background-color: #1caffc;
    font-size: 14px;
}

.box-file:hover .remove-img{
    opacity: 1;
}

.box-file img{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: transparent;
}
</style>

Observação: Os três componentes acima: HTML, JAVASCRIPT e CSS devem ser inseridos no arquivo settings.html

{#
    # Brands 
    # elements/snippets/brands.html
#} 
{% if settings.brands_active %}
<div class="section-brands">
    <div class="relative">
        <div class="list">
            {% for i in 1..3 %}
                {% set brandLink = attribute(settings, 'link_marca_'~i) %}
                {% set brandImg = attribute(settings, 'brand_'~i) %}
                {% if brandImg %}
                    {% if loop.index == 1 %}
                        <div class="item">
                            <a {{ brandLink ? 'href="'~brandLink~'"' }} class="box-brand">
                                <img src="{{ asset(brandImg) }}" alt="Brand">
                            </a>
                        </div>
                    {% else %}
                        <div class="item">
                            <a {{ brandLink ? 'href="'~brandLink~'"' }} class="box-brand">
                                <img src="{{ asset(brandImg) }}" alt="Brand">
                            </a>
                        </div>
                    {% endif %}
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

Output

<div class="section-brands">
	<div class="relative">
		<div class="list">
			<div class="item">
				<a href="teste" class="box-brand">
					<img src="https://images.tcdn.com.br/files/1063484/themes/77/img/settings/marca1.png" alt="Brand">
				</a>
			</div>
			<div class="item">
				<a href="teste-2" class="box-brand">
					<img src="https://images.tcdn.com.br/files/1063484/themes/77/img/settings/marca2.png" alt="Brand">
				</a>
			</div>
			<div class="item">
				<a href="teste-3" class="box-brand">
					<img src="https://images.tcdn.com.br/files/1063484/themes/77/img/settings/marca3.png" alt="Brand">
				</a>
			</div>
		</div>
	</div>
</div>

Como usar

Copie o código acima e crie um arquivo separado, ex: elements/snippets/brands.html

Faça a chamada desse arquivo onde desejar:

{% element('snippets/brands') %}

Crie o estilo visual que desejar, podendo ser um carrossel.

PreviousMenu de Categorias com produtoNextModal de Ofertas

Last updated 2 years ago

Was this helpful?

🧱