Show Menu
TÓPICOS×

Extensão e configuração do Importador de design para páginas iniciais

Esta seção descreve como configurar e, se desejado, estender o importador de design para páginas iniciais. Trabalhar com páginas de aterrissagem após a importação é abordado em Páginas de aterrissagem.
Como fazer com que o importador de design extraia seu componente personalizado
Estas são as etapas lógicas para fazer com que o importador de design reconheça seu componente personalizado
  1. Criar um TagHandler
    • Um manipulador de tags é um POJO que manipula tags HTML de um tipo específico. O "tipo" de tags HTML que seu TagHandler pode manipular é definido pela propriedade "tagpattern.name" do OSGi de TagHandlerFactory. Essa propriedade OSGi é essencialmente um regex que deve corresponder à tag html de entrada que você deseja manipular. Todas as tags aninhadas seriam jogadas ao seu manipulador de tags para manipulação. Por exemplo, se você se registrar em uma div que contém uma tag <p> aninhada, a tag <p> também será jogada em seu TagHandler e depende de você como deseja cuidar dela.
    • 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 um provedor manipulador de tags, é necessário implementar certos métodos de ciclo de vida que são automaticamente chamados pela estrutura do importador de design.
  2. Crie seu TagHandlerFactory correspondente.
    • A fábrica do manipulador de tags é um componente OSGi (singleton) responsável pelas instâncias de geração do manipulador de tags.
    • sua fábrica do manipulador de tags deve expor uma propriedade OSGi chamada "tagpattern.name" cujo valor é comparado com a tag html de entrada.
    • Se houver vários manipuladores de tags que correspondem à tag html de entrada, o que tem uma classificação mais alta será escolhido. A própria classificação é exposta como um service.ranking de propriedade OSGi.
    • O TagHandlerFactory é um componente OSGi. Todas as referências que você deseja fornecer ao TagHandler devem ser feitas via esta fábrica.
  3. Certifique-se de que sua TagHandlerFactory tenha uma classificação melhor se desejar substituir o padrão.

Preparação do HTML para importação

Depois de criar uma página de importador, você pode importar sua página inicial HTML completa. Para importar sua página inicial HTML, primeiro compacte seu conteúdo em um pacote de design. O pacote de design contém sua página inicial HTML junto com os ativos referenciados (imagens, css, ícones, scripts e assim por diante).
A seguinte folha de prova fornece uma amostra de como preparar seu HTML para importação:
Folha de capítulo da página inicial

Layout e requisitos do arquivo zip

Nesse ponto, os arquivos ZIP podem conter apenas uma página HTML ou uma parte de uma página.
Um exemplo de layout do zip é o seguinte:
  • /index.html -> arquivo HTML da página de aterrissagem
  • /css -> para adicionar à clientlib do CSS
  • /img -> todas as imagens e ativos
  • /js -> para adicionar à clientlib JS
O layout se baseia no layout de práticas recomendadas do HTML5 Boilerplate. Leia mais em https://html5boilerplate.com/
No mínimo, o pacote de design deve conter um arquivo index.html no nível raiz. Caso a página inicial a ser importada também tenha uma versão móvel, o zip deve conter um mobile.index.html junto com o index.html no nível raiz.

Preparação do HTML da página inicial

Para poder importar o HTML, é necessário adicionar uma div de tela ao HTML da página de aterrissagem.
A tela div é um html div com id="cqcanvas" o qual deve ser inserido dentro da <body> tag HTML e deve envolver o conteúdo destinado à conversão.
Um trecho de amostra do HTML da página inicial após a adição da tela div é 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 AEM editáveis

Ao importar uma página de aterrissagem, você tem a opção de importar a página como está, o que significa que após a página de aterrissagem ser importada, você não poderá editar nenhum dos itens importados no AEM (você ainda poderá adicionar outros componentes do AEM na página).
Antes de importar a página de aterrissagem, talvez você queira converter algumas partes da página de aterrissagem para que sejam componentes editáveis do AEM. Isso permite que você edite rapidamente partes da página inicial mesmo depois que o design da página inicial for importado.
Para fazer isso, adicione o componente apropriado data-cq-component ao arquivo HTML que você importa.
A seção a seguir descreve como editar seu arquivo HTML para que você converta certas partes de suas páginas iniciais em diferentes componentes editáveis do AEM. Os componentes são descritos detalhadamente em Componentes de páginas iniciais.
A marcação HTML para converter partes da página de aterrissagem em componentes AEM tem uma declaração de formulário longa e de tag curta. Ambos estão descritos para cada componente.

Limitações

Antes de importar, observe as seguintes limitações:

Qualquer atributo como classe ou id aplicado na tag &lt;body> não é preservado

