Descripción de los campos de los módulos y temas

Last updated:

Dentro de los módulos y temas, los campos se utilizan para permitir a los creadores de contenido controlar el estilo y la funcionalidad del módulo y el tema en tu sitio web. Al desarrollar un módulo o un tema, incluirás campos en un archivo fields.json, que luego se traducirá al tema y a los editores de contenido.

theme-settings-fields

A continuación, obtén más información sobre cómo crear y administrar opciones para los campos de módulos y temas. Para obtener más información sobre tipos de campos específicos, echa un vistazo a la guía de referencia de los tipos de módulos y campos. 

Creación y administración de negocios

Puedes agregar campos al archivo fields.json de un módulo localmente a través de la CLI de HubSpot y en el editor de módulos de la aplicación. Para agregar campos a un tema, debes actualizar el archivo fields.json del tema localmente utilizando la CLI. 

CLI de HubSpot

Cuando se construye localmente los campos de los módulos y temas pueden ser editados a través de un archivo fields.json dentro de la carpeta del módulo o tema. Para los módulos, este archivo se creará automáticamente cuando se utilice el comando hs create module. Todas las opciones de campo disponibles en el editor de módulos están disponibles como propiedades que puedes agregar o editar en el archivo fields.json. Esto incluye campos de repetición, grupos y condiciones. Una de las ventajas de editar localmente es que facilita la inclusión de tus módulos en sistemas de control de versiones como git.

Editor de módulos

El administrador de diseño tiene una interfaz de usuario de editor de módulos integrada que te permite crear, agrupar y editar campos de módulos. El editor de módulos contiene una vista preliminar del módulo que te permite ver el aspecto del módulo por sí mismo, así como probar sus campos. Dado que los módulos no viven en el vacío, siempre debes probarlos en una plantilla que planees utilizar, para ver qué estilos a nivel de plantilla pueden afectarlo. Ten en cuenta que si un módulo está contenido en una carpeta bloqueada no puede ser editado de esta manera.

Editor de módulos del administrador de diseño

Nota: si estás trabajando principalmente de forma local pero quieres utilizar el editor de módulos para configurar los campos, asegúrate de recuperar los cambios. Esto es especialmente importante para quienes utilizan sistemas de control de versiones como git.

Campos contiguos

Por opción predeterminada, los campos de los módulos en los editores de contenido se apilan verticalmente. Sin embargo, puedes colocar los campos del módulo uno al lado del otro agregando una propiedad display_width a los campos en el archivo fields.json con un valor de half_width. 

side-by-side-modules0

Un solo campo con un display_width de half_width aparecerá como half-width en el editor de contenido. Cuando el campo por encima o por debajo de ese campo en el archivo fields.json se establece en half_width, se colocarán uno al lado del otro.

// Example module fields.json file [ { "name": "number_field", "label": "Number", "required": false, "locked": false, "display": "slider", "min": 1, "max": 10, "step": 1, "type": "number", "prefix": "", "suffix": "", "default": null, "display_width":"half_width" }, { "label": "Description", "name": "description", "type": "text", "required": true, "default": "Add a description", "display_width": "half_width" } ]

Grupo de campos

Cuando los campos están relacionados entre sí a menudo tiene sentido que se muestren visualmente agrupados. Los módulos y los temas permiten agrupar varios campos. 

Grupo de campos sin grupos de campos anidados

Los grupos de campos sin grupos de campos anidados se muestran simplemente con divisores por encima y por debajo del grupo, y la etiqueta del grupo se muestra en la parte superior del grupo.

Grupo de campos anidados

Los grupos de campos pueden ser anidados. Un grupo de campos que contenga otro grupo de campos se mostrará como un botón. Al hacer clic en el botón para ver el grupo, se mostrará el contenido de ese grupo.

Los grupos de campos pueden estar anidados a 3 niveles de profundidad, lo que significa que los campos del módulo pueden tener 4 niveles de profundidad. Facilitando la creación de interfaces de usuario que transmitan las relaciones entre los campos y una mayor profundidad granular.

Grupos de campos en fields.json

Los objetos de grupo de campos pueden ser listados como subordinados de otros grupos de campos, su estructura es muy similar a la de los propios campos con el único parámetro especial de "hijos", que es una matriz de campos y grupos que contienen.

