Uso de módulos en plantillas

Last updated:

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.

Sintaxis de módulo básico

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. 
  • 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.
La ruta de acceso a los módulos por opción predeterminada de HubSpot debe empezar siempre por @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 o False. 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 un 0, no aparecerá una advertencia de que valor no es válido.
{# Basic syntax #} {% module "unique_module_name" path="@hubspot/module_type", parameterString='String parameter value', parameterBoolean=True %} {# Sample of a default HubSpot text module #} {% module "job_title" path="@hubspot/text", label="Job Title", value="Chief Morale Officer" %} {# Sample of a custom module #} {% module "faqs" path="/myWebsite/modules/faq_module", label="Custom FAQ Module" faq_group_title="Commonly Asked Questions" %}

Pasar diccionarios a los parámetros del módulo

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.

{% module "social_buttons", path="@hubspot/social_sharing", email={ "default": true, "enabled": false, "img_src": "https://..." } %}

Pasar campos que tienen parámetros asociados a dnd

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.

{% dnd_area "main_content"%} {% dnd_section %} {% dnd_column %} {% dnd_row %} {% dnd_module path="@hubspot/divider", fields={width: "90"} %} {% end_dnd_module %} {% end_dnd_row %} {%end_dnd_column%} {% end_dnd_section %} {% end_dnd_area %}

Establecer valores predeterminados a nivel de plantilla en campos

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.

Establecer valores predeterminados para grupos de campos anidados

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.

{% dnd_module path="/Nested_Module.module" style={ "group":{ "section":{ "color_field":{ "color" : "#000", "opacity" : 100 } } } } %} {% end_dnd_module %}
multi-level field nesting

Establecer valores predeterminados para campos repetitivos

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.
{% module path='../modules/recipe_card.module', ingredients=["Eggs","Ham","Cheese"] %} {% module "my_repeater_module" path="/img_repeater_module", label="img_repeater_module", image=[ { "src" : "https://cdn2.hubspot.net/hubfs/428357/Developer%20Site/assets/logo/Developers-LOGO.svg", "alt" : "HubSpot Developers", "width" : 254, "height" : 31 },{ "src" : "https://www.hubspot.com/hs-fs/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", "alt" : "Dharmesh", "width" : 394, "height" : 394 } ] %}

Establecer valores predeterminados para grupos de campos repetitivos

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.

{% module path='../modules/slideshow.module', slides=[ { "caption":"Cute dog looking up", "image_url":"http://example.com/image.jpg", }, { "caption":"Cuter cat not looking amused", "image_url":"http://example.com/image2.jpg", } ] %}

Establecer valores predeterminados en campos de estilo

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.

{% dnd_module path="./path/to/module", styles={ "background_color":{ "color":"#123", "opacity":50 } } %}

Sintaxis de bloque

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.

{% module_block module "my_rich_text_module" path="/My Rich Text Field Module", label="My Rich Text Field Module" %} {% module_attribute "rich_text_field_variable" %} <div>My HTML block</div> {% end_module_attribute %} {% end_module_block %}

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). 

