Home Slider | Documentação para Web Designers

Após montar a ordem das seções na Home, o arquivo snipplets/home/home-section-switch.tpl decide qual subtemplate carregar conforme section_select.

Switch de seções (home-section-switch.tpl)

Quando section_select == 'slider', incluímos o slider para desktop e opcionalmente o de mobile:

{% include 'snipplets/home/home-slider.tpl' %}
{% if has_mobile_slider %}
  {% include 'snipplets/home/home-slider.tpl' with { mobile: true } %}
{% endif %}

Trabalhando com GALLERY do settings

O tipo GALLERY do settings permite iterar sobre imagens e metadados configurados pelo lojista. Podemos alternar entre desktop e mobile com uma variável mobile enviada via with.

Classes condicionais para desktop/mobile

Controle visibilidade e classes dinamicamente no atributo class:

<div class="{% if mobile %}js-home-mobile-slider{% else %}js-home-main-slider{% endif %}-visibility 
           {% if has_main_slider and has_mobile_slider %}
             {% if mobile %}d-md-none{% else %}d-none d-md-block{% endif %}
           {% elseif not settings.toggle_slider_mobile and mobile %}
             hidden
           {% endif %}">
  ...
</div>

Abertura e fechamento condicionais

Se slider_full estiver desativado, abrimos um container antes do conteúdo e fechamos após ele. Repita a mesma condição para o fechamento.

{% if not settings.slider_full %}
  <div class="js-home-slider-container container">
{% endif %}
  ... conteúdo do slider ...
{% if not settings.slider_full %}
  </div>
{% endif %}

Unificando dados do slider

Escolha o array correto (desktop ou mobile) e itere apenas uma vez:

{% if mobile %}
  {% set slider = settings.slider_mobile %}
{% else %}
  {% set slider = settings.slider %}
{% endif %}

{% for slide in slider %}
  {# conteúdo do slide #}
{% endfor %}

Equivalente em JavaScript

let slider;
if (mobile) {
  slider = settings.slider_mobile;
} else {
  slider = settings.slider;
}
for (const slide of slider) {
  // render
}

Índice no loop (loop.index / loop.index0)

Controle manual do índice ou use as variáveis do objeto loop:

{# Manual #}
{% set index = 0 %}
{% for item in lista %}
  {{ index }} - {{ item }}
  {% set index = index + 1 %}
{% endfor %}

{# Automático #}
{% for item in lista %}
  {{ loop.index0 }} - {{ item }} {# começa em 0 #}
  {{ loop.index }} - {{ item }}  {# começa em 1 #}
{% endfor %}

Atributos do item da galeria (slide)

slide.image → URL da imagem.
Com filtros | static_url | settings_image_url('large') gera a URL exata. Veja métodos suportados em docs.

slide.link → Texto/link configurado.
Use com {{ "{{ slide.link | setting_url }}" }}.

slide.title → Título;

slide.description → Descrição;

slide.button → Texto do botão;

slide.color → Opção de cor.

Reaproveitando campos (ex.: carrossel de avaliações)

Os campos da GALLERY são flexíveis e podem ser reutilizados para outros cenários:

slide.imagem     → foto de quem avaliou
slide.title      → nome de quem avaliou
slide.description→ texto da avaliação
slide.button     → data da avaliação

i18n no Twig (translate)

Traduza rótulos usando o filtro translate:

<a href="{{ slide.link | setting_url }}" aria-label="{{ 'Carrusel' | translate }} {{ loop.index }}">...</a>

O filtro busca a chave em translations.txt e retorna o valor no idioma atual; caso não exista, exibe o texto original.