// Field group example { "type": "group", "name": "typography", "label": "Typography", "expanded": true, "children": [ { "type": "font", "name": "h1_font", "label": "Heading 1", "load_external_fonts": true, "default": { "color": "#000", "font": "Merriweather", "font_set": "GOOGLE", "variant": "700", "size": "48" } } ] } // Field group inside of a field group { "type": "group", "name": "header", "label": "Header", "children": [ { "type": "font", "name": "h1_font", "label": "Heading 1", "load_external_fonts": true, "default": { "color": "#000", "font": "Merriweather", "font_set": "GOOGLE", "variant": "700", "size": "48" } { "type": "group", "name": "navigation", "label": "Navigation", "expanded": false, "children": [ { "name" : "bg_color", "label" : "Background color", "sortable" : false, "required" : false, "locked" : false, "type" : "color", "default" : { "color" : "#ff0000", "opacity" : 100 } } ] } } ] }

Grupo de campos ampliado de manera predeterminada

Los grupos de campos pueden configurarse para que se expandan por opción predeterminada estableciendo la propiedad booleana expanded en true en las propiedades de grupo de fields.json como se muestra en el código de ejemplo anterior. Los grupos de campos no se expanden por opción predeterminada y cuando se utilizan grupos de campos anidados, el grupo de origen (parent) no puede hacer uso de esta propiedad.

Salida de los valores de los campos dentro de los grupos de campos

Los grupos de campos crean diccionarios que contienen los valores de los campos que deseas imprimir. Si se anidan grupos de campos, el grupo de campos anidado es un diccionario dentro del diccionario del grupo de campos externo. Para acceder a esos datos, atravesarás el árbol desde el tema raíz o la variable del módulo, dependiendo de tu contexto.

