Uso de módulos en plantillas
Los módulos son áreas editables de las páginas o correos electrónicos de HubSpot. Las instancias de los módulos pueden agregarse a las plantillas mediante HubL. Cuando un módulo se define en una plantilla, aparecerá de forma predeterminada en ese lugar de la plantilla. Si el módulo se encuentra en una región editable, como un área de arrastrar y soltar o en una columna flexible, se puede eliminar y mover y se pueden agregar otros módulos. Estas son instancias del módulo.
Las definiciones de los módulos: las etiquetas de los módulos que puedes agregar a las plantillas definen el estado predeterminado de las instancias de los módulos.
Después de definir un módulo, si es necesario, puedes obtener sus valores de campo a nivel de plantilla a través de content.widgets
.
Las etiquetas de los módulos están formadas por los siguientes componentes:
- Un nombre único para ese módulo: le da al módulo una identidad única en el contexto de la plantilla
- Ruta: (depende 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.
- Parámetros: ajustes adicionales para la instancia del módulo. Incluye valores predeterminados a nivel de plantilla para los campos del módulo.
@hubspot/
, seguido del tipo de módulo. Ve el siguiente ejemplo y la página predeterminada de módulos para obtener más información.
Las etiquetas de los módulos de HubL están delimitadas por {%
y requieren que se especifique el tipo de módulo y un nombre único. El nombre único debe ir entre comillas después del tipo de módulo. Los nombres de los módulos deben utilizar guiones bajos en lugar de espacios o guiones.
El nombre único se utiliza para hacer coincidir el contenido introducido con el editor de la página o el correo electrónico con la etiqueta del módulo de 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.
Además de los dos componentes necesarios de una etiqueta de módulo, los módulos de HubL admiten varios parámetros que especifican el comportamiento de un módulo, así como la forma como se mostrará. Los parámetros son pares clave-valor separados por comas. Los parámetros tienen diferentes tipos, como cadena, booleano, entero, enumeración y lista JSON. Los parámetros de cadena deben tener su valor entre comillas*, mientras que los parámetros booleanos no requieren comillas alrededor de sus valores True o False. A continuación, se muestra un ejemplo de un módulo de texto básico con una etiqueta y un parámetro de valor especificado.
*Los valores de los parámetros de cadena pueden escribirse entre comillas simples o dobles. En este ejemplo, el nombre único del módulo tiene comillas dobles y los valores de los parámetros están entre comillas simples. Esta sintaxis es útil cuando los valores de los parámetros incluyen marcas HTML con múltiples atributos. Los valores de los parámetros booleanos se escriben en mayúsculas para que sean legibles.
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.
Cuando introdujimos dnd_area
y todas las etiquetas de HubL que se utilizan con ella. Se hizo posible tener un campo de módulo con el mismo nombre que un parámetro dnd existente. El administrador de diseño te impedirá crear nuevos campos que utilicen uno de estos nombres de parámetros reservados, pero eso no ayuda a los módulos antiguos. Para solucionar esto, agregamos 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 campos. Su valor debe ser coherente con el formato que espera el tipo de campo.
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.
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.
Si bien ciertos módulos tienen determinados parámetros especiales, también hay parámetros que son compatibles con todos los módulos. A continuación, se encuentra una lista de los parámetros que son compatibles con todos los módulos.
Parameter | Type | Description | Default |
---|---|---|---|
label
| String | Define el título interno del módulo en el editor de contenido. Este parámetro también se puede utilizar para darles instrucciones adicionales a los usuarios. | |
overrideable
| Boolean | Controla si el módulo se puede editar en el editor de contenido o no. Este parámetro es el equivalente de usar la función de bloquear módulo en la IU del Creador de plantillas. |
True
|
no_wrapper
| Boolean | Si estableces no_wrapper como verdadero, el marcado de agrupación se elimina del contenido de un módulo. El resultado del módulo para la página siempre está envuelto en una <div> con clases especiales. Este marcado de agrupación permite que el editor se desplace hasta un módulo cuando haces clic en él dentro del panel de vista preliminar. Puede que haya ocasiones en las que te convenga eliminar la agrupación, por ejemplo, si quieres usar un módulo de texto para completar el destino de un atributo href de etiqueta de anclaje. |
False
|
extra_classes
| String | Agregar un parámetro extra de clases agregará esas clases a la envoltura del contenido del módulo. Puedes agregar varias clases a la vez separando las clases con espacios (por ejemplo, extra_classes='full-width panel'). | |
export_to_template_context
| Boolean | Si es True, en lugar de representar el HTML, los parámetros de este widget estarán disponibles en el contexto de la plantilla. Cómo utilizar este parámetro y la etiqueta widget_data. |
False
|
unique_in_loop
| Boolean | Este parámetro se puede utilizar cuando se define un módulo dentro de un ciclo para agregar el nombre único del módulo con el loop.index. Si es True, esto hace posible imprimir una versión diferente de ese módulo con cada iteración del ciclo. |
False
|
Para ver una lista completa de todos los tipos de módulos y sus parámetros, haz clic aquí.
You can set the value of custom module fields using parameters.
faq_group_title
en este caso no es uno de los parámetros que está disponible en todos los módulos. faq_group_title
es específico de este módulo personalizado. Es el nombre de la variable de un campo del módulo.
Algunos campos son sencillos y el parámetro espera simplemente una cadena, entero, true/false. Otros pueden esperar un objeto. Proporcionar los valores en el formato correcto depende de ti, ya que no hay ninguna validación de valores en el editor basada en la configuración que estableces en la configuración de los campos del módulo personalizado. Ejemplo: Un módulo tiene un campo numérico que tiene un valor mínimo establecido en 1. Pasas en el parámetro un 0. No hay ninguna advertencia que indique que el valor no es válido.
Cuando se construyen plantillas con módulos que contienen campos de estilo, se pueden establecer explícitamente valores predeterminados en los campos de estilo utilizando el parámetro de estilos.
Esto funciona igual que los grupos normales: 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.
Campo | Tipo | Ejemplo | Claves |
---|---|---|---|
Blog | id de blog | 1234567890 | |
Booleano | true/false | false | |
Choice | cadena de valores | "option_1" | |
Color | objeto |
|
|
CTA | Cadena, ID de CTA |
|
|
Fecha | marca de tiempo |
|
|
Datetime | marca de tiempo |
|
|
Correo electrónico | matriz de cadenas de direcciones de correo electrónico |
|
|
Archivo | Cadena de URL al archivo |
|
|
Correo electrónico de seguimiento | ID de correo electrónico de seguimiento |
|
|
Font | Objeto con claves y valores de fuente |
|
|
Formulario | Objeto con claves y valores de formulario |
|
|
Tabla de HubDB | ID de tabla de HubDB | 123456789 |
|
Ícono | objeto con claves y valores de ícono |
|
|
Imagen | objeto con claves y valores de imagen |
|
|
Enlace | objeto con claves y valores de enlace |
|
|
Logotipo | objeto con claves y valores de logotipo |
|
|
Reunión | Cadena de URL del enlace de reunión | "https://app.hubspot.com/meetings/developers-r-kewl" |
|
Menú | ID del menú | 123456789 |
|
Número | entero | 1 |
|
Página | ID de página | 1234567890 |
|
texto enriquecido | cadena, puede contener html | "<h1>Hello, world!</h1>" |
|
Campaña de Salesforce | cadena, identificador de campaña de Salesforce | "7016A0000005S0tQAE" |
|
Menú simple | matriz de objetos de elementos del menú |
|
|
Etiqueta | ID/slug de etiqueta (se recomienda el ID) | 1234567890 |
|
Texto | string | "it's like any other string" |
|
URL | objeto con claves y valores URL |
|
|
Gracias por tus comentarios, son muy importantes para nosotros.