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

Ejecute el siguiente comando de Git para poder 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

AEM Añada las configuraciones de OSGi necesarias para poder conectar la instancia de a una instancia de Adobe Commerce o agregar las configuraciones al proyecto 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 archivos son 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] ------------------------------------------------------------------------

Inspect la salida del terminal. Observe 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 compila el proyecto de Webpack y almacena en déclencheur la generación de la biblioteca de cliente.

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

Inspect 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 archivo de configuración es para aem-clientlib-generator y determina dónde y cómo se transforman el CSS compilado y el JavaScript AEM en una biblioteca de cliente de la.

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

Este archivo está site.css copiado en el proyecto ui.apps. Ahora forma parte de una biblioteca de cliente denominada clientlib-site con una categoría de venia.site. AEM Una vez que el archivo forme parte del módulo ui.apps, se puede implementar para que se ejecute en el módulo de la interfaz de usuario de la interfaz de usuario de.

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.

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

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

AEM clientlib-grid: incluye CSS para habilitar la característica Cuadrícula interactiva de la aplicación de la aplicación de la forma de habilitar la aplicación de la forma de. AEM AEM El uso de la cuadrícula de habilita Modo de diseño en el Editor de diseños 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.

Inspect cambió los archivos customheaderlibs.html y customfooterlibs.html por 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.

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

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

AEM Esta página se abre sin que se haya cargado ninguno de los JavaScript de autor de la, 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 AEM, se recomienda utilizar este parámetro para simplificar la página sin nada del autor de la.

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 archivos son los archivos CSS y JavaScript compilados derivados del módulo ui.frontend.

AEM Vaya a la Página principal del sitio dentro del Editor de la: 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 ha abierto la plantilla Página de aterrizaje en la que se basa la página Hogar.

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

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

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

• venia.dependencies: proporciona todas las bibliotecas de proveedores de las que depende venia.site.
• venia.site - 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, se garantiza 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 son iguales. 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 el 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 que el HTML copió en el paso anterior.

Busque las "inclusiones" de 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>

Estas "inclusiones" se quitan porque representan la versión compilada de CSS y JavaScript generada por el módulo ui.frontend. AEM Deje las demás bibliotecas de cliente tal como se van a proxy desde la instancia de la instancia de la instancia de 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

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

AEM Vaya a http://localhost:8080/ en una nueva pestaña con el mismo explorador que una instancia de inicio de sesión de la aplicación de la que se ha iniciado sesión. 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 poder 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:

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

AEM Implemente las actualizaciones para que se utilicen 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.