<div> {# printing a value from a field group `recipe_summary` is the field group, `title` is the text field. #} {{module.recipe_summary.title}} </div>/* Printing a Font field's color value, when the font field is within a field group. `typography` is the field group, `h1_font` is the field */ h1{ color: {{ theme.typography.h1_font.color }}; }

Campos de estilo

Los campos de estilo son un tipo de grupo de campo especial en el archivo fields.json de un módulo o tema que da a los creadores de contenido el control sobre el estilo de un módulo o tema en el editor de páginas y temas. A continuación, aprende a agregar campos de estilo a un módulo o tema. Más información sobre las mejores prácticas para utilizar y organizar los campos de estilo.

Campos de estilo del módulo

Los campos de estilo agregados a un módulo aparecerán en la pestaña Estilos del editor de páginas al editar el módulo:

style-field-module-editor0

Cuando se agregan campos de estilo al archivo fields.json de un módulo, se agregan dentro de un grupo de estilos. Ese grupo, sin embargo, puede contener varios grupos dentro de él, como se muestra a continuación:

// Module style fields [ { "type": "group", "name": "styles", "tab": "STYLE", "children": [{ "name": "img_spacing", "label": "Spacing around image", "required": false, "type": "spacing", "default": { "padding": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" }, "left": { "value": 10, "units": "px" }, "right": { "value": 10, "units": "px" } }, "margin": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" } } } }] } ]

Los siguientes campos pueden utilizarse como campos de estilo en los módulos. Conoce cada uno de los tipos de campo en la guía de módulos y tipos de campo.

Más información sobre los tipos de campo de módulos y temas.

Ve la plantilla de CMS para un ejemplo de campos de estilo dentro del archivo fields.json de un módulo.

Campos de estilo del tema

Los campos de estilo agregados a un tema aparecerán en la barra lateral izquierda del editor de temas:

style-field-theme-editor0

Todos los campos de estilo dentro del archivo fields.json de un tema se agregarán a la barra lateral izquierda del editor de temas, en lugar de tener que ponerlos bajo un grupo de estilos, como se muestra a continuación:

// Theme style fields [ { "label": "Global colors", "name": "global_colors", "type": "group", "children": [ { "label": "Primary", "name": "primary", "type": "color", "visibility": { "hidden_subfields": { "opacity": true } }, "default": { "color": "#494A52" } }, { "label": "Secondary", "name": "secondary", "type": "color", "visibility": { "hidden_subfields": { "opacity": true } }, "default": { "color": "#F8FAFC" } } ] }, { "label": "Global fonts", "name": "global_fonts", "type": "group", "children": [ { "label": "Primary", "name": "primary", "type": "font", "visibility": { "hidden_subfields": { "size": true, "styles": true } }, "inherited_value": { "property_value_paths": { "color": "theme.global_colors.primary.color" } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE" } }, { "label": "Secondary", "name": "secondary", "type": "font", "visibility": { "hidden_subfields": { "size": true, "styles": true } }, "inherited_value": { "property_value_paths": { "color": "theme.global_colors.primary.color" } }, "default": { "fallback": "serif", "font": "Merriweather", "font_set": "GOOGLE" } } ] }, { "name": "branding_color", "label": "branding_color", "type": "color", "default": { "color": "#3b7bc0", "opacity": 60 }, "inherited_value": { "property_value_paths": { "color": "brand_settings.primaryColor" } } }, { "name": "secondary_branding_color", "label": "Secondary Branding color", "type": "color", "default": { "color": "#ff6b6b", "opacity": 60 }, "inherited_value": { "property_value_paths": { "color": "brand_settings.colors[2]" } } } ] } ]

Los siguientes campos pueden utilizarse como campos de estilo en los módulos. Conoce cada uno de los tipos de campo en la guía de módulos y tipos de campo.

Más información sobre los tipos de campo de módulos y temas.

Ve la plantilla del CMS para un ejemplo de campos de estilo dentro del archivo fields.json de un tema. 

Nota: si es un proveedor del mercado, no debe sustituir los campos de contenido existentes por campos de estilo en los módulos existentes. Cambiar la jerarquía de los campos en un archivo fields.json puede hacer que las instancias de los módulos existentes pierdan sus datos. En su lugar, debes agregar nuevos campos de estilo, o crear un nuevo listado que tenga los campos debidamente agrupados. Esto evitará que sus actualizaciones sean cambios de ruptura para los clientes que confían en sus temas. Para abogar por las vías de migración de los módulos antiguos, consulta el foro HubSpot Ideas.

CSS generado

Algunos campos de estilo ofrecen una forma de imprimir css directamente en función del valor del campo. Esto es especialmente útil con los campos que pueden controlar un estilo más complicado como los gradientes. Los siguientes campos de estilo tienen una propiedad .css generada:

{% require_css %} <style> {% scope_css %} .team-member { {% if module.style.gradient.css %} background: {{ module.style.gradient.css }}; {% endif %} {{ module.style.bg_img.css }} {{ module.style.spacing.css }} {{ module.style.border.css }} } {% end_scope_css %} </style> {% end_require_css %}

Repetidores

Al crear módulos que formatean información, a menudo hay tipos de información que se repiten. Un módulo de recetas, por ejemplo, puede tener un campo de "Ingrediente". Bueno, la mayoría de las recetas tienen más de un ingrediente. Podrías darles un campo de texto enriquecido, pero entonces pierdes tu capacidad de forzar un estilo consistente y agregar funcionalidad alrededor de cada ingrediente. Ahí es donde entran los repetidores, HubSpot tiene dos formas de repetidores: Campos de repetición y Grupos de repetición.

Campos repetidos

Los campos que se repiten son campos normales, pero los creadores de contenido pueden agregar, eliminar y reordenar las instancias del campo. Usando el ejemplo del módulo de receta anterior, cada ingrediente podría ser un campo de texto de repetición. 

campo de repetición

Esto hace que el creador de contenido pueda agregar tantos ingredientes como desee. Desde el punto de vista del desarrollador, obtenemos una matriz que puedes recorrer para imprimir esa lista de ingredientes, aplicando el formato y la funcionalidad que desees. 

Los campos de repetición se utilizan mejor en situaciones muy sencillas. A menudo, los grupos de repetición tienen más sentido.

Nota: actualmente no es posible establecer el orden predeterminado de los campos de repetición.

Campos repetidos en fields.json

// Repeating field example { "name" : "ingredient", "label" : "Ingredient", "required" : false, "locked" : false, "occurrence" : { "min" : 1, "max" : null, "sorting_label_field" : null, "default" : 1 }, "allow_new_line" : false, "show_emoji_picker" : true, "type" : "text", "default" : [ "1 cup water" ] }

Recorrer los elementos del módulo HTML+HubL

<!--Looping through a repeating field--> <ul> {% for item in module.ingredient %} <li>{{ item }}</li> {% endfor %} </ul>

Grupos de repetición

Los grupos de repetición son grupos de campos con la opción de repetición activada. Los grupos de repetición permiten a los creadores de contenido agregar, eliminar y reordenar grupos de campos. Utilizando el ejemplo del módulo de recetas, digamos que quieres integrar tu lista de ingredientes con una funcionalidad de lista de compra.

Grupo de campos que se repiten

La cantidad de un ingrediente sería fundamental para la lista de compras. Mientras que alguien podría proporcionar eso en el campo de texto, el módulo tendría que analizar el campo de texto y esperar que estemos separando con éxito la cantidad del ingrediente. Aquí es donde los grupos de repetición resultan útiles. La salida de estos campos es un objeto que se puede recorrer en bucle.

Grupos repetidos en fields.json

// Repeating field group example { "id" : "ingredients", "name" : "ingredients", "label" : "Ingredients", "required" : false, "locked" : false, "occurrence" : { "min" : 1, "max" : null, "sorting_label_field" : "ingredients.ingredient", "default" : null }, "children" : [ { "id" : "ingredients.ingredient", "name" : "ingredient", "label" : "Ingredient", "required" : false, "locked" : false, "validation_regex" : "", "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "Water" }, { "id" : "ingredients.quantity", "name" : "quantity", "label" : "Quantity", "required" : false, "locked" : false, "display" : "text", "min" : 0, "step" : 1, "type" : "number", "default" : 1 }, { "id" : "ingredients.measurement", "name" : "measurement", "label" : "Measurement", "help_text" : "Unit of measurement (cups, tbsp, etc.)", "required" : false, "locked" : false, "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "cups" } ], "type" : "group", "default" : [ { "ingredient" : "Water", "quantity" : 1, "measurement" : "cups" } ] }

Recorrer los campos repetidos en los módulos

<h2>Ingredients</h2> <ul> {% for ingredient in module.ingredients %} <li> <button data-quantity="{{ ingredient.quantity }}" data-unit="{{ ingredient.measurement }}" data-ingredient="{{ ingredient.ingredient }}"> Add to cart </button> {{ ingredient.quantity }} {{ ingredient.measurement }} {{ ingredient.ingredient }} </li> {% endfor %} </ul>

Opciones del repetidor

Para mejorar la experiencia de edición y evitar que los editores de contenido proporcionen valores a los que no se ha dado cabida mediante programación, le permitimos establecer valores mínimos y máximos para el número de elementos que los creadores de contenido pueden agregar a un campo repetido o a un grupo repetido. 

En el caso de los grupos de repetición, también se puede establecer qué campo actúa como etiqueta para ese elemento cuando se ve el repetidor.

Número máximo de ocurrencias
"occurrence" : { "min" : 1, "max" : 4, "sorting_label_field" : "ingredients.ingredient", }
Opciones del repetidor
ParameterTypeDescription Default
max
Entero

Número máximo de apariciones de este grupo. Evita que el creador de contenido agregue más de este número de elementos en la interfaz gráfica.

 null
min
Entero

Número mínimo de apariciones de este grupo de campos. Evita que los usuarios tengan menos de este número de elementos en la UI.

 null
sorting_label_field
String

Este es el id del campo, del que se extrae el texto para mostrarlo en la UI en las tarjetas arrastrables. El valor predeterminado es el primer campo del grupo.

Campos heredados

La propiedad inherited_value se puede configurar para que un campo herede su valor predeterminado de otros campos. Para establecer todo el valor predeterminado de un campo a partir del valor de otro campo, establece en default_value_path la ruta del nombre del campo de destino. Cuando se establece default_value_path , se ignorará cualquier default establecido en el campo.

Para acceder a los valores de otros campos, las rutas deben incluir module. al principio, como si se accediera al valor en el código HubL del módulo.

// Inherited fields { "name": "body_font", "type": "font", "default": { "font": "Helvetica", "color": "#C27BA0" } }, { "name": "h1_font", "type": "font", "default": {}, "inherited_value": { "default_value_path": "module.body_font" } }

En el caso de los campos complejos (campos cuyos valores son objetos), los usuarios pueden tener una mayor granularidad sobre las propiedades que se heredan a través de property_value_path. Cualquier ruta referida en inherited_value también puede incluir claves del valor de un campo para los campos complejos; por ejemplo, los campos de color tienen valores de objeto que contienen el color mismo así como la opacidad. Así que para obtener el valor de color real de un color sin la opacidad, la ruta terminaría en .color. Por ejemplo, un campo de fuente puede heredar solo su color de otro campo de color:

// Inherited fields with objects { "name": "secondary_color", "type": "color", "default": { "color": "#C27BA0", "opacity": 100 } }, { "name": "h1_font", "type": "font", "default": { "font": "Helvetica", "size": 12, "size_unit": "px" }, "inherited_value": { "property_value_paths": { "color": "module.secondary_color.color" } } }

También puedes combinar los efectos de default_value_path y property_value_paths para heredar un valor predeterminado de un campo mientras se hereda un valor de propiedad específico de un campo diferente:

// combining the effects of default_value_path and property_value_paths { "name": "body_font", "type": "font", "default": { "font": "Helvetica", "color": "#000000" } }, { "name": "secondary_color", "type": "color", "default": { "color": "#C27BA0", "opacity": 100 } }, { "name": "h1_font", "type": "font", "default": {}, "inherited_value": { "default_value_path": "module.body_font", "property_value_paths": { "color": "module.secondary_color.color" } } }

Si un campo hereda de otro campo, pero luego se anula directamente en el nivel de la página o en la configuración del tema, su conexión con el campo de control se interrumpe. Cualquier otro campo que se adjunte a través de default_value_path o property_value_paths ya no afectará al valor del campo.

Visibilidad de campo

Al definir los campos de módulo y tema personalizados, puedes configurar cuándo aparece un campo agregando el objeto de visibility al campo en el archivo fields.json. Por ejemplo, puedes establecer un módulo de formulario para mostrar un área de texto enriquecido cuando se selecciona el mensaje de agradecimiento, pero un selector de página cuando se selecciona una redirección.

Puedes establecer la visibilidad según el valor de un controlling_field_path o según una propiedad específica dentro de ese campo usando el parámetro property.

También puedes aplicar visibilidad a un campo individual o a un grupo de campos para controlar la visibilidad de todos los elementos del grupo.

"visibility" : { "controlling_field_path" : "field_name", "controlling_value_regex" : "regular_expression_in_controlling_field", "property": "src", "operator" : "EQUAL" }
Use this table to describe parameters / fields
ParameterTypeDescription
controlling_field_path
String

La ruta con puntos del campo que controla la condición de presentación.

  • Si el campo no está anidado dentro de un grupo de campos, usa el nombre del campo (es decir, field_name).
  • Para los campos anidados en grupos, la ruta debe coincidir con su estructura de agrupación, separados por un punto. Por ejemplo:
    • field_group_name.field_name
    • parent_group.child_group.field_name
controlling_value_regex
String

La expresión regular en el campo de control que debe estar presente para que el campo se muestre. El regex debe coincidir con toda la cadena (no con un subconjunto) y se ejecuta con sensibilidad a mayúsculas y minúsculas. 

operator
String

El operador que define cómo debe cumplirse el valor controlling_value_regex Los operadores pueden ser uno de los siguientes: 

  • NOT_EQUAL
  • EQUAL
  • EMPTY
  • NOT_EMPTY
  • MATCHES_REGEX
property
String

Establece la visibilidad en función de una propiedad específica del campo de destino. Por ejemplo, puedes habilitar la visibilidad cuando la propiedad src de un campo de imagen es igual a un valor específico. Por opción predeterminada, si no se proporciona ningún valor para este campo, la visibilidad se basa en el valor stringified de controlling_value_regex.

El atributo de visibilidad solo puede admitir un criterio a la vez. Para incluir múltiples criterios con múltiples operadores, así como el orden de las operaciones, puedes usar advanced_visibility.

"visibility_rules" : "ADVANCED", "advanced_visibility" : { "boolean_operator" : "AND", "criteria" : [{ "controlling_field_path" : "field_name", "controlling_value_regex" : "regular_expression_in_controlling_field", "operator" : "MATCHES_REGEX" }, { "controlling_field_path" : "field_name", "controlling_value_regex" : "regular_expression_in_controlling_field", "operator" : "EQUAL" }] }
Use this table to describe parameters / fields
ParameterTypeDescription
visibility_rules
String

Por opción predeterminada, este valor se establece en SIMPLE. Para usar advanced_visibility, configura ADVANCED.

boolean_operator
String

El operador booleano para los criterios condicionales. Puede ser AND u OR.

criteria
Array

Una matriz de objetos de visibilidad que define los criterios condicionales que deben cumplirse para que se muestre el campo.

controlling_field_path
String

La ruta con puntos del campo que controla la condición de presentación.

  • Si el campo no está anidado dentro de un grupo de campos, usa el nombre del campo (es decir, field_name).
  • Para los campos anidados en grupos, la ruta debe coincidir con su estructura de agrupación, separados por un punto. Por ejemplo:
    • field_group_name.field_name
    • parent_group.child_group.field_name
controlling_value_regex
String

El valor en el campo de control que debe cumplirse para mostrar el campo. Cuando se usa el operador MATCHES_REGEX, el regex debe coincidir con toda la cadena (no con un subconjunto) y se ejecuta con sensibilidad a mayúsculas y minúsculas.

Un campo con un controlling_field_path pero sin controlling_value_regex es visible si el campo de control tiene cualquier valor no nulo, no en blanco.

operator
String

El operador que define cómo debe cumplirse el valor controlling_value_regex Los operadores pueden ser uno de los siguientes: 

  • NOT_EQUAL
  • EQUAL
  • EMPTY
  • NOT_EMPTY
  • MATCHES_REGEX

La sintaxis regex es necesaria cuando se usa MATCHES_REGEX.

Por ejemplo, a continuación se muestra la primera parte del código del módulo de pagos predeterminado. Para revisar el código completo, puedes clonar el módulo en HubSpot y luego descargarlo en tu entorno local para ver el archivo fields.json del módulo.

[ { "id" : "payment", "name" : "payment", "display_width" : null, "label" : "Payment", "required" : true, "locked" : false, "type" : "payment", "default" : { "id" : null, "properties" : { } } }, { "id" : "checkout_location", "name" : "checkout_location", "display_width" : null, "label" : "Checkout behavior", "required" : false, "locked" : false, "visibility" : { "controlling_field_path" : "payment", "controlling_value_regex" : "id\":\\d+", "operator" : "MATCHES_REGEX" }, "display" : "radio", "choices" : [ [ "new_tab", "Open in a new tab" ], [ "overlay", "Sliding overlay" ] ], "type" : "choice", "default" : "new_tab" }, { "id" : "button_text", "name" : "button_text", "display_width" : null, "label" : "Button text", "required" : true, "locked" : false, "validation_regex" : "", "visibility" : { "controlling_field_path" : "payment", "controlling_value_regex" : "id\":\\d+", "operator" : "MATCHES_REGEX" }, "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "Checkout" }, { "id" : "icon", "name" : "icon", "display_width" : null, "label" : "Icon", "required" : false, "locked" : false, "visibility_rules" : "ADVANCED", "advanced_visibility" : { "boolean_operator" : "AND", "criteria" : [ { "controlling_field_path" : "payment", "controlling_value_regex" : "id\":\\d+", "operator" : "MATCHES_REGEX" }, { "controlling_field_path" : "add_icon", "controlling_value_regex" : "true", "operator" : "EQUAL" } ], "children" : [ ] }, "children" : [ { "id" : "icon.icon", "name" : "icon", "display_width" : null, "label" : "Icon", "required" : true, "locked" : false, "icon_set" : "fontawesome-5.0.10", "type" : "icon", "default" : { "name" : "hubspot", "type" : "SOLID", "unicode" : "f3b2" } }, { "id" : "icon.position", "name" : "position", "display_width" : null, "label" : "Position", "required" : true, "locked" : false, "display" : "select", "choices" : [ [ "left", "Left" ], [ "right", "Right" ] ], "type" : "choice", "default" : "left" } ], "tab" : "CONTENT", "expanded" : false, "type" : "group" }, // rest of fields.json code ]

