Banner Régua
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égua fio</div>
<div class="msg">Edite os ícones e textos da régua fio de acordo com as suas necessidades.</div>
<div class="box-section">
<div class="title flex justify-between align-center">
<span>Exibir Ré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ítulo principal</span>
<input type="text" placeholder="Digite o título" class="encode-characters">
<input type="hidden" name="linha_fio_title_1">
</label>
<label class="input-area">
<span class="name">Texto secundário</span>
<input type="text" placeholder="Digite o texto secundá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ítulo principal</span>
<input type="text" placeholder="Digite o título" class="encode-characters">
<input type="hidden" name="linha_fio_title_2">
</label>
<label class="input-area">
<span class="name">Texto secundário</span>
<input type="text" placeholder="Digite o texto secundá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ítulo principal</span>
<input type="text" placeholder="Digite o título" class="encode-characters">
<input type="hidden" name="linha_fio_title_3">
</label>
<label class="input-area">
<span class="name">Texto secundário</span>
<input type="text" placeholder="Digite o texto secundá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ítulo principal</span>
<input type="text" placeholder="Digite o título" class="encode-characters">
<input type="hidden" name="linha_fio_title_4">
</label>
<label class="input-area">
<span class="name">Texto secundário</span>
<input type="text" placeholder="Digite o texto secundá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.
Last updated