Ampliación y configuración del Importador de diseños para Páginas de aterrizaje

Esta sección describe cómo configurar y, si se desea, ampliar el importador de diseños para las páginas de aterrizaje. Trabajar con Páginas de aterrizaje después de la importación se trata en Páginas de aterrizaje.

Cómo hacer que el importador de diseños extraiga su componente personalizado

Estos son los pasos lógicos para que el importador de diseños reconozca su componente personalizado

  1. Creación de un TagHandler

    • Un controlador de tags en un POJO que gestiona tags HTML de un tipo específico. El tipo de tags HTML que el TagHandler puede gestionar se define mediante la propiedad OSGi “tagpattern.name” de TagHandlerFactory. La propiedad OSGi es un regex que debería coincidir con la tag HTML de entrada que desee gestionar. Todas las tags anidadas se enviarán al controlador de tags para que las gestione. Por ejemplo, si se registra para un div que contiene una etiqueta <p> anidada, la etiqueta <p> también se envía a TagHandler y depende de usted cómo desea cuidarla.
    • La interfaz del controlador de tags es similar a la interfaz del controlador de contenido SAX. Recibe eventos SAX para cada tag HTML. Como autor del controlador de tags, deberá implementar ciertos métodos de ciclo de vida invocados automáticamente por la estructura del importador de diseños.
  2. Cree su TagHandlerFactory correspondiente.

    • La fábrica del controlador de tags es un componente OSGi (singleton) responsable de generar instancias de su controlador de tags.
    • su fábrica del controlador de tags debe exponer una propiedad OSGi denominada “tagpattern.name”, cuyo valor se compara con la tag HTML de entrada.
    • Si hay varios controladores de tag que coinciden con la tag HTML de entrada, se elige el que tenga una clasificación superior. La clasificación en sí se expone como una propiedad OSGi service.ranking.
    • TagHandlerFactory es un componente OSGi. Deberá suministrar todas las referencias al TagHandler mediante esta fábrica.
  3. Asegúrese de que TagHandlerFactory tenga una clasificación mejor si desea anular la predeterminada.

Preparar el HTML para su importación

Después de crear una página de importación, puede importar la página de aterrizaje HTML completa. Para importar su página de aterrizaje HTML, primero debe comprimir su contenido en un paquete de diseño. El paquete de diseño contiene la página de aterrizaje HTML y los recursos a los que hace referencia (imágenes, css, iconos, scripts, etc.).

La hoja de trucos siguiente le muestra cómo preparar el HTML para la importación:

Hoja de página de aterrizaje

Obtener archivo

Diseño y requisitos del archivo comprimido

NOTA

Los archivos comprimidos solo pueden contener una parte de una página o una página HTML.

A continuación se muestra un ejemplo de diseño de archivo comprimido:

  • /index.html -> Archivo HTML de página de aterrizaje
  • /css -> para agregar a la clientlib CSS
  • /img -> todas las imágenes y recursos
  • /js -> para agregar a la clientlib JS

El diseño se basa en el diseño de las recomendaciones HTML5 Boilerplate. Obtenga más información en https://html5boilerplate.com/

NOTA

Como mínimo, el paquete de diseño debe contener un archivo index.html en el nivel raíz. Si la página de aterrizaje que se va a importar también tiene una versión móvil, el zip debe contener un mobile.index.html junto con index.html en el nivel raíz.

Preparación del HTML de la página de aterrizaje

Para poder importar el HTML, debe añadir un div lienzo al HTML de la página de aterrizaje.

El div lienzo es un html div con id="cqcanvas" que debe insertarse dentro de la etiqueta HTML <body> y debe envolver el contenido que se va a convertir.

A continuación se muestra un ejemplo de fragmento de HTML de página de lanzamiento tras añadir el div lienzo:

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

Preparación del HTML para incluir componentes de AEM editables

Al importar una página de aterrizaje, puede elegir importarla tal cual, lo que significa que, tras importarla, no podrá modificar ninguno de los elementos importados en AEM (pero podrá añadir componentes de AEM adicionales a la página).

Es posible que, antes de importar la página de aterrizaje, desee convertir ciertas partes de la página de aterrizaje en componentes de AEM editables. Esto le permite editar con rapidez partes de la página de aterrizaje incluso tras importar el diseño de dicha página.