El código anterior da como resultado el siguiente comportamiento:

  • El primer campo (payment) es un campo obligatorio (menú desplegable) que permite al creador de contenido seleccionar un enlace de pago específico. En HubSpot, un creador de contenido verá lo siguiente cuando agregue el módulo a la página por primera vez:

payment-link-selector

  • Una vez que se selecciona un enlace de pago, aparecerán los tres campos que siguen (checkout_location, button_text e icon). Esto se debe a que los campos tienen un atributo de visibility que está controlado por el campo payment y requiere un valor ID en el parámetro id en el campo de pago.

El campo icon en sí utiliza advanced_visibility para aparecer solo cuando hay un enlace de pago presente en el campo payment Y cuando se selecciona la casilla de comprobación add_icon.

Además de establecer la visibilidad dentro de fields.json, también puedes establecer la visibilidad en el administrador de diseño editando las opciones de Condiciones de visualización de un campo.
display-conditions-property

Después de configurar la visibilidad en el administrador de diseño, puedes buscar el módulo utilizando la CLI para ver el atributo de visibility en el archivo fields.json del módulo.

Inhabilitación de campo condicional

Puedes agregar condiciones a un campo para evitar la edición cuando se cumplan las condiciones especificadas. También puedes establecer un mensaje para mostrar sobre el campo  cuando está inhabilitado para proporcionar contexto en el editor de contenido. 