{# widget_block is deprecated, use module_block instead. This example is only to explain what type_of_module was used for, for those with legacy code. #} {% widget_block rich_text "my_rich_text_module" overrideable=True, label='My rich-text module' %} {% widget_attribute "html" %} <h2>New Module</h2> <p>Add content here.</p> {% end_widget_attribute %} {% end_widget_block %}<span id="hs_cos_wrapper_my_rich_text_module" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"> <h2>New Module</h2> <p>Add content here.</p> </span>

content_attribute

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.

{% content_attribute "email_body" %} <p>Hi {{ contact.firstname }},</p> <p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p> <p>Use a list to:</p> <ul> <li>Explain the value of your offer</li> <li>Remind the reader what they’ll get out of taking action</li> <li>Show off your skill with bullet points</li> <li>Make your content easy to scan</li> </ul> <p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p> <p>Now wrap it all up with a pithy little reminder of how much you love them.</p> <p>Aw. You silver-tongued devil, you.</p> <p>Sincerely,</p> <p>Your name</p> {% end_content_attribute %}

Parámetros disponibles para todos los módulos

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.

ParameterTypeDescription 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 True, el marcado de agrupación se elimina del contenido de un módulo.

En las páginas, los módulos siempre están envueltos 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 envoltura, 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
Cadena

Agrega clases a la envoltura 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
Booleano

Cuando se establece en True, en lugar de renderizar el HTML, los parámetros de este widget estarán disponibles en el contexto de la plantilla. Aprende cómo utilizar este parámetro y la etiqueta widget_data.

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 True, se imprimirá una versión diferente del módulo dentro de cada iteración del bucle. Agrega el nombre del módulo con el loop.index.

False

Para ver una lista completa de todos los tipos de módulos y sus parámetros, haz clic aquí.

Parámetros basados en campos

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
{
  "color" : "#ffffff",
  "opacity" : 100
}
color
formato hexadecimal de 6 caracteres
opacidad
entero 0 a 100
CTA Cadena, ID de CTA
"fb9c0055-6beb-489d-8dda-3e1222458750"
 
Fecha Timestamp
1566360000000
 
Datetime Timestamp
1566360000000
 
Correo electrónico Matriz (cadenas de direcciones de correo electrónico)
["develop@hubspot.com", "design@hubspot.com"]
 
Archivo Cadena (URL de archivo)
"https://cdn2.hubspot.net/hubfs/file.pdf"
 
Correo electrónico de seguimiento Entero (ID de correo electrónico de seguimiento)
1234567890
 
Font Objeto
{
  "size" : 12,
  "size_unit" : "px",
  "color" : "#000",
  "styles" :{
    "text-decoration" : "underline"
  },
  "font" : "Alegreya",
  "fallback" : "serif",
  "variant" : "regular",
  "font_set" : "GOOGLE"
}
tamaño
tamaño de letra sin tipo de unidad
size_unit
cadena de unidad de tamaño de letra
  • "px"
  • "pt"
  • "em"
  • "rem"
  • "%"
  • "ex"
  • "ch"
color
cadena de código de color hexadecimal
estilos
propiedades compatibles
"font-weight"
"normal" / "bold"
"font-style"
"normal" / "italic"
"font-style"
"none" / "underline"
Formulario Objeto
{
  "form_id" : "9aa2e5f3-a46d-4774-897e-0bc37478521c",
  "response_type" : "redirect",
  "redirect_url" : "http://www.hubspot.com",
  "redirect_id" : null,
  "form_type" : "HUBSPOT"
}
form_id
El ID del formulario. Cómo obtener el ID de un formulario.
response_type
"redirect" / "inline"
message
Mensaje mostrado si se utiliza response_type "inline". Cadena que admite html.
redirect_url
Cadena, URL absoluta a una página web
redirect_id
Id. de la página/publicación a la que se debe redireccionar
form_type
"HUBSPOT" / "TICKET_FORM"
Tabla de HubDB Entero (tabla de HubDB) 123456789  
Ícono Objeto
{ 
  "name" : "align-center",
  "unicode" : "f037",
  "type" : "SÓLIDO"
}
name
El nombre del ícono
unicode
El símbolo unicode de la fuente de la que procede el ícono
type
Estilo de símbolo. "SOLID" / "REGULAR"
Se recomienda establecer un campo de ícono y ver los valores de esa manera para establecer los parámetros correctamente.
Imagen Objeto
{
  "src" : "https://cdn2.hubspot.net/hubfs/image.jpeg",
  "alt" : "an_image",
  "width" : 100,
  "height" : 100
}
src
URL de la imagen
alt
Texto alternativo de la imagen, utilizado por los lectores de pantalla y los motores de búsqueda
width
La anchura a la que debe mostrarse la imagen
height
La altura a la que se debe mostrar la imagen
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ú
[ 
  { 
    "isPublished" : true,
    "pageLinkId" : 123456789,
    "pageLinkName" : "My page",
    "isDeleted" : false,
    "categoryId" : 1,
    "subCategory" : "site_page",
    "contentType" : "site_page",
    "state" : "PUBLISHED_OR_SCHEDULED",
    "linkLabel" : "This is a page",
    "linkUrl" : null,
    "linkParams" : null,
    "linkTarget" : null,
    "type" : "PAGE_LINK",
    "children" : [ ]
  } 
]
isPublished
¿true/false se publica la página del elemento de menú?
pageLinkId
ID de página en el CMS
pageLinkName
El nombre real de la página en el CMS
isDeleted
true/false
categoryId
  • 1 - Página del sitio
  • 3 - Artículo de blog
subCategory
  • site_page
  • landing_page
  • blog
  • normal_blog_post
contentType
  • site_page
  • landing_page
  • blog
estado
  • DRAFT
  • DRAFT_AB
  • PUBLISHED
  • PUBLISHED_OR_SCHEDULED
  • PUBLISHED_AB
  • SCHEDULED
linkLabel
texto que el usuario lee y en el que hace clic
linkUrl
URL real a la que se envía al usuario al hacer clic
linkParams
enlaces # o parámetros de consulta ?
linkTarget
si se abre en una nueva pestaña, "_blank"; en caso contrario, "null"
type
  • "PAGE_LINK"
  • "PAGE_LINK_WITH_PARAMS"
  • "NO_LINK"
elemento secundario
matriz de objetos de elementos de menú, idénticos a los elementos de menú individuales.
Etiqueta Entero (se recomienda ID de etiqueta o slug, ID) 1234567890  
Texto Cadena "it's like any other string"  
URL Objeto
{ 
  "type" : "CONTENT",
  "href" : null,
  "content_id" : 123456789
}
type
  • "EXTERNAL" para las URL que no son de HubSpot
  • "CONTENT" para páginas, artículos de blog y páginas de destino
  • "FILE" para los archivos cargados en el administrador de archivos
  • "EMAIL_ADDRESS" para las direcciones de correo electrónico
  • "BLOG" para páginas de contenido de blog
href
Cadena, la URL con la cual te enlazas.

¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.