Templates home

Visión general

           

En la Home, es común preparar variables booleanas con {% set %} basadas en settings para decidir la exhibición de bloques y armar dinámicamente el orden de las secciones.

Flags (booleanos) a partir de settings

Ejemplos de verificación del banner principal y del slider mobile (GALLERY y CHECKBOX):

{# Slider desktop existe e não está vazio #}
{% set has_main_slider = settings.slider and settings.slider is not empty %}

{# Slider mobile existe, checkbox ligado e não vazio #}
{% set has_mobile_slider = settings.toggle_slider_mobile and settings.slider_mobile and settings.slider_mobile is not empty %}
Configuración en settings
gallery
    name = slider
    gallery_image = Agregar imagen
subtitle
    subtitle = Imágenes para celulares
checkbox
    name = toggle_slider_mobile
    description = Cargar otras imágenes para celulares
gallery
    name = slider_mobile
    gallery_image = Agregar imagen
Consejo

Para GALLERY usa is not empty para asegurar que haya al menos un ítem.

Reseñas (testimonials)

Valida si al menos una información fue completada (descripción, nombre o imagen personalizada) y deriva la flag agregada:

{% set has_testimonial_01 = settings.testimonial_01_description or settings.testimonial_01_name or "testimonial_01.jpg" | has_custom_image %}
{% set has_testimonial_02 = settings.testimonial_02_description or settings.testimonial_02_name or "testimonial_02.jpg" | has_custom_image %}
{% set has_testimonial_03 = settings.testimonial_03_description or settings.testimonial_03_name or "testimonial_03.jpg" | has_custom_image %}
{% set has_testimonials = has_testimonial_01 or has_testimonial_02 or has_testimonial_03 %}
IMAGE con dimensiones
image
    original = testimonial_01.jpg
    title = Cargar imagen (JPG, GIF, PNG)
    width = 350
    height = 350
has_custom_image

El filtro verifica si la imagen definida en original fue reemplazada por una imagen personalizada.

Placeholders en modo vista previa

Incluye snipplets/svg/empty-placeholders.tpl cuando show_help o show_component_help esté activo:

{% if show_help or show_component_help %}
    {% include "snipplets/svg/empty-placeholders.tpl" %}
{% endif %}

Armado dinámico de secciones (order)

Crea y alimenta un array con las secciones seleccionadas en settings, respetando el orden configurado y evitando duplicaciones.

Twig
{# inicia um array vazio #}
{% set newArray = [] %}

{# percorre as posições 1..20 #}
{% for i in 1..20 %}
  {% set section = 'home_order_position_' ~ i %}
  {% set section_select = attribute(settings, section) %}

  {% if section_select not in newArray %}
    {% include 'snipplets/home/home-section-switch.tpl' %}
    {% set newArray = newArray | merge([section_select]) %}
  {% endif %}
{% endfor %}
JavaScript equivalente
let newArray = [];
for (let i = 1; i <= 20; i += 1) {
  const section = `home_order_position_${i}`;
  const section_select = settings[section];
  if (!newArray.includes(section_select)) {
    // render trocar por chamada de componente equivalente
    newArray = [...newArray, section_select]; // push imutável
  }
}
Consejos
  • Usa attribute(settings, clave) cuando la clave se genera dinámicamente.
  • El operador ~ concatena cadenas en Twig.
  • merge retorna un nuevo array (inmutable).