Captura de pantalla 2023-05-23 a las 16.10.28

Las condiciones y el mensaje se establecen en el objeto disabled_controls del campo. Las condiciones para hacer un campo editable se establecen dentro del objeto rules, que sigue el mismo formato que advanced_visibility.

El siguiente código muestra una implementación simple y avanzada de los criterios de rules:

  • El campo simple_page incluye lógica para inhabilitar el campo si el campo text_field se establece en testing.
  • El campo fancy_page incluye lógica para deshabilitar el campo si text_field o text_field_2 se establece en cualquier valor no igual a testing y testing2 respectivamente.
// example fields.json [ { "type": "text", "name": "text_field", "label": "Text field", }, { "type": "text", "name": "text_field_2", "label": "Text field 2", }, { "type": "page", "label": "Simple Page", "name": "simple_page", "disabled_controls": { "message": "This field is disabled", "rules": { "criteria": [ { "controlling_field_path": "text_field", "operator" :"EQUAL", "controlling_value_regex": "testing" } ] } } }, { "type": "page", "label": "Fancy Page", "name": "fancy_page", "disabled_controls": { "message": "This field is disabled", "rules": { "boolean_operator": "OR", "criteria": [ { "controlling_field_path": "text_field", "operator" :"NOT_EQUAL", "controlling_value_regex": "testing" }, { "controlling_field_path": "text_field_2", "operator" :"NOT_EQUAL", "controlling_value_regex": "testing2" }, ] } } } ]
Use this table to describe parameters / fields
ParameterTypeDescription
message
String

