Diseño de los componentes principales del CIF de AEM style-aem-cif-core-components

Ejecute el siguiente comando de Git para clonar el proyecto:

$ git clone git@github.com:adobe/aem-cif-guides-venia.git

Cree e implemente el proyecto en una instancia local de AEM:

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

Añada las configuraciones de OSGi necesarias para conectar la instancia de AEM a una instancia de Adobe Commerce o añadir las configuraciones al proyecto recién creado.

En este punto, debería tener una versión de trabajo de una tienda conectada a una instancia de Adobe Commerce. Vaya a la página US > Home en: http://localhost:4502/editor.html/content/venia/us/en.html.

Hay que ver que la tienda esté usando actualmente el tema de Venia. Al expandir el menú principal de la tienda, verá varias categorías que indican que la conexión con Adobe Commerce está funcionando.

Navegue y expanda el módulo ui.frontend y expanda la jerarquía de carpetas a: ui.frontend/src/main/styles/commerce:

Observe que hay varios archivos Sass (.scss) debajo de la carpeta. Estos son los estilos específicos de Commerce para cada uno de los componentes de Commerce.

Abra el archivo _productteaser.scss.

Actualice la regla .item__image y modifique la regla de borde:

.item__image {
    border: #ea00ff 8px solid; /* <-- modify this rule */
    display: block;
    grid-area: main;
    height: auto;
    opacity: 1;
    transition-duration: 512ms;
    transition-property: opacity, visibility;
    transition-timing-function: ease-out;
    visibility: visible;
    width: 100%;
}

La regla anterior debe agregar un borde rosa en negrita al componente teaser de productos.

Abra una nueva ventana de terminal y vaya a la carpeta ui.frontend:

$ cd <project-location>/aem-cif-guides-venia/ui.frontend

Ejecute el siguiente comando Maven:

$ mvn clean install
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  29.497 s
[INFO] Finished at: 2020-08-25T14:30:44-07:00
[INFO] ------------------------------------------------------------------------

Compruebe la salida de los terminales. Puede ver que el comando Maven ejecutó varios scripts NPM, incluido npm run build. El comando npm run build se define en el archivo package.json y tiene el efecto de compilar el proyecto de Webpack y activar la generación de la biblioteca de cliente.

Inspeccione el archivo ui.frontend/dist/clientlib-site/site.css:

El archivo es la versión compilada y minificada de todos los archivos Sass del proyecto.

Inspeccione el archivo ui.frontend/clientlib.config.js.

