Usar módulos em modelos
Os módulos podem ser adicionados diretamente a um modelo ou a páginas individuais com áreas de arrastar e soltar e colunas flexíveis. Quando um módulo é adicionado a um modelo, ele aparece nesse local por padrão. Módulos em áreas de arrastar e soltar e colunas flexíveis podem ser movidos e removidos, e outros módulos podem ser adicionados ao redor deles. Estas são instâncias de módulo.
Depois que um módulo foi definido, você pode obter seus valores de campo em nível de modelo por meio do dict content.widgets.
As tags de módulo do HubL são delimitadas por {% %} e devem especificar module, um nome exclusivo e o caminho do módulo no gerenciador de design. Um módulo também pode incluir parâmetros para configurações adicionais.
- Nome do módulo: dá ao módulo uma identidade exclusiva no contexto do modelo.
- O nome deve estar entre aspas após o tipo de módulo e deve usar sublinhados em vez de espaços ou traços.
- Esse nome é usado para corresponder ao conteúdo definido no editor de página/e-mail com a tag de módulo do HubL correspondente. Por exemplo, se você codificar uma tag de módulo do HubL com o mesmo nome em duas áreas diferentes de um modelo, os usuários terão apenas um módulo para editar no editor, mas as alterações nesse módulo serão aplicadas em ambos os locais.
- O nome deve estar entre aspas após o tipo de módulo e deve usar sublinhados em vez de espaços ou traços.
- Caminho: dependendo da tag, define a localização do módulo no gerenciador de design.
/significa a raiz da unidade atual;./significa o diretório atual;../significa o diretório principal do diretório atual.
@hubspot/ seguido do tipo de módulo.
- Parâmetros: configurações adicionais para a instância do módulo que especificam seu comportamento e como ele é renderizado. Inclui valores padrão em nível de modelo para campos de módulo.
- Os parâmetros são pares de chaves e valores separados por vírgulas.
- Os parâmetros têm tipos diferentes, incluindo: string, booleano, inteiro, enumeração e objeto de lista JSON. Os valores dos parâmetros de string devem estar entre aspas simples ou duplas, enquanto que os parâmetros booleanos não exigem aspas para seus valores
TrueouFalse. Saiba mais sobre os parâmetros que estão disponíveis para todos os módulos. - Observe que não há validação no editor para valores de campo em relação às configurações de campo do módulo. Por exemplo, se o módulo tiver um campo de número que tenha um valor mínimo definido como
1e você passar um0para o parâmetro, você não verá um aviso de que o valor é inválido.
Para módulos com campos que esperam dicts, você pode passá-los como faria com outros parâmetros. Se for mais simples para você, ou caso planeje reutilizar os valores, você poderá definir o dict como uma variável e passar a variável para o parâmetro.
As tags de arrastar e soltar, como dnd_area, vêm com um conjunto de parâmetros padrão, como width. Embora o gerenciador de design impeça a criação de novos campos que usem um desses parâmetros reservados, os módulos criados antes da introdução das tags de arrastar e soltar podem já usar um parâmetro reservado.
Para corrigir isso, você pode usar o parâmetro fields. Assim como você passaria dados de campo para um grupo, você pode passar o nome do campo como uma chave no objeto fields. O valor deve ser consistente com o formato esperado pelo tipo de campo.
Você pode definir valores padrão para campos de módulo em nível de modelo incluindo parâmetros nas tags dnd_module. Abaixo, saiba como definir valores de campo padrão em grupos de campos aninhados, campos que se repetem, grupos de campos que se repetem e campos de estilo.
Veja abaixo um exemplo de um módulo de arrastar e soltar personalizado com um grupo de campos personalizados style contendo outros grupos de campos aninhados. Compare a configuração em nível de modelo com a aparência desse mesmo grupo no gerenciador de design.
Você pode definir valores padrão em nível de modelo para campos que se repetem passando um array para o parâmetro do campo. Os itens do array devem estar no formato esperado com base no tipo de campo. Por exemplo:
- Um campo de texto simples somente espera uma string.
- Um campo repetidor de imagem espera um objeto de campo de imagem. Isso se aplica a todos os outros tipos de campo.
Os módulos que contêm grupos de campos que se repetem -- como você pode ver em um módulo de apresentação de slides ou de perguntas frequentes -- podem ter um padrão em nível de modelo definido para esses grupos. Para fazer isso, você passa um array de objetos para o parâmetro do seu grupo de campos. Os pares de chave e valor do objeto são os nomes dos campos e seus valores.
você pode definir valores padrão de forma explícita para campos de estilo usando o parâmetro styles.
Isso funciona exatamente como outros grupos, nos quais o parâmetro é o nome do grupo. Você passa um objeto para esse parâmetro com todos os campos que deseja definir.
Embora a maioria dos módulos tenha parâmetros que controlam o conteúdo padrão, pode haver situações em que você precise adicionar blocos de código grandes ao conteúdo padrão de um módulo. Por exemplo, você pode querer incluir um grande bloco de HTML como conteúdo padrão para um módulo HTML ou rich text. Em vez de tentar gravar esse código em um parâmetro de valor, você pode usar a sintaxe de bloco do HubL.
Antes da sintaxe module_block, widget_block foi usado. Ele segue o mesmo padrão, mas as tags de abertura foram widget_block e widget_attribute. As tags de fechamento foram end_widget_attribute, end_widget_block.
A sintaxe widget_block está obsoleta, mas você não precisa atualizar o código antigo.
O parâmetro que segue imediatamente module_block ou widget_block (obsoleto) é o parâmetro type_of_module.
Em quase toda a nossa documentação, você descobrirá que usamos module. Os Módulos V2 do HubSpot são módulos normais, como o que você pode criar. Portanto, não há mais a necessidade de usar um type_of_module diferente.
Como widget_block foi descontinuado, você deve usar module_block. Ao herdar um site de outro desenvolvedor, ele poderá conter código antigo que usa widget_block e type_of_module.
O type_of_module permite nomes de módulos V1 da HubSpot, por exemplo: rich_text ou raw_html. Parâmetros adicionais podem ser adicionados à primeira linha do HubL. A segunda linha define a qual parâmetro o conteúdo do bloco será aplicado. Por exemplo, para um módulo rich_text, deve ser o parâmetro html. Para um módulo raw_html, seria o parâmetro de valor (veja os dois exemplos abaixo).
Além da sintaxe regular e de bloco, há determinadas instâncias em que você pode querer especificar um conteúdo padrão de bloco grande para uma variável de conteúdo predefinida. O exemplo mais comum disso é a variável content.email_body . Essa variável imprime um corpo de e-mail padrão que pode ser alterado no editor de conteúdo. Como este não é um módulo padrão do HubL, usamos uma tag content_attribute para especificar um bloco de conteúdo padrão. O exemplo abaixo mostra a variável do corpo do e-mail preenchida com um bloco de código de conteúdo padrão.
Embora alguns módulos tenham parâmetros especiais, veja abaixo uma lista de parâmetros compatíveis com todos os módulos.
| Parameter | Type | Description | Default |
|---|---|---|---|
label
| String | O nome do módulo exibido no editor de conteúdo. Esse parâmetro também pode ser usado para dar mais instruções aos usuários. | |
overrideable
| Booleano | Controla se o módulo pode ou não ser editado no editor de conteúdo, equivalente à configuração Impeça a edição em editores de conteúdo no gerenciador de design. |
True
|
no_wrapper
| Booleano | Quando está definido como Nas páginas, os módulos são sempre envolvidos por |
False
|
extra_classes
| String | Adiciona classes ao wrapper do módulo. Você pode adicionar várias classes, separando-as com espaços. Por exemplo:
| |
export_to_template_context
| Booleano | Quando definido como |
False
|
unique_in_loop
| Booleano | Quando o módulo é definido dentro de um loop, anexa o nome do módulo com loop.index. Quando definido como |
False
|
Para ver uma lista completa de todos os tipos de módulos e seus parâmetros, clique aqui.
Abaixo, saiba mais sobre os parâmetros de módulo baseados em campo que você pode usar.
| Campo | Tipo | Exemplo | Chaves |
|---|---|---|---|
| Blog | Inteiro (ID do blog) | 1234567890 |
|
| Booleano | True/false | false |
|
| Escolha | String | "option_1" |
|
| Cor | Objeto |
|
|
| CTA | String (ID da CTA) |
|
|
| Data | Data/hora |
|
|
| Datetime | Data/hora |
|
|
| Endereço de e-mail | Array (strings de endereços de e-mail) |
|
|
| Arquivo | String (URL do arquivo) |
|
|
| E-mail de acompanhamento | Inteiro (ID do e-mail de acompanhamento) |
|
|
| Fonte | Objeto |
|
|
| Formulário | Objeto |
|
|
| Tabela do HubDb | Inteiro (ID da tabela do HubDB) | 123456789 |
|
| Ícone | Objeto |
|
|
| Imagem | Objeto |
|
|
| Link | Objeto |
|
|
| Logotipo | Objeto |
|
|
| Reunião | String (link de reunião) | "https://app.hubspot.com/meetings/developers-r-kewl" |
|
| Menu | Inteiro (ID do menu) | 123456789 |
|
| Número | Inteiro | 1 |
|
| Página | Inteiro (ID da página) | 1234567890 |
|
| richtext | String (pode conter HTML) | "<h1>Hello, world!</h1>" |
|
| Campanha do Salesforce | String (ID da campanha do Salesforce) | "7016A0000005S0tQAE" |
|
| Menu simples | Array de objetos de item de menu |
|
|
| Tag | Inteiro (ID ou slug de tag; ID é recomendado) | 1234567890 |
|
| Texto | String | "it's like any other string" |
|
| URL | Objeto |
|
|
Agradecemos pelos seus comentários. Eles são muito importantes para nós.