Mensaje que se mostrará en el editor de contenido cuando el campo esté desactivado.

rules
Objetos

Las condiciones para activar el campo para editar.

criteria
Matriz

Una matriz de objetos de condición que define los criterios que deben cumplirse para que se muestre el campo. Esta matriz puede contener múltiples objetos de condición separados por lógica AND u OR a través del parámetro boolean_operator.

boolean_operator
String

El operador booleano para los criterios condicionales. Puede ser AND u OR. Cuando no se especifica, el valor predeterminado es AND.

controlling_field_path
String

La ruta con puntos del campo que controla la condición de presentación.

  • Si el campo no está anidado dentro de un grupo de campos, usa el nombre del campo (es decir, field_name).
  • Para los campos anidados en grupos, la ruta debe coincidir con su estructura de agrupación, separados por un punto. Por ejemplo:
    • field_group_name.field_name
    • parent_group.child_group.field_name
controlling_value_regex
String

El valor en el campo de control que debe cumplirse para mostrar el campo. Cuando se usa el operador MATCHES_REGEX, el regex debe coincidir con toda la cadena (no con un subconjunto) y se ejecuta con sensibilidad a mayúsculas y minúsculas.

Un campo con un controlling_field_path pero sin controlling_value_regex es visible si el campo de control tiene cualquier valor no nulo, no en blanco.