/* clientlib.config.js*/
...
// Config for `aem-clientlib-generator`
module.exports = {
    context: BUILD_DIR,
    clientLibRoot: CLIENTLIB_DIR,
    libs: [
        {
            ...libsBaseConfig,
            name: 'clientlib-site',
            categories: ['venia.site'],
            dependencies: ['venia.dependencies', 'aem-core-cif-react-components'],
            assets: {
...

Este es el archivo de configuración para aem-clientlib-generator y determina dónde y cómo el CSS compilado y JavaScript se transformarán en una biblioteca de cliente de AEM.

En el módulo ui.apps, inspeccione el archivo: ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css:

Esto copia el archivo site.css en el proyecto ui.apps. Ahora forma parte de una biblioteca de cliente denominada clientlib-site con una categoría de venia.site. Una vez que el archivo forme parte del módulo ui.apps, se puede implementar en AEM.

A continuación, inspeccione las demás bibliotecas de cliente generadas por el proyecto:

El módulo ui.frontend no administra estas bibliotecas de cliente. En su lugar, estas bibliotecas de cliente incluyen dependencias CSS y JavaScript proporcionadas por Adobe. La definición de estas bibliotecas de cliente se encuentra en el archivo .content.xml debajo de cada carpeta.

clientlib-base: es una biblioteca de cliente vacía que simplemente incrusta las dependencias necesarias de Componentes principales de AEM. La categoría es venia.base.

clientlib-cif: esta es también una biblioteca de cliente vacía que simplemente incrusta las dependencias necesarias de los componentes principales de AEM CIF. La categoría es venia.cif.

clientlib-grid: esto incluye el CSS necesario para habilitar la función Cuadrícula interactiva de AEM. El uso de la cuadrícula de AEM habilita Modo de diseño en el Editor de AEM y permite a los autores de contenido cambiar el tamaño de los componentes. La categoría es venia.grid y está incrustada en la biblioteca venia.base.

Inspeccione los archivos customheaderlibs.html y customfooterlibs.html situados debajo de ui.apps/src/main/content/jcr_root/apps/venia/components/page:

Estos scripts incluyen las bibliotecas venia.base y venia.cif como parte de todas las páginas.

Desde el terminal, cree e implemente todo el proyecto en una instancia local de AEM:

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

Abra una nueva ficha del explorador y vaya a la Página principal del sitio: http://localhost:4502/editor.html/content/venia/us/en.html.

Expanda el buscador de recursos (el carril lateral) en el modo Editar. Cambie el filtro de recursos a Productos.

Arrastre y suelte un nuevo producto en la página de inicio del contenedor de diseño principal:

Debe ver que el teaser de productos ahora tiene un borde rosa brillante en función del cambio de regla CSS creado anteriormente.

Vaya a la Página principal del sitio: http://localhost:4502/editor.html/content/venia/us/en.html.

Seleccione el menú Información de página y haga clic en Ver tal y como aparece publicado:

Esto abre la página sin que se haya cargado ninguna de las API de AEM Author JavaScript, ya que aparecería en el sitio publicado. Observe que la dirección URL tiene el parámetro de consulta ?wcmmode=disabled anexado. Al desarrollar CSS y JavaScript, se recomienda utilizar este parámetro para simplificar la página sin nada del autor de AEM.

Vea el origen de la página y para identificar varias bibliotecas de cliente:

<!DOCTYPE html>
<html lang="en-US">
<head>
    ...
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-site.min.css" type="text/css">
</head>
...
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/core/wcm/components/commons/site/clientlibs/container.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-base.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/core/cif/clientlibs/common.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-cif.min.js"></script>
</body>
</html>

Las bibliotecas de cliente cuando se entregan a la página llevan el prefijo /etc.clientlibs y se proporcionan a través de un proxy para evitar exponer cualquier elemento confidencial en /apps o /libs.

Aviso venia/clientlibs/clientlib-site.min.css y venia/clientlibs/clientlib-site.min.js. Estos son los archivos CSS y JavaScript compilados derivados del módulo ui.frontend.

Vaya a la Página principal del sitio en el Editor de AEM: http://localhost:4502/editor.html/content/venia/us/en.html.

Seleccione el menú Información de la página y haga clic en Editar plantilla:

Se abrirá la plantilla Página de aterrizaje en la que se basa la página Página de inicio.

En la esquina superior izquierda, seleccione el icono Información de página y haga clic en Política de página.

Se abre la directiva de página para la plantilla Página de aterrizaje:

A la derecha puede ver una lista de las bibliotecas de cliente categorías que se incluirán en todas las páginas que usen esta plantilla.

• venia.dependencies: proporciona todas las bibliotecas de proveedores de las que depende venia.site.
• venia.site: esta es la categoría de clientlib-site que genera el módulo ui.frontend.

Observe que otras plantillas utilizan la misma directiva, Página de contenido, Página de aterrizaje, etc. Al reutilizar la misma directiva, podemos garantizar que se incluyan las mismas bibliotecas de cliente en todas las páginas.

La ventaja de utilizar las plantillas y las directivas de página para administrar la inclusión de bibliotecas de cliente es que puede cambiar la directiva por plantilla. Por ejemplo: quizás esté administrando dos marcas diferentes dentro de la misma instancia de AEM. Cada marca tiene su propio estilo único o tema, pero las bibliotecas base y el código serán los mismos. Otro ejemplo: si tiene una biblioteca de cliente más grande que solo desea que aparezca en determinadas páginas, puede crear una directiva de página única solo para esa plantilla.

En el explorador, vaya a la página Inicio y Ver como aparece publicado: http://localhost:4502/content/venia/us/en.html?wcmmode=disabled.

Vea el origen de la página y copie la HTML sin procesar de la página.

Vuelva al IDE de su elección debajo del módulo ui.frontend para abrir el archivo: ui.frontend/src/main/static/index.html

Sobrescribir el contenido de index.html y pegar el HTML copiado en el paso anterior.

Busque las inclusiones para clientlib-site.min.css, clientlib-site.min.js y elimínelas.

<head>
    <!-- remove this link -->
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
    ...
</head>
<body>
    ...
     <!-- remove this link -->
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
</body>

Se quitan porque representan la versión compilada de CSS y JavaScript generada por el módulo ui.frontend. Deje las demás bibliotecas de cliente como se procesarán como proxy desde la instancia de AEM en ejecución.

Abra una nueva ventana de terminal y vaya a la carpeta ui.frontend. Ejecute el comando npm start:

$ cd ui.frontend
$ npm start

Esto inicia el webpack-dev-server en http://localhost:8080/

Vaya a http://localhost:8080/ en una nueva pestaña con el mismo explorador que una instancia de inicio de sesión de AEM. Debería ver la página de inicio de Venia a través del webpack-dev-server:

Deje el webpack-dev-server en ejecución. Se utiliza en el siguiente ejercicio.

En el módulo ui.frontend, vuelva a abrir el archivo _productteaser.scss en ui.frontend/src/main/styles/commerce/_productteaser.scss.

Realice los siguientes cambios en el borde del teaser de productos:

    .item__image {
-       border: #ea00ff 8px solid;
+       border-bottom: 1px solid #c0c0c0;
        display: block;
        grid-area: main;
        height: auto;
        opacity: 1;
        transition-duration: 512ms;
        transition-property: opacity, visibility;
        transition-timing-function: ease-out;
        visibility: visible;
        width: 100%;
    }

Guarde los cambios y el webpack-dev-server debe actualizarse automáticamente con los nuevos estilos.

En el teaser de productos, añada una sombra paralela e incluya esquinas redondeadas.

 .item__root {
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     border-radius: 5px;
     float: left;
     margin-left: 12px;
     margin-right: 12px;
}

.item__root:hover {
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

Actualice el nombre del producto para que aparezca en la parte inferior del teaser y modifique el color del texto.

.item__name {
    color: #000;
    display: block;
    float: left;
    font-size: 22px;
    font-weight: 900;
    line-height: 1em;
    padding: 0.75em;
    text-transform: uppercase;
    width: 75%;
}

Actualice el precio del producto para que también aparezca en la parte inferior del teaser y modifique el color del texto.

.price {
    color: #000;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: 900;
    padding: 0.75em;
    padding-bottom: 2em;
    width: 25%;

    ...

Actualice la consulta de medios en la parte inferior para apilar el nombre y el precio en pantallas de menos de 992px.

@media (max-width: 992px) {
    .productteaser .item__name {
        font-size: 18px;
        width: 100%;
    }
    .productteaser .item__price {
        font-size: 14px;
        width: 100%;
    }
}

Ahora debería ver el estilo de tarjeta reflejado en el webpack-dev-server:

Sin embargo, los cambios aún no se han implementado en AEM. Puede descargar el archivo de la solución aquí.

Implemente las actualizaciones en AEM con sus habilidades con Maven, desde un terminal de línea de comandos:

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

Vuelva al explorador y actualice la página principal: http://localhost:4502/editor.html/content/venia/us/en.html. Debe ver los estilos aplicados del teaser de productos actualizado.

Experimente añadiendo teaser de productos adicionales. Utilice el modo Diseño para cambiar la anchura y el desplazamiento de los componentes y mostrar varios teasers en una fila.