Templates home

           

Na Home, é comum preparar variáveis booleanas com {% set %} com base no settings para decidir exibição de blocos, e montar dinamicamente a ordem das seções.

Flags (booleans) a partir do settings

Exemplos de verificação do banner principal e do slider mobile (GALLERY e 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 %}
Configuração no 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
Dica

Para GALLERY use is not empty para garantir que há ao menos um item.

Avaliações (testimonials)

Valide se ao menos uma informação foi preenchida (descrição, nome ou imagem customizada) e derive a 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 com dimensões
image
    original = testimonial_01.jpg
    title = Cargar imagen (JPG, GIF, PNG)
    width = 350
    height = 350
has_custom_image

O filtro verifica se a imagem definida em original foi substituída por uma imagem customizada.

Placeholders no modo prévia

Inclua snipplets/svg/empty-placeholders.tpl quando show_help ou show_component_help estiver ativo:

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

Montagem dinâmica de seções (order)

Crie e alimente um array com as seções selecionadas no settings, respeitando a ordem configurada e evitando duplicações.

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
  }
}
Dicas
  • Use attribute(settings, chave) quando a chave é gerada dinamicamente.
  • O operador ~ concatena strings no Twig.
  • merge retorna um novo array (imutável).