Para ello, añada el data-cq-component al componente apropiado del archivo HTML que desee importar.

En la sección siguiente se describe cómo editar su archivo HTML para poder convertir ciertas partes de sus páginas de aterrizaje en diferentes componentes de AEM editables. Los componentes se describen en detalle en Páginas de aterrizaje Componentes.

NOTA

El código HTML que se utiliza para convertir partes de la página de aterrizaje en componentes de AEM tiene una forma larga y una declaración abreviada de tag. Ambas se describen para cada componente.

Restricciones

Antes de importar, tenga en cuenta las restricciones siguientes:

Los atributos como class o id aplicados a La etiqueta &lt;body> no se conserva

Si se aplica un atributo como id o class en la etiqueta body, por ejemplo <body id="container">, no se conserva después de la importación. Por lo tanto, el diseño que se importa no debe tener dependencias en los atributos aplicados en la etiqueta <body>.

Arrastre y colocación del archivo comprimido

La carga de archivos comprimidos de arrastrar y soltar no es compatible con Internet Explorer y Firefox versión 3.6 y anteriores. Para cargar un diseño con estos navegadores, haga clic en la zona en la que desea soltar los archivos para abrir un cuadro de diálogo de carga de archivos y cargar el diseño.

Los navegadores que admiten "arrastrar y soltar" del zip de diseño son Chrome, Safari5.x, Firefox 4 y versiones posteriores.

No se admite Modernizr

Modernizr.js es una herramienta basada en javascript que detecta capacidades nativas de los navegadores y determina si son o no adecuadas para elementos HTML5. Los diseños que utilizan Modernizr para mejorar la compatibilidad con versiones anteriores de diferentes navegadores pueden causar problemas de importación en la solución de página de aterrizaje. No se admiten los scripts de Modernizr.js con el importador de diseños.

No se conservan las propiedades de página cuando se importa un paquete de diseño

Todas las propiedades de página (e.g. dominio personalizado, aplicación de HTTPS, etc.) definidas antes de importar el paquete de diseño para una página que utilice la plantilla de página de aterrizaje en blanco se perderán tras la importación del diseño. Por lo tanto, se recomienda definir las propiedades de página tras importar el paquete de diseño.

Se supuso que el código solo HTML era

Tras la importación, el marcado se corrige por motivos de seguridad y para evitar la importación y publicación del marcado que no sea válido. Debido a ello, el marcado que sea solo HTML y cualquier otra forma de elemento, como el SVG incorporado o los componentes web se eliminarán.

Texto

Código HTML para insertar un componente de texto (foundation/components/text) en el HTML dentro del paquete de diseño:

<div data-cq-component="text"> <p>This is some editable text</p> </div>

Si se incluye el código anterior en el HTML, ocurrirá lo siguiente:

  • Crea un componente de texto AEM editable ( sling:resourceType=foundation/components/text) en la página de aterrizaje creada tras importar el paquete de diseño.
  • Se define la propiedad text del componente de texto creado en el HTML delimitado por el div.

Declaración abreviada de tag de componente:

<p data-cq-component="text">Text component shorthand</p>

Texto con una lista

Para añadir texto con una lista:

que puede editarse en el 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 con color

Para añadir texto con color (rosa) que puede editarse en el 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

Código HTML para insertar un componente de título ( wcm/landingpage/components/title) en el HTML dentro del paquete de diseño:

<div data-cq-component="title"> <h1>This is some editable title text</h1> </div>

Si se incluye el código anterior en el HTML, ocurrirá lo siguiente:

  • Crea un componente de título de AEM editable ( sling:resourceType=wcm/landingpage/components/title) en la página de aterrizaje creada tras importar el paquete de diseño.
  • La propiedadjcr:title del componente de título creado se configurará en el texto dentro de la tag de encabezado encerrada en el div.
  • La propiedad type se configurará en la tag de encabezado, en este caso h1.

El componente de título admite 7 tipos: h1, h2, h3, h4, h5, h6 y default.

Declaración abreviada de tag de componente:

<h1 data-cq-component="title">Title component shorthand</h1>

Imagen

Código HTML para insertar un componente de imagen (foundation/components/image) en el HTML dentro del paquete de diseño:

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