Se algum atributo como id ou class for aplicado na tag body, 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 nenhuma dependência dos atributos aplicados na <body> tag .

Arrastar e soltar zip

O carregamento de zip de arrastar/soltar não é compatível com o Internet Explorer e o Firefox versões 3.6 e anteriores. Para fazer upload de um design ao usar esses navegadores, clique na área de arquivo para abrir uma caixa de diálogo de upload de arquivo e faça upload do design usando essa caixa de diálogo.
Os navegadores compatíveis com "arrastar e soltar" do zip de design são Chrome, Safari5.x, Firefox 4 e superior.

Modernizador não é suportado

Modernizr.js é uma ferramenta baseada em javascript que detecta recursos nativos de navegadores e detecta se são adequados para elementos html5 ou não. Os designs que usam o Modernizer para aprimorar o suporte em versões mais antigas de navegadores diferentes podem causar problemas de importação na solução da página de aterrissagem. Modernizr.js scripts não são suportados pelo importador de design.

As propriedades da página não são preservadas no momento da importação do pacote de design

Qualquer propriedade de página (por exemplo, Domínio personalizado, Imposição de HTTPS etc.) definido para uma página (que usa o modelo de Página inicial em branco) antes de importar o pacote de design são perdidos depois que o design é importado. Portanto, a prática recomendada é definir as propriedades da página depois de importar o pacote de design.

Marcação somente HTML assumida

Ao importar, a marcação analisada por motivos de segurança e para evitar a importação e publicação de uma marcação inválida. Isso pressupõe que a marcação somente de HTML e outras formas de elementos, como componentes incorporados SVG ou da Web serão filtrados.

Texto

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>

A inclusão da marcação acima no HTML faz o seguinte:
  • Cria um componente de texto AEM editável ( sling:resourceType=foundation/components/text ) na página inicial criada após a importação do pacote de design.
  • Define a text propriedade do componente de texto criado para o HTML delimitado no div .
Declaração abreviada de tag do componente:
<p data-cq-component="text">Text component shorthand</p>

Texto com uma lista
Para adicionar um texto com uma lista:
  • 1st
  • 2nd
que podem ser editados no editor 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 pode 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

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>

A inclusão da marcação acima no HTML faz o seguinte:
  • Cria um componente de título do AEM editável ( sling:resourceType=wcm/landingpage/components/title ) na página inicial criada após a importação do pacote de design.
  • Define a jcr:title propriedade do componente de título criado para o texto dentro da tag de cabeçalho encapsulada em div.
  • Define a type propriedade para a marca de cabeçalho, neste caso h1 .
O componente de título suporta 7 tipos - h1, h2, h3, h4, h5, h6 e default .
Declaração abreviada de tag do componente:
<h1 data-cq-component="title">Title component shorthand</h1>

Imagem

Marcação HTML para inserir um componente de imagem (base/componentes/imagem) 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>

A inclusão da marcação acima no HTML faz o seguinte:
  • Cria um componente de imagem do AEM editável ( sling:resourceType=foundation/components/image ) na página inicial criada após a importação do pacote de design.
  • Define a fileReference propriedade do componente de imagem criado para o caminho para o qual a imagem especificada no atributo src é importada.
  • Define a alt propriedade para o valor do atributo alt na tag img.
  • Define a title propriedade para o valor do atributo title na tag img.
  • Define a width propriedade para o valor do atributo width na tag img.
  • Define a height propriedade para o valor do atributo height na tag img.
Declaração abreviada de tag do componente:
<img data-cq-component="image" src="test.png" alt="Image component shorthand"/>

URL absoluto img src não suportado no componente de imagem Div

Se uma <img> tag com um url src absoluto for tentada para conversão de componente, um UnsupportedTagContentException apropriado será gerado. 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, imagens de URL absolutas são compatíveis com tags img que não fazem parte da div do Componente de imagem.

Componentes de chamada para ação

Você pode marcar parte da página de aterrissagem para importação como um "componente de Chamada para ação editável" - tais 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:
  • Link de clickthrough - permite adicionar um link de texto que, quando clicado, direciona o visitante a um URL.
  • Link gráfico - permite adicionar uma imagem que, quando clicada, leva o visitante para um URL de destino.

Formulário de lead

