# Menu de Marcas

Snippet para criar um menu de marcas.

### **Modelo 1 - Simples**

Exibe o nome das marcas cadastradas no painel.

{% tabs %}
{% tab title="HTML" %}

```html
{#
    # 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>
```

{% endtab %}
{% endtabs %}

### Output <a href="#como-usar" id="como-usar"></a>

{% tabs %}
{% tab title="HTML" %}

```html
<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>
```

{% endtab %}
{% endtabs %}

### Como usar <a href="#como-usar" id="como-usar"></a>

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

Faça a chamada desse arquivo onde desejar:

```twig
{% 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.

{% tabs %}
{% tab title="HTML" %}

```html
{#
    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>
```

{% endtab %}
{% endtabs %}

{% hint style="danger" %}
**Observação:**\
Os três componentes acima: ***HTML, JAVASCRIPT e CSS*** devem ser inseridos no arquivo **settings.html**
{% endhint %}

{% tabs %}
{% tab title="HTML" %}

```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 %}
```

{% endtab %}
{% endtabs %}

### Output <a href="#como-usar" id="como-usar"></a>

{% tabs %}
{% tab title="HTML" %}

```html
<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>
```

{% endtab %}
{% endtabs %}

### Como usar <a href="#como-usar" id="como-usar"></a>

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

Faça a chamada desse arquivo onde desejar:

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/menu-de-marcas.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.