Uso de módulos en plantillas

Last updated:

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.

Sintaxis de módulo básico

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.
La ruta de acceso a los módulos predeterminados de HubSpot debe empezar siempre con @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. 
{% 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="/Marketplace/HubSpotSiteSetup/Vast_Site_Setup/Custom_Modules/Vast FAQ Module", label="Vast FAQ Module" %}

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.

{% module "simple_section_title" path="@hubspot/text", label='Enter text for this section title', value='This is a section title' %}<span id="hs_cos_wrapper_simple_section_title" class="highlight hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text" > This is a section title </span>

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

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.

{% 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 %}

Establecimiento de valores predeterminados a nivel de plantilla en campos repetidos

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 } ] %}

Establecimiento de valores predeterminados a nivel de plantilla en grupos de campos repetidos.

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", } ] %}

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

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.

Cómo se traducen los tipos de campos del módulo en parámetros
ParameterTypeDescription 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í.

Parámetros basados en campos

You can set the value of custom module fields using parameters.

{% module "faq" path="faq", label="Accessible FAQ Module", faq_group_title="Commonly Asked Questions" %}

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.

Establecimiento de valores predeterminados a nivel de plantilla en campos de estilo

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.

{% dnd_module path="./to/module", styles={ "background_color":{ "color":"#123", "opacity":50 } } %}
Cómo se traducen los tipos de campos del módulo en parámetros
Campo Tipo Ejemplo Claves
Blog id de blog 1234567890  
Booleano true/false false  
Choice cadena de valores "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 marca de tiempo
1566360000000
 
Datetime marca de tiempo
1566360000000
 
Correo electrónico matriz de cadenas de direcciones de correo electrónico
["develop@hubspot.com", "design@hubspot.com"]
 
Archivo Cadena de URL al archivo
"https://cdn2.hubspot.net/hubfs/file.pdf"
 
Correo electrónico de seguimiento ID de correo electrónico de seguimiento
1234567890
 
Font Objeto con claves y valores de fuente
{
  "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 con claves y valores de formulario
{
  "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 ID de tabla de HubDB 123456789  
Ícono objeto con claves y valores de ícono
{ 
  "name" : "align-center",
  "unicode" : "f037",
  "type" : "SOLID"
}
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 con claves y valores de imagen
{
  "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 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ú
[ 
  { 
    "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 ID/slug de etiqueta (se recomienda el ID) 1234567890  
Texto string "it's like any other string"  
URL objeto con claves y valores URL
{ 
  "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.