Extensão e configuração do importador de design para páginas iniciais extending-and-configuring-the-design-importer-for-landing-pages

Last update: Thu Aug 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Tópicos:
Administração

Criado para:

Administrador

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.

CAUTION

O Importador de Design, usado para importar páginas de aterrissagem, foi descontinuado com o AEM 6.5.

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

Obter arquivo

Layout e requisitos do arquivo Zip zip-file-layout-and-requirements

NOTE

Nesse ponto, os arquivos ZIP só podem conter uma página de HTML ou uma parte de uma página.

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/

NOTE

No mínimo, o pacote de design deve conter um arquivo index.html no nível raiz. Caso a página de aterrissagem a ser importada também tenha uma versão móvel, o zip deve conter um mobile.index.html juntamente com index.html no nível raiz.

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.

NOTE

A marcação HTML para converter partes da landing page em componentes AEM tem um formulário longo e uma declaração de tag abreviada. Ambos são descritos para cada componente.

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 em div.

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:

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 caso h1.

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>

NOTE

Para criar um link gráfico clickthroughgraphic, você precisa envolver uma tag de âncora e a tag de imagem dentro de uma div com o atributo data-cq-component="clickthroughgraphicallink".

Por exemplo, <div data-cq-component="clickthroughlink"> <a href="https://myURLhere/"><img src="image source here"></a> </div>

Outras maneiras de associar uma imagem a uma tag de âncora usando CSS não são compatíveis. Por exemplo, a marcação a seguir não funciona:

<div data-cq-component="clickthroughgraphicallink">

<a class="hasBackground" href="https://myURLhere/"></a>

</div>

com um css .hasbackground { background-image: pathtoimage } associado

Formulá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">

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

E > F

um elemento F filho de um elemento E

Combinador filho

E + F

um elemento F imediatamente precedido por um elemento E

Combinador irmão adjacente

E ~ F

um elemento F precedido por um elemento E

Combinador irmão geral

E:raiz

um elemento E, raiz do documento

Pseudo-classes estruturais

E:enésimo filho(n)

um elemento E, o enésimo filho de seu pai

Pseudo-classes estruturais

E:enésimo-último-filho(n)

um elemento E, o enésimo filho de seu pai, contando do último

Pseudo-classes estruturais

E:n-ésimo de tipo(n)

um elemento E, o n-ésimo irmão de seu tipo

Pseudo-classes estruturais

E:enésimo-último-de-tipo(n)

um elemento E, o n-ésimo irmão de seu tipo, contando do último

Pseudo-classes estruturais

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:

Componente

Nome de propriedade

Descrição da propriedade

Importador de design de landing page

Extrair filtro

A lista de expressões regulares a serem usadas para filtrar arquivos da extração.
entradas de CEP correspondentes a qualquer um dos padrões especificados são excluídas da extração

Construtor de landing page

Padrão do arquivo

O Construtor de landing pages pode ser configurado para lidar com arquivos HTML que correspondem a uma expressão regular, conforme definido pelo padrão do arquivo.

Construtor de página de aterrissagem móvel

Padrão do arquivo

O Construtor de landing pages pode ser configurado para lidar com arquivos HTML que correspondem a uma expressão regular, conforme definido pelo padrão do arquivo.

Grupos de dispositivos

A lista de grupos de dispositivos a serem suportados.

Pré-processador de entrada de 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 ao conteúdo da entrada linha por linha. Após a correspondência, o texto correspondente é substituído pelo padrão de substituição especificado.

Veja a observação abaixo sobre as limitações atuais do pré-processador de entrada de página de aterrissagem.

Substituir padrão

O padrão que substitui as correspondências encontradas. Você pode usar referências de grupos regex como $1, $2. Além disso, esse padrão oferece suporte a palavras-chave como {designPath} que são resolvidas com o valor real durante a importação.

NOTE

Limitação atual do Pré-processador de Entrada da Página de Aterrissagem:
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.

Por exemplo, se a configuração padrão for

>/\* *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 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; }

NOTE

Os designers devem apenas codificar dentro da marca id=cqcanvas reconhecida pelo importador, caso contrário, o design não será preservado.

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2