operator
String

El operador que define cómo debe cumplirse el valor controlling_value_regex Los operadores pueden ser uno de los siguientes: 

  • NOT_EQUAL
  • EQUAL
  • EMPTY
  • NOT_EMPTY
  • MATCHES_REGEX

La sintaxis regex es necesaria cuando se usa MATCHES_REGEX.

Resaltado de campos del editor de temas

Cuando están en el editor de temas, el resaltado de vista previa puede ayudar a los creadores de contenido a comprender qué campos controlan qué elementos de página. La vista previa del resaltado funciona asignando los campos del tema a los selectores CSS a los que afectan, agregando un cuadro alrededor de esos elementos al pasar el cursor sobre el campo en el editor del tema.

Para configurar el resaltado de vista previa para los campos del tema, incluirás un archivo editor-preview.json en el directorio raíz del tema para asignar los campos del tema a una lista de selectores CSS. En el archivo, incluirás una matriz para cada campo de estilo que deseas resaltar que contiene los selectores CSS relevantes, utilizando el siguiente formato:

// editor-preview.json { "selectors": { "theme.settings.path.1": [ <CSS selectors> ], "theme.settings.path.2": [ <CSS selectors> ], } }

Por ejemplo, el código a continuación resaltará qué elementos de página están controlados por el campo de fuente principal. Puedes ver el ejemplo completo en el archivo editor-preview.json del tema Crecimiento predeterminado.