Si se incluye el código anterior en el HTML, ocurrirá lo siguiente:

  • Crea un componente de imagen AEM editable ( sling:resourceType=foundation/components/image) en la página de aterrizaje creada tras importar el paquete de diseño.
  • La propiedad fileReference del componente de imagen creado se configurará en la ruta en la que se importará la imagen especificada en el atributo src.
  • Establece la propiedad alt en el valor del atributo alt en la etiqueta img.
  • Establece la propiedad title en el valor del atributo title en la etiqueta img.
  • Establece la propiedad width en el valor del atributo width de la etiqueta img.
  • Establece la propiedad height en el valor del atributo height de la etiqueta img.

Declaración abreviada de tag de componente:

<img data-cq-component="image" src="test.png" alt="Image component shorthand"/>

No se admite img src de URL absoluta dentro del div del componente imagen

Si se intenta una etiqueta <img> con una dirección URL absoluta src para la conversión de componentes, se genera una excepción UnsupportedTagContentException adecuada. Por ejemplo, no se admite lo siguiente:

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

<img src="https://cdn.printfriendly.com/pf-button.gif" alt="Print Friendly and PDF"/>

</div>

Aparte de esto, se admiten las imágenes de URL absoluta para las tags img que no formen parte del div componente de imagen.

Componentes de llamada a acción

Puede marcar parte de la página de aterrizaje para importarla como un "componente de llamada a acción editable"; estos componentes de llamada a acción importados se pueden editar después de importar la página de aterrizaje. AEM incluye los componentes de llamada a acción siguientes:

  • Vínculo de pulsaciones: le permite añadir un vínculo de texto que dirigirá al visitante a la URL de destino cuando haga clic en él.
  • Vínculo gráfico: le permite añadir una imagen que dirigirá al visitante a una URL de destino cuando haga clic en ella.

Este componente de llamada a acción puede utliizarse para añadir un vínculo de texto en la página de aterrizaje.

Propiedades admitidas

  • Etiqueta, con opciones en negrita, cursiva y subrayada
  • URL de destino, admite URL de AEM y de terceros
  • Opciones de procesamiento de página (misma ventana, nueva ventana, etc.)

La tag HTML debe incluir el componente de pulsaciones en el archivo comprimido importado. Aquí href se asigna a la dirección URL del destinatario, "Detalles del producto de la Vista" se asigna a la etiqueta, etc.

<div id="cqcanvas">
.
.
                <div data-cq-component="clickThroughLink">
        <a href="/content/we-retail/us/en/products/equipment/snow-sports/flying-snowboard.html?lang=es">View Product Details  ></a>
  </div>
.
.
</div>

Este componente puede utilizarse en cualquier aplicación independiente o importarse de un archivo comprimido.

Declaración abreviada de tag de componente:

<a href="/somelink.html?lang=es" data-cq-component="clickThroughLink">Click Through Link shorthand</a>

Este componente de llamada a acción puede utilizarse para añadir imágenes gráficas con un vínculo en la página de aterrizaje. La imagen puede ser un botón simple o cualquier imagen gráfica como fondo. Cuando se hace clic en la imagen, se llevará al usuario a una URL de destino especificada en las propiedades de componente. Forma parte del grupo "Llamada a acción".

Propiedades admitidas

  • Rotación, recorte de imágenes
  • Texto por pase, descripción tamaño en píxeles
  • URL de destino, admite URL de AEM y de terceros
  • Opciones de procesamiento de página (misma ventana, nueva ventana, etc.)

Tag HTML para incluir un componente de vínculo gráfico en el archivo comprimido importado. Aquí href se asignará a URL de destinatario, img src será la imagen de procesamiento, "title" se tomará como texto al pasar el ratón, etc.

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

Declaración abreviada de tag de componente:

<a href="/somelink.html?lang=es" data-cq-component="clickThroughGraphicalLink"><img src="linkimage.png" alt="Click Through Graphical Link shorthand"/></a>
NOTA

Para crear un vínculo gráfico de pulsaciones, debe envolver una etiqueta de anclaje y la etiqueta de imagen dentro de un div con el atributo data-cq-component="clickthroughgraphicallink".

p. ej.<div data-cq-component="clickthroughlink"> <a href="https://myURLhere/"><img src="image source here"></a> </div>

No se admiten otros métodos para asociar una imagen con una tag de anclaje mediante CSS; por ejemplo, el código siguiente no funcionará:

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

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

</div>

