Home Slider | Documentación para Diseñadores

Después de armar el orden de las secciones en la Home, el archivo snipplets/home/home-section-switch.tpl decide qué subtemplate cargar según section_select.

Switch de secciones (home-section-switch.tpl)

Cuando section_select == 'slider', incluimos el slider para desktop y opcionalmente el de mobile:

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

Trabajando con GALLERY del settings

El tipo GALLERY de settings permite iterar sobre imágenes y metadatos configurados por el comerciante. Podemos alternar entre desktop y mobile con una variable mobile enviada vía with.

Clases condicionales para desktop/mobile

Controla visibilidad y clases dinámicamente en el 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>

Apertura y cierre condicionales

Si slider_full está desactivado, abrimos un container antes del contenido y cerramos después. Repite la misma condición para el cierre.

{% 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 datos del slider

Elige el array correcto (desktop o mobile) e itera solo una vez:

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

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

Equivalente en JavaScript

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

Índice en el bucle (loop.index / loop.index0)

Controla manualmente el índice o usa las variables del 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 del ítem de la galería (slide)

slide.image → URL de la imagen.
Con filtros | static_url | settings_image_url('large') genera la URL exacta. Ver métodos soportados en docs.

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

slide.title → Título;

slide.description → Descripción;

slide.button → Texto del botón;

slide.color → Opción de color.

Reutilizando campos (ej.: carrusel de reseñas)

Los campos de GALLERY son flexibles y pueden reutilizarse para otros escenarios:

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)

Traduce rótulos usando el filtro translate:

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

El filtro busca la clave en translations.txt y retorna el valor en el idioma actual; si no existe, muestra el texto original.