Extensão e configuração do importador de design para páginas iniciais extending-and-configuring-the-design-importer-for-landing-pages
Esta seção descreve como configurar e, se desejado, estender o importador de design para páginas de aterrissagem. O trabalho com Páginas de Aterrissagem após a importação é abordado em Páginas de Aterrissagem.
Fazendo com que o importador de design extraia seu componente personalizado
Estas são as etapas lógicas para fazer o importador de design reconhecer seu componente personalizado
-
Criar um TagHandler
- Um manipulador de tags é um POJO que lida com tags HTML de um tipo específico. O "tipo" de tags HTML que seu TagHandler pode manipular é definido por meio da propriedade OSGi "tagpattern.name" de TagHandlerFactory. Essa propriedade OSGi é essencialmente um regex que deve corresponder à tag html de entrada que você deseja manipular. Todas as tags aninhadas seriam lançadas ao manipulador de tags para manipulação. Por exemplo, se você se registrar para uma div que contém uma tag <p> aninhada, a tag <p> também será lançada no TagHandler e depende de você como deseja cuidar disso.
- A interface do manipulador de tags é semelhante a uma interface do manipulador de conteúdo SAX. Ele recebe eventos SAX para cada tag html. Como provedor de manipulador de tags, é necessário implementar determinados métodos de ciclo de vida que são chamados automaticamente pela estrutura do importador de design.
-
Crie o TagHandlerFactory correspondente.
- A fábrica do manipulador de tags é um componente OSGi (singleton) responsável por gerar instâncias do seu manipulador de tags.
- a fábrica do manipulador de tags deve expor uma propriedade OSGi chamada "tagpattern.name", cujo valor corresponde à tag html de entrada.
- Se houver vários manipuladores de tag que correspondam à tag html de entrada, aquele com uma classificação mais alta será escolhido. A própria classificação é exposta como uma propriedade OSGi service.ranking.
- TagHandlerFactory é um componente OSGi. Todas as referências que você deseja fornecer ao seu TagHandler devem ser fornecidas por meio dessa fábrica.
-
Certifique-se de que o TagHandlerFactory tenha uma classificação melhor se desejar substituir o padrão.
Preparação do HTML para importação preparing-the-html-for-import
Depois de criar uma página de importação, você pode importar a página de aterrissagem de HTML completo. Para importar a página de aterrissagem do HTML, primeiro você precisa compactar o conteúdo em um pacote de design. O pacote de design contém a página de aterrissagem do HTML junto com os ativos referenciados (imagens, css, ícones, scripts e assim por diante).
A seguinte folha de características fornece uma amostra de como preparar seu HTML para importação:
Folha de características da página de destino
Layout e requisitos do arquivo Zip zip-file-layout-and-requirements
Este é um exemplo de layout do zip:
- /index.html > arquivo HTML da página de aterrissagem
- /css > para adicionar ao clientlib CSS
- /img > todas as imagens e ativos
- /js > para adicionar ao clientlib JS
O layout é baseado no layout de práticas recomendadas do HTML5 Boilerplate. Leia mais em https://html5boilerplate.com/
Preparação do HTML da landing page preparing-the-landing-page-html
Para importar o HTML, é necessário adicionar uma div da tela de desenho ao HTML da página de aterrissagem.
A div da tela de desenho é um html div com id="cqcanvas"
que deve ser inserido na tag HTML <body>
e deve envolver o conteúdo a ser convertido.
Um trecho de amostra do HTML da landing page após a adição da div da tela é o seguinte:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
</head>
<body>
<div id="cqcanvas">
<!-- HTML content intended for conversion -->
</div>
</body>
</html>
Preparação do HTML para incluir componentes editáveis do AEM preparing-the-html-to-include-editable-aem-components
Ao importar uma landing page, você tem a opção de importar a página como está, o que significa que, após a importação, não é possível editar nenhum dos itens importados no AEM (ainda é possível adicionar outros componentes do AEM na página).
Antes de importar a landing page, convém converter algumas partes da landing page para que elas sejam componentes de AEM editáveis. Isso permite editar rapidamente partes da página de aterrissagem, mesmo depois que o design da página de aterrissagem for importado.
Para isso, adicione o data-cq-component
ao componente apropriado no arquivo de HTML que você importa.
A seção a seguir descreve como editar o arquivo HTML para converter determinadas partes das páginas de aterrissagem em diferentes componentes editáveis do AEM. Os componentes são descritos detalhadamente em Componentes de páginas de aterrissagem.
Limitações limitations
Antes de importar, observe as seguintes limitações:
Qualquer atributo como classe ou id aplicado na tag <body> não é preservado any-attribute-like-class-or-id-applied-on-the-amp-lt-body-tag-is-not-preserved
Se qualquer atributo, como id ou classe, for aplicado à marca do corpo, por exemplo, <body id="container">
, ele não será preservado após a importação. Portanto, o design que está sendo importado não deve ter dependências nos atributos aplicados na tag <body>
.
Arrastar e soltar zip drag-and-drop-zip
O upload do zip de arrastar/soltar não é compatível com o Internet Explorer e com as versões 3.6 e anteriores do Firefox. Para fazer upload de um design ao usar esses navegadores, clique na zona soltar arquivo para abrir uma caixa de diálogo de upload de arquivo e fazer upload do design usando essa caixa de diálogo.
Os navegadores compatíveis com a opção "arrastar e soltar" do design do zip são Chrome, Safari5.x, Firefox 4 e superior.
Modernizador não é suportado modernizr-is-not-supported
Modernizr.js
é uma ferramenta baseada no JavaScript que detecta recursos nativos de navegadores e se eles são adequados para elementos html5 ou não. Designs que usam o Modernizador para aprimorar o suporte em versões mais antigas de navegadores diferentes podem causar problemas de importação na solução de página de aterrissagem. Não há suporte para Modernizr.js
scripts com o importador de Design.
As propriedades da página não são preservadas no momento da importação do pacote de design page-properties-are-not-preserved-at-the-time-of-importing-design-package
Qualquer propriedade de página (por exemplo, Domínio personalizado, Imposição de HTTPS e assim por diante) definida para uma página (que usa o modelo de Página de aterrissagem em branco) antes de importar o pacote de design é perdida após a importação do design. Portanto, a prática recomendada é definir as propriedades da página após importar o pacote de design.
Marcação somente HTML assumida html-only-markup-assumed
Durante a importação, a marcação é limpa por motivos de segurança e para evitar a importação e a publicação de marcação inválida. Isso pressupõe uma marcação somente HTML e todas as outras formas de elementos, como SVG em linha ou Componentes da Web, serão filtradas.
Texto text
Marcação HTML para inserir um componente de texto ( foundation/components/text
) no HTML dentro do pacote de design:
<div data-cq-component="text"> <p>This is some editable text</p> </div>
Incluindo a marcação acima no HTML, o faz o seguinte:
- Cria um componente de texto AEM editável (
sling:resourceType=foundation/components/text
) na página de aterrissagem criada após a importação do pacote de design. - Define a propriedade
text
do componente de texto criado para o HTML contido emdiv
.
Declaração de marca de componente abreviada:
<p data-cq-component="text">Text component shorthand</p>
Texto com uma lista
Para adicionar um texto com uma lista:
- 1º
- 2nd
que podem ser editadas no editor de RTE:
<div data-cq-component="text"><p>This is text with a list:</p><ul><li>1st</li><li>2nd</li></ul><p>It can be edited with the RTE editor</p></div>
Texto com cor
Para adicionar um texto com cor (rosa) que possa ser editado no editor RTE:
<div class="pink" data-cq-component="text"><p>This is pink text.</p><p>It can be edited with the RTE editor</p></div>
Título title
Marcação HTML para inserir um componente de título ( wcm/landingpage/components/title
) no HTML dentro do pacote de design:
<div data-cq-component="title"> <h1>This is some editable title text</h1> </div>
Incluindo a marcação acima no HTML, o faz o seguinte:
- Cria um componente de título AEM editável (
sling:resourceType=wcm/landingpage/components/title
) na página de aterrissagem criada após a importação do pacote de design. - Define a propriedade
jcr:title
do componente de título criado para o texto dentro da marca de cabeçalho quebrada em div. - Define a propriedade
type
para a marca de cabeçalho, neste casoh1
.
O componente de título oferece suporte a sete tipos - h1, h2, h3, h4, h5, h6
e default
.
Declaração de marca de componente abreviada:
<h1 data-cq-component="title">Title component shorthand</h1>
Imagem image
marcação HTML para inserir um componente de imagem (foundation/components/image) no HTML dentro do pacote de design:
<div data-cq-component="image">
<img src="img/video1.png" alt="Video about Polar Brake Goggles in action" title="Polar Brake Goggles" width="300" height="200" />
</div>
Incluindo a marcação acima no HTML, o faz o seguinte:
- Cria um componente de imagem AEM editável (
sling:resourceType=foundation/components/image
) na página de aterrissagem criada após a importação do pacote de design. - Define a propriedade
fileReference
do componente de imagem criado para o caminho para o qual a imagem especificada no atributo src é importada. - Define a propriedade
alt
como o valor do atributo alt na marca img. - Define a propriedade
title
como o valor do atributo title na marca img. - Define a propriedade
width
como o valor do atributo width na marca img. - Define a propriedade
height
como o valor do atributo height na marca img.
Declaração de marca de componente abreviada:
<img data-cq-component="image" src="test.png" alt="Image component shorthand"/>
URL absoluto img src não suportado no componente de Imagem Div absolute-url-img-src-not-supported-within-image-component-div
Se uma marca <img>
com uma url absoluta src for tentada para conversão de componente, uma UnsupportedTagContentException apropriada será gerada. Por exemplo, o seguinte não é suportado:
<div data-cq-component="image">
<img src="https://cdn.printfriendly.com/pf-button.gif" alt="Print Friendly and PDF"/>
</div>
Caso contrário, as imagens de URL absolutas são suportadas para tags img que não fazem parte do componente de Imagem div.
Componentes de frase de chamariz call-to-action-components
Você pode marcar parte da página de aterrissagem para importação como um "componente de chamada para ação editável"; esses componentes de chamada para ação importados podem ser editados após a importação da página de aterrissagem. O AEM inclui os seguintes componentes do CTA:
- Clicar através do link - Permite adicionar um link de texto que, quando clicado, leva o visitante a um URL de destino.
- Link gráfico - Permite adicionar uma imagem que, quando clicada, leva o visitante a um URL de destino.
Link de Click Through click-through-link
Esse componente do CTA pode ser usado para adicionar um link de texto na landing page.
Propriedades suportadas
- Rótulo, com as opções negrito, itálico e sublinhado
- URL do Target, compatível com URL de terceiros e AEM
- Opções de renderização de página (mesma janela, nova janela e assim por diante)
tag HTML para incluir o componente de click-through no zip importado. Aqui, o href mapeia para o url de destino, a opção "Exibir detalhes do produto" mapeia para o rótulo e assim por diante.
<div id="cqcanvas">
.
.
<div data-cq-component="clickThroughLink">
<a href="/content/we-retail/us/en/products/equipment/snow-sports/flying-snowboard.html">View Product Details ></a>
</div>
.
.
</div>
Esse componente pode ser usado em qualquer aplicativo independente ou pode ser importado do zip.
Declaração de marca de componente abreviada:
<a href="/somelink.html" data-cq-component="clickThroughLink">Click Through Link shorthand</a>
Vincular ao gráfico graphical-link
Esse componente do CTA pode ser usado para adicionar qualquer imagem gráfica com link na página de aterrissagem. A imagem pode ser um botão simples ou qualquer imagem gráfica como plano de fundo. Quando a imagem é clicada, o usuário é levado para o URL de destino especificado nas propriedades do componente. Ele faz parte do grupo "Plano de ação".
Propriedades suportadas
- Recorte de imagem, rotação
- Focalizar texto, descrição, tamanho em px
- URL do Target, compatível com URL de terceiros e AEM
- Opções de renderização de página (mesma janela, nova janela e assim por diante)
tag HTML para incluir o componente de link gráfico no zip importado. Aqui, href mapeia para o url de destino, img src é a imagem de renderização, "title" é tomado como texto ao passar o mouse e assim por diante.
<div id="cqcanvas">
<div data-cq-component="clickThroughGraphicalLink"><a href="https://www.adobe.com/go/wem"><img src="img/call-to-action-button.png" title="Click Here to Learn More" /></a></div>
</div>
Declaração de marca de componente abreviada:
<a href="/somelink.html" data-cq-component="clickThroughGraphicalLink"><img src="linkimage.png" alt="Click Through Graphical Link shorthand"/></a>
data-cq-component="clickthroughgraphicallink"
.<div data-cq-component="clickthroughlink"> <a href="https://myURLhere/"><img src="image source here"></a> </div>
<div data-cq-component="clickthroughgraphicallink">
<a class="hasBackground" href="https://myURLhere/"></a>
</div>
css .hasbackground { background-image: pathtoimage }
associadoFormulário de cliente em potencial lead-form
Um formulário de cliente potencial é um formulário usado para coletar informações de perfil de um visitante/cliente potencial. Essas informações podem ser armazenadas e usadas posteriormente para fazer um marketing eficaz com base nas informações. Essas informações geralmente incluem título, nome, email, data de nascimento, endereço, interesse e assim por diante. Faz parte do grupo "Formulário de cliente potencial da CTA".
Recursos com suporte
-
Campos de leads predefinidos - nome, sobrenome, endereço, data, gênero, sobre, userId, emailId, botão enviar estão disponíveis no sidekick. Basta arrastar/soltar o componente desejado em seu formulário de lead.
-
Com a ajuda desses componentes, o autor pode criar um formulário de cliente potencial independente, esses campos correspondem a campos de formulário de cliente potencial. Em aplicativos zip independentes ou importados, o usuário pode adicionar campos extras usando campos de formulário de cliente em potencial cq:form ou cta, nomeá-los e projetá-los de acordo com os requisitos.
-
Mapeie campos de formulário de cliente potencial usando nomes predefinidos específicos do formulário de cliente potencial do CTA, por exemplo, - firstName para o nome no formulário de cliente potencial e assim por diante.
-
Os campos que não estão mapeados para formulários de cliente potencial são mapeados para cq:componentes de formulário - texto, rádio, caixa de seleção, lista suspensa, oculto, senha.
-
O usuário pode fornecer o título usando a tag "rótulo" e o estilo usando a "classe" de atributo de estilo (disponível somente para componentes de formulário de lead do CTA).
-
A página de agradecimento e a lista de assinaturas podem ser fornecidas como um parâmetro oculto do formulário (presente no index.htm) ou podem ser adicionadas/editadas na barra de edição do "Início do formulário de cliente potencial"
<input type="hidden" name="redirectUrl" value="/content/we-retail/en/user/register/thank_you"/>
<input type="hidden" name="groupName" value="leadForm"/>
-
Restrições como - necessárias podem ser fornecidas a partir da configuração de edição de cada um dos componentes.
tag HTML para incluir o componente de link gráfico no zip importado. Aqui, "firstName" é mapeado para o formulário de cliente potencial firstName, e assim por diante, exceto para caixas de seleção - essas duas caixas de seleção mapeiam para o componente cq:form dropdown.
<div id="cqcanvas">
<div id="form_wrapper">
<h2>NEWSLETTER SIGN UP</h2>
<div data-cq-component="leadFormGeneration">
<form method="post" action="#" onsubmit="return popupBox()">
<label for="firstName" class="checkText">
FIRST NAME
</label><br />
<input name="firstName" class="text pink" type="text" /><br />
<label for="lastName" class="checkText">
LAST NAME
</label><br />
<input name="lastName" class="text pink" type="text" /><br />
<label for="emailId" class="checkText">
EMAIL ADDRESS
</label><br />
<input name="emailId" class="text pink" type="text" /><br />
<div class="checkboxes">
<input type="checkbox" class="check" name="send_news" /> <label for="send_news" class="checkText">Send me the latest We.Retail news and announcements.</label><br />
<input type="checkbox" class="check" name="send_offers" /> <label for="send_offers" class="checkText">Send me We.Retail deals and special offers.</label><br />
</div>
<input type="submit" name="submit" class="submit pink" value="Sign Up >" />
</form>
</div>
</div>
Parsys parsys
O componente AEM Parsys é um componente de contêiner que pode conter outros componentes AEM. É possível adicionar um componente Parsys no HTML importado. Isso permite que o usuário adicione/exclua componentes editáveis do AEM na página de aterrissagem mesmo após sua importação.
O sistema de parágrafo oferece aos usuários a capacidade de adicionar componentes usando o sidekick.
Marcação HTML para inserir um componente Parsys ( foundation/components/parsys
) no HTML dentro do pacote de design:
<div data-cq-component="parsys">
<div data-cq-component="title"><h2>ULTIMATE PROTECTION</h2></div>
<div data-cq-component="title"><h3>ON SALE</h3></div>
</div>
A inclusão da marcação acima no HTML faz o seguinte:
- Insere um componente AEM Parsys (foundation/components/parsys) na landing page criada após a importação do pacote de design.
- Inicializa o sidekick com componentes padrão. Novos componentes podem ser adicionados à página de aterrissagem arrastando componentes do sidekick para o componente Parsys.
- Dois componentes do título também fazem parte do Parsys.
Meta target
O componente de Direcionamento mostra o conteúdo de uma experiência na página. É possível ter muitas experiências criadas em uma campanha e o componente de Direcionamento pode mostrar dinamicamente o conteúdo de diferentes experiências para vários usuários que visitam a página.
A marcação html para inserir um componente de direcionamento e também criar diferentes experiências em uma campanha:
<div data-cq-component="target">
<section data-cq-component="experience" data-cq-experience="default">
<p data-cq-component="text">Default content. Select this campaign in client context to view other experiences</p>
</section>
<section data-cq-component="experience" data-cq-segment="over-30">
<p data-cq-component="text">Content for Over 30</p>
</section>
<section data-cq-component="experience" data-cq-segment="under-30">
<p data-cq-component="text">Content for Under 30</p>
</section>
</div>
Opções de importação adicionais additional-importing-options
Além de especificar se os componentes importados são componentes AEM editáveis, você também pode configurar o seguinte antes de importar o pacote de design:
- Definir propriedades de página extraindo os metadados definidos no HTML importado.
- Especificando a codificação de conjunto de caracteres no HTML.
- Sobrepondo o modelo de página do importador.
Definir propriedades de página extraindo metadados definidos no HTML importado setting-page-properties-by-extracting-metadata-defined-in-imported-html
Os seguintes metadados declarados no cabeçalho do HTML importado devem ser extraídos e preservados pelo importador de concepção como propriedade "jcr:description":
- <meta name="description" content="">
O atributo Lang definido na tag HTML deve ser extraído e preservado pelo importador de design como a propriedade "jcr:language"
- <html lang="en">
Especificar a codificação de conjunto de caracteres no html specifying-the-charset-encoding-in-the-html
O importador de design lê a codificação especificada no HTML importado. A codificação pode ser especificada da seguinte maneira:
<meta charset="UTF-8">
OU
<meta http-equiv="content-type" content="text/html;charset=utf-8">
Se nenhuma codificação for especificada no HTML importado, a codificação padrão definida pelo importador de design será UTF-8.
Sobrepondo modelo overlaying-template
O modelo de Página de Aterrissagem em Branco pode ser sobreposto criando um em: /apps/<appName>/designimporter/templates/<templateName>
As etapas para criar um modelo no AEM são explicadas em Modelos.
Referência a um componente da landing page referring-a-component-from-landing-page
Suponha que você tenha um componente que deseja referenciar em seu HTML usando o atributo data-cq-component de modo que o importador de design renderize um componente para incluir neste local. Por exemplo, você deseja referenciar o componente de tabela ( resourceType = /libs/foundation/components/table
). O seguinte precisa ser adicionado no HTML:
<div data-cq-component="/libs/foundation/components/table">foundation table</div>
O caminho no data-cq-component deve ser o resourceType do componente.
Práticas recomendadas best-practices
O uso de seletores CSS semelhantes aos seguintes não é recomendado para uso com elementos marcados para conversão de componentes na importação.
Isso ocorre porque elementos html adicionais, como a tag <div>, são adicionados ao HTML gerado após a importação.
- Scripts que dependem da estrutura semelhante à mostrada acima também não são recomendados para uso com elementos marcados para conversão em componentes AEM.
- O uso de estilos nas tags de marcação para conversão de componentes como <div data-cq-component="*"> não é recomendado.
- O layout de design deve seguir as práticas recomendadas da placa de expansão HTML5. Leia mais em: https://html5boilerplate.com/.
Configuração de módulos OSGI configuring-osgi-modules
Os componentes que expõem propriedades configuráveis por meio do console OSGI são os seguintes:
- Importador de design de landing page
- Construtor de landing page
- Construtor de página de aterrissagem móvel
- Pré-processador de entrada de página inicial
A tabela abaixo descreve brevemente as propriedades:
Se você precisar fazer alterações no padrão de pesquisa, ao abrir o editor de propriedades felix, será necessário adicionar manualmente caracteres de barra invertida para escapar dos metacaracteres regex. Se você não adicionar caracteres de barra invertida manualmente, o regex será considerado inválido e não substituirá o mais antigo.
/\* *CQ_DESIGN_PATH *\*/ *(['"])
CQ_DESIGN_PATH
por VIPURL
no padrão de pesquisa, então seu padrão de pesquisa deve ter esta aparência:/\* *VIPURL *\*/ *(['"])
Resolução de problemas troubleshooting
Ao importar o pacote de design, você pode encontrar vários erros, descritos nesta seção.
Inicialização do sidekick com componentes relevantes para a página de aterrissagem initialization-of-sidekick-with-landing-page-relevant-components
Se o pacote de design contiver uma marcação de componente Parsys, após a importação, o sidekick começará a mostrar componentes relevantes da página inicial. Você pode arrastar e soltar novos componentes no componente Parsys na página de aterrissagem. Você também pode ir para o modo de design e adicionar novos componentes ao sidekick.
Mensagens de erro exibidas durante a importação error-messages-displayed-during-import
Se houver erros (por exemplo, o pacote importado não é um zip válido), a importação do design não importará o pacote. Em vez disso, uma mensagem de erro é exibida na parte superior da página logo acima da caixa de arrastar e soltar. Exemplos de cenários de erro são apresentados aqui. Após corrigir o erro, é possível reimportar o zip atualizado para a mesma landing page em branco. Os diferentes cenários em que os erros são lançados são os seguintes:
- O pacote de design importado não é um arquivo zip válido.
- O pacote de design importado não contém um index.html no nível superior.
Avisos exibidos após a importação warnings-displayed-after-import
Se houver avisos (por exemplo, HTML se refere a imagens que não existem no pacote), o importador de design importa o zip, mas ao mesmo tempo exibe uma lista de problemas/avisos no Painel de resultados. Ao clicar no link de problemas, será exibida uma lista de avisos que apontam quaisquer problemas no pacote de design. Os diferentes cenários em que os avisos são capturados e exibidos pelo importador de design são os seguintes:
- HTML refere-se a imagens que não existem no pacote.
- HTML refere-se a scripts que não existem no pacote.
- HTML refere-se a estilos que não existem no pacote.
Onde os arquivos do arquivo ZIP estão sendo armazenados no AEM? where-are-the-files-of-the-zip-file-being-stored-in-aem
Depois que a landing page é importada, os arquivos (imagens, css, js e assim por diante) no pacote de design são armazenados no seguinte local no AEM:
/etc/designs/default/canvas/content/campaigns/<name of brand>/<name of campaign>/<name of landing page>
Suponha que a página de aterrissagem seja criada sob a campanha We.Retail
e o nome da página de aterrissagem seja myBlankLandingPage, o local onde os arquivos Zip são armazenados é o seguinte:
/etc/designs/default/canvas/content/campaigns/geometrixx/myBlankLandingPage
Formatação não preservada formatting-not-preserved
Ao criar seu CSS, esteja ciente das seguintes limitações:
Se um texto e uma imagem (editável) forem como os seguintes:
<div class="box">
<p><div data-cq-component="image"><img src="assets/image.jpg" width="115"
height="116" /></div>Some Text </p>
</div>
com um CSS aplicado na classe box
da seguinte maneira:
.box
{ width: 450px; padding:10px; border: 1px #C5DBE7 solid; margin: 0px auto 0 auto; background-image:url(assets/box.gif); background-repeat:repeat-x,y; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; }
Quando box img
é usado no importador de design, a página de aterrissagem resultante parece não ter preservado a formatação. Para contornar isso, o AEM adiciona tags div no CSS e reescreve o código de acordo. Caso contrário, algumas regras CSS serão inválidas.
.box img
{ float:right; margin: 0 0 5px 5px; border: 1px #343434 solid; }