con un css .hasbackground { background-image: pathtoimage } asociado

Formulario de posibles clientes

Los formularios de posibles clientes se utilizan para recopilar información de perfil de un visitante o posible cliente. Dicha información puede guardarse y utilizarse posteriormente para realizar campañas de marketing eficaces basadas en la información. Esta información suele incluir título, nombre, correo electrónico, fecha de nacimiento, dirección, intereses, etc. Forma parte del grupo "Llamada a acción: formulario de posibles clientes".

Funciones admitidas

  • Campos de posibles clientes predefinidos: nombre, apellidos, dirección, dob, sexo, acerca de, userId, emailId, botón de envío están disponibles en la barra de tareas. Tan solo tiene que arrastrar y soltar el componente deseado en el formulario de posibles clientes.

  • Con estos componentes, se puede diseñar un formulario de posibles clientes independiente; estos campos corresponden con los campos del formulario de posibles clientes. En las aplicaciones independientes o de archivos comprimidos importados, el usuario puede añadir campos suplementarios mediante los campos de Llamada a acción: formulario de posibles clientes o cq:form, darles un nombre y diseñarlos como prefiera.

  • Asigne campos de formulario de posibles clientes utilizando nombres predefinidos específicos del formulario de posibles clientes de llamada a acción, por ejemplo: firstName para el nombre en el formulario de posibles clientes, etc.

  • Los campos que no se asignen a un formulario de posibles clientes se asignarán a componentes de cq:form: texto, botón de opción, casilla de verificación, menú desplegable, oculto, contraseña.

  • El usuario puede especificar el título mediante la tag “label” y escoger el estilo con el atributo de estilo “class” (solo disponible para los componentes de Llamada a acción: formulario de posibles clientes).

  • La página de agradecimiento y la lista de suscripción se pueden proporcionar como parámetros ocultos del formulario (presentes en index.htm) o se pueden agregar o editar desde la barra de edición de "Inicio del formulario de posibles clientes"

    <input type="hidden" name="redirectUrl" value="/content/we-retail/en/user/register/thank_you" />

    <input type="hidden" name="groupName" value="leadForm" />

  • Las restricciones como - requeridas pueden proporcionarse desde la configuración de edición de cada componente.

Tag HTML para incluir un componente de vínculo gráfico en el archivo comprimido importado. Aquí "firstName" se asigna a firstName del formulario de posibles clientes, etc., excepto para las casillas de verificación: estas dos casillas de verificación se asignan al componente desplegable 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

El componente parsys de AEM es un componente contenedor que puede contener otros componentes de AEM. Es posible añadir un componente parsys al HTML importado, lo que permite al usuario añadir y eliminar componentes de AEM editables en la página de aterrizaje tras haberla importado.

El sistema de párrafos permite a los usuarios añadir componentes mediante la barra de tareas.

Código HTML para insertar un componente parsys (foundation/components/parsys) en el HTML del paquete de diseño:

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

Si se incluye el código anterior, pasará lo siguiente:

  • Se insertará un componente parsys de AEM (foundation/components/parsys) en la página de aterrizaje creada tras importar el paquete de diseño.
  • Se inicializará la barra de tareas con los componentes predeterminados. Se pueden arrastrar componentes nuevos de la barra de tareas al componente parsys para añadirlos a la página de aterrizaje.
  • En parsys también hay dos componentes de título.

Destino

El componente de destino muestra el contenido de una experiencia en la página. Puede haber muchas experiencias creadas en una campaña y el componente de destino mostrará de forma dinámica el contenido de experiencias distintas a diferentes usuarios que visiten la página.

El código HTML para insertar un componente de destino y crear también experiencias distintas en una campaña:

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

Opciones de importación adicionales

Además de especificar si los componentes que se importarán serán componentes de AEM editables, también puede configurar las opciones siguientes antes de importar el paquete de diseño:

  • Configurar las propiedades de página extrayendo los metadatos definidos en el HTML importado.
  • Especificar la codificación del juego de caracteres en HTML.
  • Superposición de la plantilla de página del importador.

Configuración de las propiedades de página extrayendo los metadatos definidos en el HTML importado

El importador de diseños debe extraer y conservar los metadatos siguientes declarados en el encabezado del HTML importado como propiedad "jcr:description":

  • <meta name="description" content="">