// editor-preview.json { "selectors": { "fonts.primary": [ "button, .button, .hs-button", "form input[type='submit'], form .hs-button", ".error-page:before", "p", "blockquote > footer", "form td.is-today .pika-button", "form .is-selected .pika-button", "th, td", ".blog-listing__post-tag", ".blog-listing__post-author-name, .blog-post__author-name", ".pagination__link-icon svg", ".tabs__tab", "a", ".button.button--simple", ".pagination__link .pagination__link-icon svg", ".card--dark", ".card--light", ".card--light summary, .card--light p, .card--light h1, .card--light h2, .card--light h3, .card--light h4, .card--light h5, .card--light h6, .card--light a:not(.button), .card--light span, .card--light div, .card--light li, .card--light blockquote", ".card--light .accordion__summary:before", "tfoot th, tfoot td", ".header__language-switcher-current-label > span", ".header__language-switcher-child-toggle svg", ".header__language-switcher .lang_list_class a:not(.button)", ".header__menu-link", ".header__menu-item--depth-1 > .header__menu-link:not(.button)", ".header__menu-item--depth-1 .header__menu-child-toggle svg", ".header__menu-toggle svg", ".header__language-switcher .header__language-switcher-current-label > span", ".header p, .header h1, .header h2, .header h3, .header h4, .header h5, .header h6, .header a:not(.button), .header span, .header li, .header blockquote, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab", ".footer .hs-menu-wrapper a", ".footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer p, .footer a:not(.button), .footer span, .footer div, .footer li, .footer blockquote, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab", ".footer hr", "form label", "#email-prefs-form, #email-prefs-form h1, #email-prefs-form h2", "form legend", "form input[type='text'], form input[type='email'], form input[type='password'], form input[type='tel'], form input[type='number'], form input[type='search'], form select, form textarea", ".backup-unsubscribe input[type='email']", "form .legal-consent-container, form .legal-consent-container .hs-richtext, form .legal-consent-container .hs-richtext p", "form .hs-richtext, form .hs-richtext *, form .hs-richtext p, form .hs-richtext h1, form .hs-richtext h2, form .hs-richtext h3, form .hs-richtext h4, form .hs-richtext h5, form .hs-richtext h6", "button, button, button, .button, .button, .button, .hs-button, .hs-button, .hs-button", "button, .button, .hs-button", ".button.button--secondary, .button.button--secondary, .button.button--secondary", ".button.button--secondary", ".header__menu-item--depth-1 > .header__menu-link, .header__menu-item--depth-1 > .header__menu-link", ".header__menu-item--depth-1 > .header__menu-link", ".header__menu-submenu .header__menu-link, .header__menu-submenu .header__menu-link", ".header__language-switcher .lang_list_class a, .header__language-switcher .lang_list_class a", ".header__menu-submenu .header__menu-link:not(.button)", ".footer .hs-menu-wrapper a, .footer .hs-menu-wrapper a", ".footer .hs-menu-wrapper a", "form .hs-richtext a", ".header__menu-item--depth-1 > .header__menu-link--active-link:not(.button)", ".footer .hs-menu-wrapper .active > a" ] } }

growth-theme-hover

Para comenzar a generar este archivo, ejecuta el siguiente comando CLI para crear el archivo. Durante la creación del archivo, se ejecutará un script para configurar los mapeos iniciales de los selectores de campo.

hs theme generate-selectors <theme-directory-path>
ParameterDescription
theme-directory-path

La ruta al directorio de temas.

Después de ejecutar el comando, deberás revisar y refinar el archivo editor-preview.json para asegurarte de que los campos y los selectores estén asignados correctamente. Si bien el comando generate-selectors hará una conjetura rudimentaria sobre qué campos afectan a qué selectores, deberás hacer correcciones en función de cómo se construye tu tema. Por ejemplo, este comando no puede detectar cuándo los módulos están anulando el estilo o cuando estás usando macros.

Para probar estas asignaciones, carga el tema a una cuenta y luego ve el editor de temas en esa cuenta (Configuración > Sitio web > Temas > Ver tema). 

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