` | String multilínea | | `wysiwyg` | `

` | String HTML | | `link` | `` | URL string (ya incluye barras) | | `upload` | `` | **Array** de `{urlPath, info1, info2, info3, info4}` | | `uploadMulti` | `

` | Itera sobre archivos subidos | | `list` (fijo) | `

` | Valor seleccionado | | `list` (tabla) | `

` | `num` del registro | | `multiv2` | `

` wrapper | Array de objetos repetibles | | `checkbox` | `

` o `` | `1` o `0` (número) | | `colorpicker` | `

` | Hex color string | ### textfield ```html

Elemento editable

``` ### headfield Genera 2 variables: la estándar y `_tag` con la etiqueta elegida (h1…h6). ```html <{{ titulo_tag | default('h2') }} data-field-type="headfield" data-field-label="Título Sección" class="text-3xl font-bold"> Título de la sección ``` ### textbox ```html

Texto largo editable

``` ### wysiwyg Editor de texto enriquecido. Acceder con `| raw` para no escapar el HTML. ```html

Texto con estilos editables

``` ### link El campo `enlace` de Acai ya incluye las barras necesarias — nunca añadas barras extra. ```html Haz clic aquí ``` ### upload Devuelve un array. Acceso en Twig: `{{ imagen[0].urlPath }}`. ```html

``` Atributos disponibles: - `data-lazy="true"` — carga perezosa - `data-field-width="1400"` — ancho máximo sugerido - `data-field-info1="titulo"` — campo de información adicional (típicamente alt) ### uploadMulti Itera sobre todas las imágenes subidas. Variable iteradora: `uploadMulti`. ```html

``` ### list (opciones fijas) ```html

``` Formato `data-list-options`: - `opcion1,opcion2` → la opción es etiqueta y valor a la vez - `|valor3,etiqueta3` → separa valor de etiqueta con `|` ### list (tabla) Selecciona un registro de otra tabla. Devuelve el `num`. ```html

``` - `data-list-table` — nombre de tabla **sin prefijo `cms_`** - `data-list-value` — campo a usar como valor (normalmente `num`) - `data-list-label` — campo a mostrar como label ### multiv2 — Campos repetibles Crea grupos de campos repetibles. La variable resultante es un array de objetos. ```html

Nombre del producto

Descripción del producto

``` Uso en Twig: ```twig {% for record in productos %}

{% endfor %} ``` ### checkbox Devuelve `1` o `0` (número), nunca `true`/`false`. ### colorpicker Devuelve un string hexadecimal (`#ff0000`). Almacenado en config-vars (no en `builder_custom`). ## Atributos Acai ### `c-if` — Renderizado condicional Usa `=` (un solo igual) para comparaciones, no `==`. ```html

Grid layout

``` ### `c-else` Va inmediatamente después del elemento `c-if`. ```html

No image available

``` ### `c-for` — Iteración sobre array ```html

``` ### `c-for` — Iteración sobre tabla de BD ```html

{{ producto.title }}

``` Parámetros opcionales: `c-where` (string SQL), `c-order` (string de orden), `c-limit` (entero). Equivalente Twig: ```twig {% for producto in 'productos' | get('visible=1','num desc',10) %}

{% endfor %} ``` Variables del loop: `loop.index` (1-based), `loop.index is odd`, `loop.index is even`. ### `c-class` — Clases CSS condicionales ```html

``` ### `c-hidden` — Variables ocultas Elemento que NO se renderiza pero SÍ declara variables builder. Patrón típico para colores y opciones de configuración. ```html

``` ### `c-required` — Validación condicional ```html ``` ## Tag `` — Definir variables ```html {% set gracias = 'apartados' | get('num = 20').0 %} ``` ## Incluir módulos Para incluir un módulo dentro de otro módulo o dentro de una sección general, usa el `moduleId` como etiqueta HTML: ```html ``` Ejemplos: ```html ``` El módulo hijo recibe los parámetros como variables en su contexto. ## Formularios — `c-form` Maneja automáticamente validación, almacenamiento en BD y envío de emails. ```html Acepto la política de privacidad ``` ### Atributos `c-form` | Atributo | Descripción | |----------|-------------| | `tableName="'tabla'"` | Tabla destino (sin `cms_`) | | `mailRecord="['correos', 'ID']"` | Template de email en tabla `correos` | | `sendTo="'email@dominio.com'"` | Destinatarios (separados por coma) | | `sendToClient="'campo_email'"` | Campo del formulario con email del cliente para auto-reply | | `captcha="true"` | Activa Google reCAPTCHA | | `honeypot="true"` | Campo oculto anti-spam | | `messageOK="'texto'"` | Mensaje al enviar correctamente | | `messageKO="'texto'"` | Mensaje al fallar validación | | `redirect="'/ruta/'"` | Redirección tras envío correcto | | `attachFiles="true"` | Adjuntar archivos al email | | `showImages="true"` | Mostrar thumbnails en email | | `emailMode="'twig'"` | Email en formato Twig | | `header="'

...'"` | HTML cabecera del email | | `footer="'

...'"` | HTML footer del email | | `styles="'body { ... }'"` | CSS del email | Para formularios estándar (contacto, postulación), prefiere `c-form` antes que crear lógica custom de POST/hook. Solo crea una tabla propia si necesitas gestionar esos registros desde el admin. ## Componentes built-in ### Carousel — `c-tns-wrapper` ```html

``` ### Lightbox ```html

``` ### Breadcrumb ```html ``` ### Animate On Scroll (AOS) ```html

Contenido animado

``` Valores comunes: `fade-up`, `fade-down`, `fade-left`, `fade-right`, `zoom-in`, `zoom-in-up`, `fade-up-right`, `fade-up-left`. Tras cambios dinámicos en JS: `AOS.refresh()`. ### Lazy loading ```html

``` ## Reglas críticas 1. Todo `data-field-type` exige `data-field-label`. 2. `data-field-label` se transforma a variable: minúsculas, sin espacios ni caracteres especiales. 3. Campos `upload` retornan **arrays** — usa `imagen[0].urlPath`, nunca `imagen`. 4. Variables dentro de `multiv2` son propiedades del objeto iterado (`record.nombre`). 5. `c-if` usa `=` (un igual). `{% if %}` usa `==` (doble igual). 6. `c-for` con tabla: nombre **sin prefijo `cms_`**. 7. `enlace` ya incluye las barras — no añadas slashes extra. 8. Checkbox guarda `1` o `0` (número), nunca `true`/`false`. 9. Evita Tailwind arbitrary-value en `index-base.tpl` — muévelos a `style.css`. 10. `script.js` y `style.css` son estáticos: NO uses sintaxis Twig dentro. Pasa valores dinámicos vía `data-*`.

`–`

{{ record.nombre }}

{{ item.title }}