El importador de diseños debe extraer y conservar el atributo Lang establecido en la etiqueta HTML como propiedad "jcr:language"

  • <html lang="en">

Especificación de la codificación del juego de caracteres en HTML

El importador de diseños lee la codificación especificada en el HTML importado. La codificación puede especificarse como se indica:

<meta charset="UTF-8">

O

<meta http-equiv="content-type" content="text/html;charset=utf-8">

Si no se especifica ninguna codificación en el HTML importado, la codificación predeterminada del importador de diseños es UTF-8.

Superposición de la plantilla

La plantilla Página de aterrizaje en blanco se puede superponer creando una nueva en: /apps/<appName>/designimporter/templates/<templateName>

Los pasos para crear una nueva plantilla en AEM se explican aquí.

Referencia a un componente desde la página de aterrizaje

Supongamos que tiene un componente al que desea hacer referencia en el HTML mediante un atributo data-cq-component de forma que el importador de diseños procese un componente "incluir en este lugar". Por ejemplo: desea hacer referencia al componente de tabla ( resourceType = /libs/foundation/components/table). Se debe añadir lo siguiente al HTML:

<div data-cq-component="/libs/foundation/components/table?lang=es">foundation table</div>

La ruta en data-cq-component debería ser el resourceType del componente.

Prácticas recomendadas

No se recomienda utilizar selectores de CSS similares a los siguientes con elementos marcados para la conversión de componentes durante la importación.

E > F un elemento secundario F de un elemento E Combinador secundario
E &gt; F un elemento F precedido inmediatamente por un elemento E Combinador adyacente del mismo nivel
E ~ F un elemento F precedido por un elemento E Combinador general del mismo nivel
E:root un elemento E, raíz del documento Pseudoclases estructurales
E:nth-child(n) un elemento E, el elemento secundario n del primario Pseudoclases estructurales
E:nth-last-child(n) un elemento E, el elemento secundario n del primario, contando a partir del último Pseudoclases estructurales
E:nth-of-type(n) un elemento E, el elemento similar n de este tipo Pseudoclases estructurales
E:nth-last-of-type(n) un elemento E, el elemento similar n de su tipo, contando a partir del último Pseudoclases estructurales

Esto se debe a que después de la importación se agregan elementos HTML adicionales como la etiqueta <div> al HTML generado.

  • No se recomiendan los scripts que dependen de una estructura similar a la siguiente para elementos marcados para su conversión en componentes de AEM.
  • No se recomienda el uso de estilos en las etiquetas de marcado para la conversión de componentes como <div data-cq-component="&ast;">.
  • El formato de diseño debería seguir las recomendaciones de HTML5 Boilerplate. Lea más sobre: https://html5boilerplate.com/.

Configuración de módulos OSGI

Los componentes que exponen propiedades configurables mediante la consola OSGI son los siguientes:

  • Importador de diseños de páginas de aterrizaje
  • Generador de páginas de aterrizaje
  • Generador de páginas de aterrizaje móviles
  • Preprocesador de entradas de páginas de aterrizaje

La tabla que aparece a continuación describe brevemente las propiedades:

Componente Nombre de propiedad Descripción de la propiedad
Importador de diseños de páginas de aterrizaje Filtro de extracción Lista de expresiones regulares que se utilizará para filtrar archivos de la extracción.
Las entradas de archivos comprimidos que coincidan con los patrones especificados se excluirán de la extracción
Generador de páginas de aterrizaje Patrón de archivos El Generador de Páginas de aterrizaje puede configurarse para gestionar archivos HTML que coincidan con una expresión normal, tal como se define en el patrón de archivos.
Generador de páginas de aterrizaje móviles Patrón de archivos El Generador de Páginas de aterrizaje puede configurarse para gestionar archivos HTML que coincidan con una expresión normal, tal como se define en el patrón de archivos.
Grupos de dispositivos Lista de grupos de dispositivos que se admiten.
Preprocesador de entradas de páginas de aterrizaje Patrón de búsqueda Patrón que se buscará en el contenido de entradas del archivo. Esta expresión regular coincide con el contenido de entrada línea por línea. Una vez coincidido, el texto coincidente se sustituye por el patrón de reemplazo especificado.

