Settings.txt

El archivo settings.txt de Tiendanube       utiliza un lenguaje de configuración propietario específico de la plataforma. No es un        lenguaje de programación estándar, sino un formato de configuración estructurado creado        por Tiendanube para definir las opciones del panel administrativo de los temas con        características de estructura jerárquica.        

Estructura básica:

Título da Sección
    meta
        icon = nombre-del-icono
        advanced = false
    color
        name = nombre_de_la_variable
        description = Descripción para el usuario

A Tiendanube  oferece diversos tipos de campos para configuração no settings.txt:        

Las propiedades básicas de los campos para que funcionen son name y description, donde:

Ejemplo:

color
    name = background_color
    description = Color de fondo

Recuperando el valor en Twig:

Para facilitar la comprensión, analicemos la estructura y organización del archivo comparándola con el panel de Tiendanube.        

Estructura inicial

El primer punto importante para iniciar la personalización del archivo settings es            encontrar el lugar más intuitivo para añadir las nuevas personalizaciones. Por defecto,   Tiendanube ya organiza por página y componentes más amplios como Encabezado            y Pie de página.

En la primera sección podemos encontrar campos del tipo COLOR. El tipo color tiene un patrón de "pick color" para facilitar la elección hexadecimal para el comerciante.

Configuración META

En esta primera etapa ya podemos ver algunos estándares como meta, que debemos informar justo después            de la sección principal. Siguiendo la jerarquía, todo contenido debajo que tenga una            "tab" más, Tiendanube interpretará que pertenece a la sección principal anterior.

La subsección META generalmente tiene dos configuraciones:

Ejemplo de configuración META:

meta
    icon = paint-brush
    advanced = false

Configuración de Colores

Luego, después de meta empiezan las configuraciones que el comerciante personalizará. En este ejemplo seguimos con tres tipos de COLORES: Color de Fondo, Color de Textos y Color de Destacado, todas siguiendo el mismo patrón:

color                    # TIPO INDICANDO QUE ES UNO COLOR
    name = background_color    # CLAVE QUE SERÁ UTILIZADA EN TWIG/TPL
    description = Color de fondo # LABEL DEL CAMPO PARA EL COMERCIANTE

Después de los colores encontramos una nueva subsección. El SUBTITLE tiene solo un valor, que sigue siendo subtitle = valor. Ese valor se exhibe como un subtítulo en el panel, en este caso usado para un informativo.

Ejemplo:

subtitle
    subtitle = <div class='js-color-description'>Aplica a textos de descuento, envío gratis y cuotas sin interés.</div>

Siguiendo a la próxima subsección encontramos el COLLAPSE. Este es un recurso interesante para grandes personalizaciones, pues con COLLAPSE es posible organizar la información y personalizaciones, agrupando las configuraciones para facilitar.

Ejemplo:

collapse
    title = Botón principal

Al utilizar collapse, todo el contenido debajo de él quedará agrupado en una nueva sidebar, que se abrirá al hacer clic, y posee solo un valor: title.

Siguiendo las secciones principales, entramos en TIPO DE LETRA. En esta sección encontramos más tipos como TITLE, FONT, RANGE_NUMBER y FORM_GROUP.

TITLE

El tipo TITLE, así como SUBTITLE, tiene solo el propio title como atributo:

title
    title = Títulos

FONT

El tipo FONT tiene name y description como los demás, y también tiene VALUES. Para facilitar la comprensión, comparemos VALUES como si fueran las opciones de un SELECT HTML, donde tenemos el VALUE (valor) seguido del label tras el signo igual (=).

Ejemplo:

font
    name = font_headings
    title = Fuentes para títulos
    description = Fuente
    values
        "Almarai", sans-serif = Almarai
        "Archivo", sans-serif = Archivo
        "Archivo Black", sans-serif = Archivo Black

Equivalente en HTML:

<label>Fonte</label>
<select name="font_headings">
    <option value='"Almarai", sans-serif'>Almarai</option>
    <option value='"Archivo", sans-serif'>Archivo</option>
    <option value='"Archivo Black", sans-serif'>Archivo Black</option>
</select>

RANGE_NUMBER

Luego viene RANGE_NUMBER, donde se forma la barra entre un valor mínimo y máximo, del tipo numérico. Como los demás, tiene name y description seguido por los valores min y max.

range_number
    name = headings_size
    description = Tamaño
    min = 28
    max = 48

En la sección ENCABEZADO tenemos algunos tipos nuevos como CHECKBOX y DROPDOWN.

