El home.tpl determina el contenido específico de la página de inicio de la tienda.
Comenzamos por incluir el carrusel de imágenes, de forma fija, por lo tanto si la persona que administra la tienda decide utilizarlo, va a aparecer en primer lugar.
Con el Base theme incorporamos el ordenamiento editable de componentes en la página de inicio. Por lo que cada componente está desarrollado en un snipplet diferente y desde este archivo generamos el loop para detectar la posición determinada desde la sección de personalización del diseño en el Administrador nube.
Primero creamos un array vacío, que luego va a tomar el orden correcto de los componentes
{% set newArray = [] %}Luego abrimos el loop con las 7 posiciones disponibles, determinadas en el archivo de configuración , settings.txt
{% for section in ['home_order_position_1', 'home_order_position_2', 'home_order_position_3', 'home_order_position_4', 'home_order_position_5', 'home_order_position_6', 'home_order_position_7'] %}Creamos un set que registre los componentes a utilizar, un condicional que llame a todos los snipplets de los componentes posibles, y un set que vaya escribiendo los componentes que se van usando:
{% set section_select = attribute(settings,"#{section}") %}
{% if section_select == 'products' %}
{# **** Featured products **** #}
{% include 'snipplets/home/home-featured-products.tpl' %}
{% elseif section_select == 'informatives' %}
{# **** Informative banners **** #}
{% include 'snipplets/banner-services/banner-services.tpl' %}
{% elseif section_select == 'categories' %}
{# **** Categories banners **** #}
{% include 'snipplets/home/home-banners.tpl' with {'textoverimage': true} %}
{% elseif section_select == 'welcome' %}
{# **** Welcome message **** #}
{% include 'snipplets/home/home-welcome-message.tpl' %}
{% elseif section_select == 'video' %}
{# **** Video embed **** #}
{% include 'snipplets/home/home-video.tpl' %}
{% elseif section_select == 'instafeed' %}
{# **** Instafeed **** #}
{% include 'snipplets/home/home-instafeed.tpl' %}
{% elseif section_select == 'modules' %}
{# **** Modules banners **** #}
{% include 'snipplets/home/home-modules.tpl' with {'textoverimage': false} %}
{% endif %}
{% set newArray = newArray|merge([section_select]) %}Este último código lo englobamos dentro de un condicional verificando que el componente no está repetido dentro del array.
{% if section_select not in newArray %}{% endif %}El código final queda de la siguiente manera:
{# **** Home slider **** #}
{% include 'snipplets/home/home-slider.tpl' %}
{# **** Features Order **** #}
{% set newArray = [] %}
{% for section in ['home_order_position_1', 'home_order_position_2', 'home_order_position_3', 'home_order_position_4', 'home_order_position_5', 'home_order_position_6', 'home_order_position_7'] %}
{% set section_select = attribute(settings,"#{section}") %}
{% if section_select not in newArray %}
{% if section_select == 'products' %}
{# **** Featured products **** #}
{% include 'snipplets/home/home-featured-products.tpl' %}
{% elseif section_select == 'informatives' %}
{# **** Informative banners **** #}
{% include 'snipplets/banner-services/banner-services.tpl' %}
{% elseif section_select == 'categories' %}
{# **** Categories banners **** #}
{% include 'snipplets/home/home-banners.tpl' with {'textoverimage': true} %}
{% elseif section_select == 'welcome' %}
{# **** Welcome message **** #}
{% include 'snipplets/home/home-welcome-message.tpl' %}
{% elseif section_select == 'video' %}
{# **** Video embed **** #}
{% include 'snipplets/home/home-video.tpl' %}
{% elseif section_select == 'instafeed' %}
{# **** Instafeed **** #}
{% include 'snipplets/home/home-instafeed.tpl' %}
{% elseif section_select == 'modules' %}
{# **** Modules banners **** #}
{% include 'snipplets/home/home-modules.tpl' with {'textoverimage': false} %}
{% endif %}
{% set newArray = newArray|merge([section_select]) %}
{% endif %}
{% endfor %}
Variables en home.tpl
has_products → true si la tienda tiene productos (incluye los escondidos). false en otro caso.