Uso de módulos en plantillas
Los módulos se pueden agregar directamente a una plantilla o a páginas individuales con áreas de arrastrar y soltar y columnas flexibles. Cuando se agrega un módulo a una plantilla, el módulo aparecerá en esa ubicación por opción predeterminada. Los módulos en áreas de arrastrar y soltar y columnas flexibles se pueden mover y eliminar, y se pueden agregar otros módulos a su alrededor. Estas son instancias del módulo.
Después de que se haya definido un módulo, puedes obtener sus valores de campo en el nivel de plantilla a través del dictado content.widgets.
Las etiquetas de módulo HubL están delimitadas {% %}
y deben especificar module
, un nombre único y la ruta del administrador de diseño del módulo. Un módulo también puede incluir parámetros para ajustes adicionales.
- Nombre del módulo: da al módulo una identidad única en el contexto de la plantilla.
- El nombre debe estar entre comillas siguiendo el tipo de módulo, y debe usar guiones bajos en lugar de espacios o guiones.
- Este nombre se utiliza para hacer coincidir el contenido establecido en el editor de páginas/correo electrónico con la etiqueta del módulo HubL correspondiente. Por ejemplo, si codificas una etiqueta de módulo de HubL con el mismo nombre en dos áreas diferentes de una plantilla, los usuarios solo tendrán un módulo para editar en el editor, pero los cambios en ese módulo se aplicarán en ambas ubicaciones.
- El nombre debe estar entre comillas siguiendo el tipo de módulo, y debe usar guiones bajos en lugar de espacios o guiones.
- Ruta: dependiendo de la etiqueta, define la ubicación del módulo en el administrador de diseño.
/
significa la raíz de la unidad actual;./
significa el directorio actual;../
significa el elemento principal del directorio actual.
@hubspot/
seguido del tipo de módulo.
- Parámetros: ajustes adicionales para la instancia del módulo, especificando su comportamiento y cómo se renderiza. Incluye valores predeterminados a nivel de plantilla para los campos del módulo.
- Los parámetros son pares clave-valor separados por comas.
- Los parámetros tienen diferentes tipos, como cadena, booleano, entero, enumeración y objeto de lista JSON. Los valores de los parámetros de cadena deben estar entre comillas simples o dobles, mientras que los parámetros booleanos no requieren comillas alrededor de sus valores
True
oFalse
. Más información sobre los parámetros disponibles para todos los módulos. - Ten en cuenta que no hay validación en el editor para los valores de campo en comparación con la configuración de campo del módulo. Por ejemplo, si un módulo tiene un campo numérico que tiene un valor mínimo establecido en
1
, y pasas en el parámetro un0
, no aparecerá una advertencia de que valor no es válido.
En los módulos con campos que esperan diccionarios, puedes pasarlos como lo harías con otros parámetros. Si es más limpio para ti o planeas reutilizar los valores, puedes en cambio establecer el diccionario en una variable y pasar la variable al parámetro.
Las etiquetas de arrastrar y soltar, como dnd_area
, vienen con un conjunto de parámetros predeterminados, como width
. Si bien el administrador de diseño evitará que crees nuevos campos que usen uno de estos parámetros reservados, los módulos creados antes de que se introdujeran las etiquetas de arrastrar y soltar ya pueden usar un parámetro reservado.
Para solucionar esto, puedes usar el parámetro fields
. De la misma manera que pasarías los datos de un campo para un grupo, puedes pasar el nombre del campo como una clave en el objeto fields
. Su valor debe ser coherente con el formato que espera el tipo de campo.
Puedes establecer valores predeterminados para los campos del módulo en el nivel de plantilla al incluir parámetros en las etiquetas dnd_module
. A continuación, descubre cómo establecer valores de campo predeterminados en grupos de campos anidados, campos repetitivos, grupos de campos repetitivos y campos de estilo.
A continuación se muestra un ejemplo de un módulo de arrastrar y soltar personalizado con un grupo de campos de style
personalizado que contiene otros grupos de campos anidados. Compara su configuración a nivel de plantilla con la forma en que aparecería esta misma agrupación en el administrador de diseño.
Puedes establecer valores predeterminados a nivel de plantilla para los campos repetitivos pasando una matriz al parámetro del campo. Los elementos de la matriz deben tener el formato esperado según el tipo de campo. Por ejemplo:
- Un campo de texto simple solo espera una cadena
- Un campo repetidor de imagen espera un objeto de campo de imagen. Esto se aplica a todos los demás tipos de campos.
Los módulos que contienen grupos de campos que se repiten —como podrías ver en un módulo de presentación de diapositivas o en un módulo de preguntas frecuentes— pueden tener un conjunto predeterminado a nivel de plantilla para esos grupos. Para ello se pasa una matriz de objetos al parámetro del grupo de campos. Los pares de claves y valores del objeto son los nombres de los campos y sus valores.
Se pueden establecer explícitamente valores predeterminados en los campos de estilo utilizando el parámetro styles
.
Esto funciona igual que los demás grupos, donde el parámetro es el nombre del grupo. A ese parámetro se le pasa un objeto con todos los campos que se desean establecer.
Aunque la mayoría de los módulos tienen parámetros que controlan el contenido predeterminado, puede haber situaciones en las que se necesite agregar grandes bloques de código al contenido predeterminado de un módulo. Por ejemplo, es conveniente que incluyas un gran bloque de HTML como contenido predeterminado en un módulo de texto enriquecido o HTML. En lugar de intentar escribir ese código en un parámetro de valor, puedes utilizar la sintaxis de bloque de HubL.
Antes de la sintaxis module_block
, se utilizaba widget_block
. Esta sigue el mismo patrón, pero las etiquetas de apertura eran widget_block
y widget_attribute
. Las etiquetas de cierre eran end_widget_attribute
, end_widget_block
.
La sintaxis widget_block
está obsoleta, pero no es necesario actualizar el código antiguo.
El parámetro que sigue inmediatamente a module_block
o widget_block
(obsoleto) es el parámetro type_of_module
.
En casi toda nuestra documentación encontrarás que utilizamos module
. Los módulos de HubSpot V2 son módulos normales, como los que puedes crear. Por lo tanto, ya no es necesario utilizar un type_of_module
diferente.
Aunque que widget_block
está obsoleto, deberías usar module_block
. Si se hereda un sitio web de otro desarrollador, este puede contener código antiguo que usa widget_block
y type_of_module
.
El type_of_module
admite nombres de módulos de HubSpot V1, por ejemplo: rich_text
o raw_html
. Se pueden agregar parámetros adicionales a la primera línea de HubL. La segunda línea define a qué parámetro se aplicará el contenido del bloque. Por ejemplo, para un módulo rich_text
, este debería ser el parámetro html. En el caso de un módulo raw_html
, éste sería el parámetro de valor (ve los dos ejemplos siguientes).
Además de la sintaxis regular y de bloque, hay ciertos casos en los que es aconsejable que especifiques un gran bloque de contenido predeterminado para una variable de contenido predefinida. El ejemplo más común de esto resulta ser la variable content.email_body. Esta variable imprime un cuerpo de correo electrónico estándar que se puede modificar en el editor de contenido. Como este no es un módulo estándar de HubL, utilizamos la etiqueta content_attribute para especificar un bloque de contenido predeterminado. El ejemplo siguiente muestra la variable del cuerpo del correo electrónico rellenada con un bloque de código de contenido predeterminado.
Aunque algunos módulos tienen ciertos parámetros especiales, a continuación, se encuentra una lista de los parámetros que son compatibles con todos los módulos.
Parameter | Type | Description | Default |
---|---|---|---|
label
| Cadena | El nombre del módulo que se muestra en el editor de contenido. Este parámetro también se puede utilizar para darles instrucciones adicionales a los usuarios. | |
overrideable
| Booleano | Controla si el módulo se puede editar o no en el editor de contenido, equivalente a la configuración Evitar la edición en editores de contenido en el administrador de diseño. |
True
|
no_wrapper
| Booleano | Si estableces en En las páginas, los módulos siempre están envueltos en una |
False
|
extra_classes
| Cadena | Agrega clases a la envoltura del módulo. Puedes agregar varias clases a la vez separando las clases con espacios. Por ejemplo:
| |
export_to_template_context
| Booleano | Cuando se establece en |
False
|
unique_in_loop
| Booleano | Cuando el módulo se define dentro de un bucle, agrega el nombre del módulo con el loop.index. Cuando se establece en |
False
|
Para ver una lista completa de todos los tipos de módulos y sus parámetros, haz clic aquí.
A continuación, descubre los parámetros de módulo basados en campos que puedes usar.
Campo | Tipo | Ejemplo | Claves |
---|---|---|---|
Blog | Entero (ID de blog) | 1234567890 |
|
Booleano | True/false | false |
|
Choice | Cadena | "option_1" |
|
Color | Objeto |
|
|
CTA | Cadena, ID de CTA |
|
|
Fecha | Timestamp |
|
|
Datetime | Timestamp |
|
|
Correo electrónico | Matriz (cadenas de direcciones de correo electrónico) |
|
|
Archivo | Cadena (URL de archivo) |
|
|
Correo electrónico de seguimiento | Entero (ID de correo electrónico de seguimiento) |
|
|
Font | Objeto |
|
|
Formulario | Objeto |
|
|
Tabla de HubDB | Entero (tabla de HubDB) | 123456789 |
|
Ícono | Objeto |
|
|
Imagen | Objeto |
|
|
Enlace | Objeto |
|
|
Logotipo | Objeto |
|
|
Reunión | Cadena (enlace de reunión) | "https://app.hubspot.com/meetings/developers-r-kewl" |
|
Menú | Entero (ID de menú) | 123456789 |
|
Número | Entero | 1 |
|
Página | Entero (ID de página) | 1234567890 |
|
texto enriquecido | Cadena (puede contener html) | "<h1>Hello, world!</h1>" |
|
Campaña de Salesforce | Cadena (ID de campaña de Salesforce) | "7016A0000005S0tQAE" |
|
Menú simple | Matriz de objetos de elementos del menú |
|
|
Etiqueta | Entero (se recomienda ID de etiqueta o slug, ID) | 1234567890 |
|
Texto | Cadena | "it's like any other string" |
|
URL | Objeto |
|
|
Gracias por tus comentarios, son muy importantes para nosotros.