CHECKBOX

El tipo CHECKBOX es más simple comparado con DROPDOWN. Seguimos con los mismos campos name y description únicamente.

checkbox
    name = header_colors
    description = Usar estos colores para el encabezado

DROPDOWN

En cambio, DROPDOWN, así como FONTS, es un selector de opciones, también un SELECT HTML, con name, description y values, siguiendo la misma regla de fonts, donde tenemos value = label.

dropdown
    name = logo_size
    description = Tamaño del logo
    values
        small = Chico
        medium = Mediano
        big = Grande

Entrando en el COLLAPSE de ENCABEZADO EN CELULARES tenemos el tipo IMAGE e I18N_INPUT.

IMAGE

Podemos ver dos componentes del tipo IMAGE: uno solo con name y description (configuración básica para funcionar) y en el segundo tenemos dos configuraciones, WIDTH y HEIGHT. Cuando se informa, en el panel se inserta una etiqueta de "sugerencias" de tamaño, ayudando al comerciante con el formato ideal.

Configuración básica:

image
    original = logo-transparent.jpg
    title = Logo alternativo (opcional)

Con dimensiones sugeridas:

image
    original = menu_banner_mobile.jpg
    title = Cargar imagen (JPG, GIF, PNG)
    width = 820
    height = 175

I18N_INPUT

En el tipo I18N_INPUT tenemos el tradicional input del tipo TEXT, pero tiene en cuenta los idiomas configurados en la tienda. En este caso tenemos BR y AR, por lo que se insertan dos inputs para que el comerciante informe el valor para cada idioma.

i18n_input
	name = menu_banner_mobile_url
    description = Link

En la sección principal de la Página inicial tenemos un cambio significativo. En la barra lateral tenemos una opción más dinámica, donde es posible arrastrar y soltar para ordenar la posición de los componentes, así como la opción de ACTIVAR/DESACTIVAR cada uno.

Configuración para ordenación dinámica

Para que esto funcione, debemos seguir algunos estándares. Dentro de META, además de icon y advanced tenemos default. Ese valor es la clave del TIPO SECTION_ORDER que encontramos al final de la sección principal. Esta sección es responsable de informar los collapses que forman el drag-and-drop, y cada collapse también tiene el valor BACKTO que también indica el home_order_position.

Página de inicio
    meta
        icon = home
        advanced = true
        default = home_order_position
    collapse
        title = Carrusel de imágenes
        backto = home_order_position
    ...
    collapse
        title = Información de envíos, pagos y compra
        backto = home_order_position
    ...
    section_order
        name = home_order_position
        start_index = 1
        sections
            slider = Carrusel de imágenes
            main_categories = Categorías principales
            products = Productos destacados
            ...

Además de este cambio importante, ya podemos ver el tipo GALLERY, muy utilizado en las personalizaciones. Este tipo es una colección de imágenes. Así como IMAGE, tenemos la opción de colocar GALLERY_WIDTH y GALLERY_HEIGHT además de gallery_more_info, donde al ser informado se agregan más opciones de información por imagen.

gallery
    name = banner_mobile
    gallery_image = Agregar imagen
    gallery_link = [Opcional] Página web a la que quieres que te lleve la imagen al hacer click
    gallery_width = 820
    gallery_height = 1000
    gallery_more_info = true

Para finalizar la explicación de los tipos, tenemos algunos otros como TEXT, TEXTAREA, CSS_CODE y MENU.

TEXT

Donde text genera un INPUT HTML simple. En este caso tenemos la opción de informar también el placeholder.

text
    name = cart_minimum_value
    description = ¿Cuál es el monto mínimo que tus clientes deben gastar?
    placeholder = Ej.: 3000

TEXTAREA y CSS_CODE

Donde textarea y css_code generan un TEXTAREA HTML. La diferencia entre ellos es que css_code trae una formatação orientada a códigos CSS, mientras que textarea viene en el formato estándar y con capacidad de hasta 5 mil caracteres.

TEXTAREA:

textarea
    name = about_store
    description = Texto sobre la tienda

CSS_CODE:

css_code
    name = css_code
    description = Acá podes escribir código CSS para que se muestre en tu tienda

MENU

En cuanto a menu, aunque simple, es muy importante, pues lista las opciones de menús creados por el comerciante, posibilitando dejar flexible qué menú creado por el comerciante se exhibirá en el lugar deseado.

menu
    name = footer_menu
    description = ¿Qué menú vas a mostrar al final de la página?