export_to_template_context

Last updated:

export_to_template_context es un parámetro que hace que los parámetros de una etiqueta HubL estén disponibles para el entorno de la plantilla sin tener que renderizar la etiqueta HubL. Este parámetro se puede utilizar con todas las etiquetas HubL. El diccionario widget_data se utiliza para recuperar estos parámetros, almacenarlos en variables, y/o incorporarlos a la lógica de tu plantilla.

Al hacer que los parámetros de una etiqueta HubL estén disponibles en el contexto de la plantilla, sin renderizar realmente la etiqueta HubL, puedes permitir que los usuarios tomen decisiones en el editor de contenido que afecten a cómo se renderiza la plantilla. Por ejemplo, digamos que quieres renderizar un determinado bloque de código solo cuando el usuario da un valor a un campo. Esto es posible con este parámetro.

Primero, debes agregar export_to_template_context=True a la etiqueta HubL. Luego, debes utilizar un widget_data.module.parameter_you_want_to_retreive.

{% module "job_title" path="@hubspot/text", label="Enter a Job Title", value="Chief Morale Officer", export_to_template_context=True %} {# Makes the parameters available to be stored and used in template logic #} {{ widget_data.job_title.body.value }} {# Prints the value of the HubL tag but can also be used in template logic #}

A continuación, se presentan algunas aplicaciones de este concepto.

Uso en módulos personalizados

export_to_template_context=True se está admite en los módulos personalizados, ya que no tiene ningún propósito real para ellos. No es necesario utilizar export_to_template_context para obtener el valor de un módulo dentro de una plantilla, ya puedes acceder a él. Si necesitas ocultar visualmente la salida del módulo, puedes construir el módulo para que no muestre nada, o incluir un campo booleano que active o desactive si el módulo muestra algo.

Imágenes de fondo seleccionables por el usuario

En este ejemplo, se crea una etiqueta HubL imagen pero se exporta al contexto de la plantilla en lugar de renderizarse. El parámetro src se recupera con la etiqueta widget_data y se representa como la fuente de una imagen de fondo en una etiqueta de estilo.
{% module "background_image" path="@hubspot/image" label='Select a background image', src='http://cdn2.hubspot.net/hub/428357/file-2117441560-jpg/img/dev-bg-compressed.jpg', export_to_template_context=True %} <!--Sample markup --> <div class="bg-image-section" style="background:url('{{ widget_data.background_image.src }}'); background-size:cover; min-height: 500px;"> <h1>Supercharge your app with HubSpot</h1> <h3>Build powerful integrations for a global community of users</h3> </div>

Aunque esto es posible hacerlo en plantillas codificadas, generalmente es mejor construir un módulo personalizado para darles a los usuarios la mejor experiencia en el editor de páginas. Este tipo de etiquetas de HubL aparecen como campos individuales, mientras que puedes tener varios campos relacionados. Al utilizar un módulo personalizado, todos sus campos se muestran agrupados en el editor de páginas.

Campo de elección para renderizar el marcado predefinido

El siguiente ejemplo utiliza el parámetro export_to_template_context junto con un módulo de elección para cambiar un mensaje de banner en una página de carreras. El usuario selecciona un departamento a través de la interfaz de usuario y el título cambia sin que el usuario tenga que editar el contenido.

{% module "department" path="@hubspot/choice", label="Choose department", value="Marketing", choices="Marketing, Sales, Dev, Services" export_to_template_context=True %} {% if widget_data.department.value == "Marketing" %} <h3>Want to join our amazing Marketing team?!</h3> <h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4> {% elif widget_data.department.value == "Sales" %} <h3>Are you a Sales superstar?</h3> <h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4> {% elif widget_data.department.value == "Dev" %} <h3>Do you love to ship code?</h3> <h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4> {% else %} <h3>Want to work with our awesome customers?</h3> <h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4> {% endif %}

Esta misma funcionalidad se puede reproducir utilizando un campo de elección dentro de un módulo personalizado. La interfaz de usuario del módulo personalizado hace que las opciones de elección con un valor y una etiqueta sean bastante fáciles.

Recuperación de parámetros de módulos ya renderizados en la plantilla

Si se deseas recuperar un parámetro de un módulo o etiqueta que ya se está renderizando en una página, puedes acceder al módulo dentro de un diccionario llamado widgets. El parámetro export_to_template_context no es necesario. La sintaxis es la siguiente:

// HubL {{ content.widgets.name_of_module.body.parameter }} {{ content.widgets.my_text.body.value }}
Nota: el método anterior no admite la recuperación de valores de campos en módulos globales, ya que content.widgets no accederá a los módulos globales.

Debido a que los diferentes campos almacenan datos en diferentes formatos, a menudo es útil hacer uso de developer Info para ver cómo se accede a los datos específicos que se quieren mostrar.

Impresión de información del módulo HubL en el listado del blog

Aunque las plantillas de blog se utilizan generalmente para los blogs, también se pueden reutilizar para crear otros tipos de listados. Para ello, puedes utilizar las técnicas descritas anteriormente.

Por ejemplo, es posible que desees crear un diseño de listado de la prensa que ha recibido su empresa, pero en lugar de enlazar a los posts, quieres que el listado enlace a otra página.

Puedes ver este concepto en acción en academy.hubspot.com/projects. La página de listado de proyectos es una plantilla de listado de blog, pero cada post enlaza con una página regular de HubSpot. El creador de contenidos especifica el enlace de destino en el editor.

Dentro del encabezado del código del post de blog individual, se definiría un campo de texto. Si no quieres que el texto se renderice en el post, debes usar export_to_template_context.

{% module "custom_blog_link" path="@hubspot/text", label="Link to external press item", export_to_template_context=True %}

Este campo de texto es editable en cada post del blog. A continuación, tendríamos que definir un enlace en nuestro listado. Pero como el widget_data solo existe en el contexto del post, tenemos que utilizar una sintaxis diferente para obtener los datos del widget y rellenar el enlace. En este caso, utilizaríamos content.widgets.custom_blog_link.body.value. Aunque los widget_data no están disponibles para el listado del blog, el valor de ese campo sigue almacenado en el contexto de los widgets del contenido individual.

A continuación se muestra un bucle básico de listado de blogs que muestra este enlace personalizado con cada post. Si utilizas esta técnica, deberás asegurarte de agregar el subdirectorio creado automáticamente para cada post del blog a tu archivo robots.txt para evitar que esos posts vacíos sean rastreados por Google y otros rastreadores.

{% for content in contents %} <a href="{{ content.widgets.custom_blog_link.body.value }}"> Click here to see this press feature! </a> {% endfor %}

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