Um formulário de lead é um formulário usado para coletar informações de perfil de um visitante/lead. Essas informações podem ser armazenadas e usadas posteriormente como base para realizar um marketing eficiente. 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".
Recursos suportados
  • Campos de lead predefinidos - nome, sobrenome, endereço, dob, gênero, sobre, userId, emailId, botão Enviar estão disponíveis no sidekick. Basta arrastar/soltar o componente necessário no formulário de cliente potencial.
  • Com a ajuda desses componentes, o autor pode criar um formulário de formulário de cliente potencial independente, esses campos correspondem aos campos de formulário de cliente potencial. No aplicativo zip independente ou importado, o usuário pode adicionar campos extras usando campos de formulário cq:form ou cta lead, nomear e projetar de acordo com os requisitos.
  • Mapeie campos de formulário de cliente potencial usando nomes predefinidos específicos do formulário de cliente potencial CTA, por exemplo - firstName para nome próprio no formulário de cliente potencial, e assim por diante.
  • Os campos que não estão mapeados para o formulário principal mapearão para cq:componentes de formulário - texto, rádio, caixa de seleção, lista suspensa, oculta, senha.
  • O usuário pode fornecer o título usando a tag "label" e pode fornecer estilo usando o atributo de estilo "class" (disponível apenas para componentes de formulário de cliente potencial 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 de "Início do formulário de cliente potencial"
    <input type="hidden" name="redirectUrl" value="/content/we-varejo/en/user/register/welcome_you"/>
    <input type="hidden" name="groupName" value="leadForm"/>
  • As restrições como - obrigatórias podem ser fornecidas a partir da configuração de edição de cada componente.
Marca HTML para incluir o componente de link gráfico no zip importado. Aqui, "firstName" é mapeado para o formulário lead firstName e assim por diante, exceto para caixas de seleção - essas duas caixas de seleção mapeiam para o componente suspenso cq:form.
<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

O componente parsys do AEM é um componente de contêiner que pode conter outros componentes do AEM. É possível adicionar um componente parsys no HTML importado. Isso permite que o usuário adicione/exclua componentes editáveis do AEM à página de aterrissagem mesmo depois de ela ter sido importada.
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 parsys do AEM (fundação/componentes/parsys) na página inicial 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 os componentes do sidekick para o componente parsys.
  • Dois componentes de título também fazem parte do parsys.

Target

O componente de destino 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 destino 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 destino e também criar experiências diferentes 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 adicionais de importação

Além de especificar se os componentes importados são componentes editáveis do AEM, você também pode configurar o seguinte antes de importar o pacote de design:
  • Definir propriedades da página extraindo os metadados definidos no HTML importado.
  • Especificação da codificação charset no HTML.
  • Sobreposição do modelo de página do importador.

Definição das propriedades da página extraindo metadados definidos no HTML importado

Os seguintes metadados declarados no cabeçalho do HTML importado serão extraídos e conservados pelo importador de desenhos como propriedade "jcr:description":
  • <meta name="description" content="">
O atributo lang definido na marca HTML deve ser extraído e preservado pelo importador de design como propriedade "jcr:language"
  • <html lang="en">

Especificação da codificação charset no 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.

Sobreposição de modelo

O modelo de Página inicial em branco pode ser sobreposto criando um novo em: /apps/<appName>/designimporter/templates/<templateName>
As etapas para criar um novo modelo no AEM são explicadas aqui .

Referência a um componente da página de aterrissagem

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 fazer referência ao componente de tabela ( resourceType = /libs/foundation/components/table ). O seguinte precisa ser adicionado ao HTML:
<div data-cq-component="/libs/foundation/components/table">foundation table</div>
O caminho no componente data-cq-deve ser o resourceType do componente.

Práticas recomendadas

O uso de seletores de CSS semelhantes aos seguintes não é recomendado para uso com elementos marcados para conversão de componentes na importação.
E > F
um elemento F filho de um elemento E
E + F
um elemento F imediatamente precedido de um elemento E
E ~ F
um elemento F precedido de um elemento E
E:root
um elemento E, raiz do documento
E:enth-child(n)
um elemento E, o n-ésimo filho do pai
E:enésimo último filho(n)
um elemento E, o n-ésimo filho do pai, contando do último
E:enth-of-type(n)
um elemento E, o n-ésimo irmão do seu tipo
E:enésimo último tipo(n)
um elemento E, o n-ésimo irmão do seu tipo, contando do último
Isso ocorre porque elementos html adicionais, como a tag <div>, são adicionados ao Html gerado após a importação.
  • Os scripts que dependem da estrutura semelhante a acima também não são recomendados para uso com elementos marcados para conversão em componentes do AEM.
  • O uso de estilos nas tags de marcação para conversão de componentes, como <div data-cq-component="&ast;"> não é recomendado.
  • O layout de design deve seguir as práticas recomendadas do HTML5 Boilerplate. Leia mais sobre: https://html5boilerplate.com/ .

Configuração de módulos OSGI

Os componentes que expõem propriedades configuráveis pelo console OSGI são os seguintes:
  • Importador de design de página inicial
  • Construtor de página de aterrissagem
  • Construtor de página de aterrissagem móvel
  • Pré-processador de entrada da página inicial
A tabela abaixo descreve as propriedades de forma breve:
Componente Nome da Propriedade Descrição da propriedade
Importador de design de página inicial Extrair filtro A lista de expressões regulares a serem usadas para filtrar arquivos da extração. As entradas de CEP que correspondem a qualquer um dos padrões especificados são excluídas da extração
Construtor de página de aterrissagem Padrão de arquivo O Construtor de página inicial pode ser configurado para manipular arquivos HTML que correspondem a uma expressão regular conforme definido pelo padrão de arquivo.
Construtor de página de aterrissagem móvel Padrão de arquivo O Construtor de página inicial pode ser configurado para manipular arquivos HTML que correspondem a uma expressão regular conforme definido pelo padrão de arquivo.
Grupos de dispositivos A lista de grupos de dispositivos a serem suportados.
Pré-processador de entrada da página inicial Padrão de pesquisa O padrão a ser pesquisado no conteúdo da entrada do arquivo. Essa expressão regular corresponde à linha de conteúdo de entrada por linha. Após a correspondência, o texto correspondente é substituído pelo padrão de substituição especificado. Consulte a observação abaixo sobre as limitações atuais do pré-processador de entrada da página inicial.
Substituir padrão O padrão que substitui as correspondências encontradas. Você pode usar referências de grupo regex como $1, $2. Além disso, esse padrão suporta palavras-chave como {designPath} que são resolvidas com o valor real durante a importação.
Limitação atual do pré-processador de entrada da página inicial: Se precisar fazer alterações no padrão de pesquisa, ao abrir o editor de propriedades felix, é necessário adicionar manualmente caracteres de barra invertida para escapar dos metacaracteres regex. Se você não adicionar manualmente caracteres de barra invertida, o regex será considerado inválido e não substituirá o anterior.
Por exemplo, se a configuração padrão for
/\&ast *CQ_DESIGN_PATH **/ *(['"])
E você precisa substituir CQ_DESIGN_PATH por VIPURL no padrão de pesquisa, então seu padrão de pesquisa deve ser parecido com este:
/* *VIPURL **/ *(['"])

Resolução de Problemas

Ao importar o pacote de design, você pode encontrar vários erros, descritos nesta seção.

Inicialização do sidekick com componentes relevantes da página de aterrissagem

Se o pacote de design contiver uma marcação de componente parsys, depois da importação, o sidekick começará a mostrar componentes relevantes para a página de aterrissagem. Você pode arrastar e soltar novos componentes no componente parsys dentro da sua página inicial. Você também pode ir para o modo de design e adicionar novos componentes ao sidekick.

Mensagens de erro exibidas durante a importação

Em caso de erros (por exemplo, o pacote importado não é um zip válido), a importação de design não importará o pacote e exibirá uma mensagem de erro na parte superior da página logo acima da caixa de arrastar e soltar. Aqui são apresentados exemplos de cenários de erro. Depois de corrigir o erro, você pode importar novamente o zip atualizado para a mesma página inicial em branco. Os cenários diferentes em que são lançados erros 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 index.html no nível superior.

Avisos exibidos após a importação

No caso de avisos (por exemplo, HTML se refere a imagens que não existem no pacote), o importador de design importará o zip, mas ao mesmo tempo exibirá uma lista de problemas/avisos no Painel de resultados, ao clicar no link de problemas, exibirá uma lista de avisos que apontam quaisquer problemas no pacote de design. Os cenários diferentes 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.
  • O HTML se refere a scripts que não existem no pacote.
  • O HTML se refere a estilos que não existem no pacote.

Onde os arquivos do arquivo ZIP estão sendo armazenados no AEM?

Depois que a página inicial for importada, os arquivos (imagens, css, js etc.) dentro do 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 que o nome da página de aterrissagem seja myBlankLandingPage ; em seguida, o local onde os arquivos Zip são armazenados é o seguinte:
/etc/designs/default/canvas/content/campaigns/geometrixx/myBlankLandingPage

Formatação não preservada

Ao criar seu CSS, esteja ciente das seguintes limitações:
Se um texto e uma imagem (editável) forem semelhantes a:
<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 como segue:
.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; }

Em seguida, box img é usada no importador de design, a página inicial resultante parece não ter preservado a formatação. Para contornar isso, lembre-se de que o AEM adiciona tags div no CSS e regrava 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; }

Além disso, os designers devem estar cientes de que somente o código dentro da tag id=cqcanvas é reconhecido pelo importador, caso contrário o design não é preservado.