Consulte la nota siguiente sobre las restricciones actuales del preprocesador de entradas de páginas de aterrizaje.
Patrón de sustitución Patrón que sustituye las coincidencias encontradas. Puede utilizar referencias de grupo regex como $1, $2. Además, este patrón admite palabras clave como {designPath} que se resuelven con el valor real durante la importación.
NOTA

Restricciones actuales del preprocesador de entradas de páginas de aterrizaje:
Si necesita realizar cambios en el patrón de búsqueda, al abrir el editor de propiedades felix deberá añadir caracteres de barra invertida de forma manual para evitar los metacaracteres regex. Si no añade dichos caracteres de forma manual, regex se considerará no válido y no sustituirá el anterior.

Por ejemplo, si la configuración predeterminada es

/\&ast *CQ_DESIGN_PATH *\*/ *(['"])

Y debe reemplazar CQ_DESIGN_PATH por VIPURL en el patrón de búsqueda, entonces el patrón de búsqueda debería tener este aspecto:

/\* *VIPURL *\*/ *(['"])

Solución de problemas

Al importar el paquete de diseño, pueden producirse varios errores, que se describen en esta sección.

Inicialización de la barra de tareas con los componentes relevantes de la página de aterrizaje

Si el paquete de diseño contiene un código de componente parsys, tras la importación, la barra de tareas comienza a mostrar los componentes relevantes de la página de aterrizaje. Puede arrastrar y soltar nuevos componentes en el componente parsys de su página de aterrizaje. También puede ir al modo de diseño y añadir nuevos componentes a la barra de tareas.

Se muestran mensajes de error durante la importación

En caso de que se produzcan errores (por ejemplo, el paquete importado no es un archivo comprimido válido), la importación del diseño no importará el paquete y mostrará un mensaje de error en la parte superior de la página, encima del cuadro de arrastrar y soltar. A continuación se muestran ejemplos de errores. Tras corregir el error, puede volver a importar el archivo comprimido actualizado en la misma página de aterrizaje en blanco. Distintos casos en los que se producen errores:

  • El paquete de diseño importado no es un archivo comprimido válido.
  • El paquete de diseño importado no contiene un index.html en el nivel superior.

Advertencias que se muestran tras la importación

En caso de que aparezca alguna advertencia (p. ej., HTML se refiere a imágenes que no existen dentro del paquete), el importador de diseños importará el zip pero, al mismo tiempo, mostrará una lista de problemas/advertencias en el panel de resultados. Al hacer clic en el vínculo de problemas, se mostrará una lista de advertencias que señalan cualquier problema dentro del paquete de diseño. Los siguientes son casos en los que el importador de diseños captura y muestra advertencias:

  • HTML hace referencia a imágenes que no existen dentro del paquete.
  • HTML hace referencia a secuencias de comandos que no existen en el paquete.
  • HTML hace referencia a estilos que no existen dentro del paquete.

¿Dónde se almacenan los archivos del archivo ZIP en AEM?

Tras importar la página de aterrizaje, los archivos (imágenes, css, js, etc.) dentro del paquete de diseño se almacenan en la siguiente ubicación en AEM:

/etc/designs/default/canvas/content/campaigns/<name of brand>/<name of campaign>/<name of landing page>

Supongamos que la página de aterrizaje se crea bajo la campaña We.Retail y que el nombre de la página de aterrizaje es myBlankLandingPage, la ubicación en la que se almacenan los archivos Zip es la siguiente:

/etc/designs/default/canvas/content/campaigns/geometrixx/myBlankLandingPage

No se conserva el formato

Al crear un CSS, tenga en cuenta las restricciones siguientes:

Si un texto y una imagen (editable) son como los siguientes:

<div class="box">
<p><div data-cq-component="image"><img src="assets/image.jpg" width="115"
height="116" /></div>Some Text </p>
</div>

con una CSS aplicada en la clase box de la siguiente manera:

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

A continuación, box img se utiliza en el importador de diseños, parece que la página de aterrizaje resultante no ha conservado el formato. Para solucionarlo, tenga en cuenta que AEM añade etiquetas div en el CSS y vuelva a escribir el código como corresponda. De lo contrario, ciertas reglas de CSS no serán válidas.

.box img

{ float:right; margin: 0 0 5px 5px; border: 1px #343434 solid; }
NOTA

Además, los diseñadores deben tener en cuenta que el importador solo reconoce el código dentro de la etiqueta id=cqcanvas; de lo contrario, el diseño no se conserva.

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now