Personalización de los componentes principales del CIF de AEM

El Proyecto Venia del CIF es una base de código de referencia para utilizar Componentes principales del CIF. En este tutorial ampliará aún más la variable Teaser de productos para mostrar un atributo personalizado de Adobe Commerce. También obtendrá más información acerca de la integración de GraphQL AEM entre los componentes principales del CIF y Adobe Commerce, y los enlaces de extensión que ofrecen los componentes principales del CIF.

Qué va a generar

La marca Venia ha empezado recientemente a fabricar algunos productos con materiales sostenibles y la empresa desea mostrar un Respetuoso con el medio ambiente como parte del teaser de productos. Se creará un nuevo atributo personalizado en Adobe Commerce para indicar si un producto utiliza el Respetuoso con el medio ambiente material. A continuación, este atributo personalizado se agregará como parte de la consulta de GraphQL y se mostrará en el teaser de productos para productos especificados.

Requisitos previos

Se requiere un entorno de desarrollo local para completar este tutorial. AEM Esto incluye una instancia de ejecución de la instancia de que está configurada y conectada a una instancia de Adobe Commerce. Revise los requisitos y pasos para AEM configuración de un desarrollo local con SDK as a Cloud Service. Para seguir el tutorial por completo, necesitará permisos para agregar Atributos para un producto en Adobe Commerce.

También necesitará el IDE de GraphQL, como GraphiQL o una extensión del explorador para ejecutar los ejemplos de código y los tutoriales. Si instala una extensión de explorador, asegúrese de que tenga la capacidad de establecer encabezados de solicitud. En Google Chrome, Cliente de Altair GraphQL es una extensión que puede realizar el trabajo.

Clonar el proyecto Venia

Vamos a clonar el Proyecto Venia y, a continuación, invalide los estilos predeterminados.

1. Ejecute el siguiente comando de Git para clonar el proyecto:

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

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

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

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

4. En este punto, debería tener una versión de trabajo de una tienda conectada a una instancia de Adobe Commerce. Vaya a US > Home página 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.

   

Creación del teaser de productos

El componente teaser de productos se ampliará a lo largo de este tutorial. Como primer paso, añada una nueva instancia del teaser de productos a la página de inicio para comprender la funcionalidad de línea de base.

1. Vaya hasta la Página de inicio del sitio: http://localhost:4502/editor.html/content/acme/us/en.html

2. Inserte un nuevo componente teaser de productos en el contenedor del diseño principal de la página.

   

3. Expanda el panel lateral (si no está activado) y cambie desde menú desplegable del buscador de recursos a Productos. Esto debería mostrar una lista de los productos disponibles de una instancia de Adobe Commerce conectada. Seleccione un producto y arrástrelo y suéltelo en el componente teaser de productos de la página.

   

   NOTA

   Tenga en cuenta que también puede configurar el producto mostrado configurando el componente con el cuadro de diálogo (haga clic en el icono de llave inglesa).

4. Ahora debería ver un producto que muestra el teaser de productos. Se muestran el nombre y el precio del producto ya que son atributos predeterminados.

   

Añadir un atributo personalizado en Adobe Commerce

AEM Los productos y los datos de productos que se muestran en la lista de productos se almacenan en Adobe Commerce. A continuación, añada un nuevo atributo para Respetuoso con el medio ambiente como parte del conjunto de atributos del producto mediante la interfaz de usuario de Adobe Commerce.

1. Inicie sesión en su instancia de Adobe Commerce.

2. Vaya a Catálogo > Productos.

3. Actualice el filtro de búsqueda para encontrar el Producto configurable se utiliza cuando se añade al componente Teaser en el ejercicio anterior. Abra el producto en modo de edición.

   

4. En la vista del producto, haga clic en Añadir atributo > Crear nuevo atributo.

5. Rellene el Nuevo atributo formulario con los siguientes valores (dejar la configuración predeterminada para otros valores)

   Conjunto de campos	Etiqueta de campo	Valor
   Propiedades de atributo	Etiqueta de atributo	Respetuoso con el medio ambiente
   Propiedades de atributo	Tipo de entrada de catálogo	Sí/No
   Propiedades de atributo avanzadas	Código de atributo	eco_friendly

   

   Clic Guardar atributo cuando termine.

6. Desplácese hasta la parte inferior del producto y expanda Atributos encabezado. Debería ver el nuevo Respetuoso con el medio ambiente field. Cambie la opción a Sí.

   

   Guardar los cambios en el producto.

   SUGERENCIA

   Más detalles acerca de la administración de Los atributos del producto se encuentran en la guía del usuario de Adobe Commerce.

7. Vaya a Sistema > Herramientas > Administración de caché. Dado que se ha realizado una actualización del esquema de datos, es necesario invalidar algunos de los tipos de caché en Adobe Commerce.

8. Marque la casilla junto a Configuración y envíe el tipo de caché para Actualizar

   

   SUGERENCIA

   Más detalles acerca de La administración de caché se encuentra en la guía del usuario de Adobe Commerce.

Utilizar un IDE de GraphQL para comprobar el atributo

AEM Antes de saltar al código de la, es útil explorar la Información general de GraphQL usar un IDE de GraphQL. La integración de Adobe Commerce AEM con se realiza principalmente mediante una serie de consultas de GraphQL. Comprender y modificar las consultas de GraphQL es una de las formas clave en que se pueden ampliar los componentes principales del CIF.

A continuación, utilice un IDE de GraphQL para comprobar que la variable eco_friendly se ha añadido el atributo al conjunto de atributos del producto. Las capturas de pantalla de este tutorial utilizan la variable Cliente de Altair GraphQL.

1. Abra el IDE de GraphQL e introduzca la dirección URL http://<commerce-server>/graphql en la barra URL del IDE o de la extensión.

2. Añada lo siguiente consulta de productos donde YOUR_SKU es el SKU del producto utilizado en el ejercicio anterior:

     {
       products(
       filter: { sku: { eq: "YOUR_SKU" } }
       ) {
           items {
           name
           sku
           eco_friendly
           }
       }
   }
   

3. Ejecute la consulta y debería obtener una respuesta como la siguiente:

   {
     "data": {
       "products": {
         "items": [
           {
             "name": "Valeria Two-Layer Tank",
             "sku": "VT11",
             "eco_friendly": 1
           }
         ]
       }
     }
   }
   

   

   Observe que el valor de Sí es un número entero de 1. Esto resulta útil cuando escribimos la consulta de GraphQL en Java.

   SUGERENCIA

   Documentación más detallada sobre Adobe Commerce GraphQL se puede encontrar aquí.

Actualización del modelo de Sling para el teaser de productos

A continuación, ampliaremos la lógica empresarial del teaser de productos implementando el modelo Sling. Los modelos de Sling son objetos Java antiguos comunes ("POJO"), impulsados por anotaciones que implementan cualquier lógica comercial necesaria para el componente. Los modelos Sling se utilizan junto con las secuencias de comandos HTL como parte del componente. Seguiremos el patrón de delegación de modelos Sling para que podamos extender las partes del modelo de teaser de productos existente.

Los modelos Sling se implementan como Java y se pueden encontrar en el módulo principal del proyecto generado.

Uso el IDE de su elección para importar el proyecto Venia. Las capturas de pantalla utilizadas son de IDE de código de Visual Studio.

1. En el IDE, vaya a núcleo módulo a: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

   

   MyProductTeaser.java es una interfaz de Java que amplía el CIF ProductTeaser interfaz.

   Ya se ha agregado un nuevo método denominado isShowBadge() para mostrar un distintivo si el producto se considera "Nuevo".

2. Añada un nuevo método isEcoFriendly() en la interfaz:

   @ProviderType
   public interface MyProductTeaser extends ProductTeaser {
       // Extend the existing interface with the additional properties which you
       // want to expose to the HTL template.
       public Boolean isShowBadge();
   
       public Boolean isEcoFriendly();
   }
   

   Este es un nuevo método que introduciremos para encapsular la lógica e indicar si el producto tiene el eco_friendly atributo establecido en Sí o No.

3. A continuación, inspeccione el MyProductTeaserImpl.java en core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

   El patrón de delegación para modelos Sling permite MyProductTeaserImpl para referencia ProductTeaser modelo a través de sling:resourceSuperType propiedad:

   @Self
   @Via(type = ResourceSuperType.class)
   private ProductTeaser productTeaser;
   

   Para todos los métodos que no queremos anular o cambiar, simplemente podemos devolver el valor que la variable ProductTeaser devuelve. Por ejemplo:

   @Override
   public String getImage() {
       return productTeaser.getImage();
   }
   

   Esto minimiza la cantidad de código Java que debe escribir una implementación.

4. AEM Uno de los puntos de extensión adicionales que proporcionan los componentes principales de CIF de la comunidad es el siguiente: AbstractProductRetriever que proporciona acceso a atributos de producto específicos. Inspect el initModel() método:

   import javax.annotation.PostConstruct;
   ...
   @Model(adaptables = SlingHttpServletRequest.class, adapters = MyProductTeaser.class, resourceType = MyProductTeaserImpl.RESOURCE_TYPE)
   public class MyProductTeaserImpl implements MyProductTeaser {
       ...
       private AbstractProductRetriever productRetriever;
   
       /* add this method to initialize the productRetriever */
       @PostConstruct
       public void initModel() {
           productRetriever = productTeaser.getProductRetriever();
   
           if (productRetriever != null) {
               productRetriever.extendProductQueryWith(p -> p.createdAt());
           }
   
       }
   ...
   

   El @PostConstruct Esta anotación garantiza que se llame a este método en cuanto se inicialice el modelo Sling.

   Tenga en cuenta que la consulta de GraphQL del producto ya se ha ampliado con la variable extendProductQueryWith método para recuperar el created_at atributo. Este atributo se utiliza posteriormente como parte de la variable isShowBadge() método.

5. Actualice la consulta de GraphQL para incluir el eco_friendly en la consulta parcial:

   //MyProductTeaserImpl.java
   
   private static final String ECO_FRIENDLY_ATTRIBUTE = "eco_friendly";
   
   @PostConstruct
   public void initModel() {
       productRetriever = productTeaser.getProductRetriever();
   
       if (productRetriever != null) {
           productRetriever.extendProductQueryWith(p -> p
               .createdAt()
               .addCustomSimpleField(ECO_FRIENDLY_ATTRIBUTE)
           );
       }
   }
   

   Añadir al método extendProductQueryWith es una manera eficaz de garantizar que el resto del modelo disponga de atributos de productos adicionales. También minimiza el número de consultas ejecutadas.

   En el código anterior, la variableaddCustomSimpleField se utiliza para recuperar la variable eco_friendly atributo. Esto ilustra cómo se puede consultar cualquier atributo personalizado que forme parte del esquema de Adobe Commerce.

   NOTA

   El createdAt() se ha implementado realmente como parte de la variable Interfaz de producto. Se han implementado la mayoría de los atributos de esquema encontrados con frecuencia, por lo que solo debe utilizarse addCustomSimpleField para atributos verdaderamente personalizados.

6. Añada un registrador para depurar el código Java:

   import org.slf4j.Logger;
   import org.slf4j.LoggerFactory;
   ...
   @Model(adaptables = SlingHttpServletRequest.class, adapters = MyProductTeaser.class, resourceType = MyProductTeaserImpl.RESOURCE_TYPE)
   public class MyProductTeaserImpl implements MyProductTeaser {
   
   private static final Logger LOGGER = LoggerFactory.getLogger(MyProductTeaserImpl.class);
   

7. A continuación, implemente la isEcoFriendly() método:

   @Override
   public Boolean isEcoFriendly() {
   
       Integer ecoFriendlyValue;
       try {
           ecoFriendlyValue = productRetriever.fetchProduct().getAsInteger(ECO_FRIENDLY_ATTRIBUTE);
           if(ecoFriendlyValue != null && ecoFriendlyValue.equals(Integer.valueOf(1))) {
               LOGGER.info("*** Product is Eco Friendly**");
               return true;
           }
       } catch (SchemaViolationError e) {
           LOGGER.error("Error retrieving eco friendly attribute");
       }
       LOGGER.info("*** Product is not Eco Friendly**");
       return false;
   }
   

   En el método anterior, la variable productRetriever se utiliza para recuperar el producto y la getAsInteger() se utiliza para obtener el valor del eco_friendly atributo. En función de las consultas de GraphQL que ejecutamos anteriormente, sabemos que el valor esperado cuando el eco_friendly el atributo se establece en "Sí" es en realidad un número entero de 1.

   Ahora que se ha actualizado el modelo Sling, el marcado del componente debe actualizarse para mostrar realmente un indicador de Respetuoso con el medio ambiente se basa en el modelo Sling.

Personalización del marcado del teaser de productos

Una extensión común de los componentes de AEM es modificar el marcado que genera el componente. Esto se realiza anulando la secuencia de comandos HTL que utiliza el componente para representar su marcado. La plantilla de idioma HTML (HTL) es un idioma de plantilla ligero que los componentes de AEM utilizan para representar dinámicamente el marcado basado en contenido creado, lo que permite la reutilización de los componentes. El teaser de productos, por ejemplo, se puede reutilizar una y otra vez para mostrar diferentes productos.

En nuestro caso, queremos renderizar un titular sobre el teaser para indicar que el producto es "Eco Friendly" basado en un atributo personalizado. El patrón de diseño para personalizar el marcado de un componente es en realidad estándar para todos los componentes AEM, no solo para los componentes principales del CIF de AEM.

1. En el IDE, navegue y expanda ui.apps y expanda la jerarquía de carpetas a: ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser e inspeccione el .content.xml archivo.

   

   <?xml version="1.0" encoding="UTF-8"?>
   <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
       jcr:description="Product Teaser Component"
       jcr:primaryType="cq:Component"
       jcr:title="Product Teaser"
       sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser"
       componentGroup="Venia - Commerce"/>
   

   Arriba se encuentra la definición del componente para el componente teaser de productos en nuestro proyecto. Observe la propiedad sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser". Este es un ejemplo de creación de un componente Proxy. En lugar de copiar y pegar todas las secuencias de comandos HTL del teaser de productos de los componentes principales del CIF de AEM, podemos usar sling:resourceSuperType para heredar todas las funcionalidades.

2. Abra el archivo productteaser.html. Esta es una copia del productteaser.html desde el Teaser del producto CIF

   <!--/* productteaser.html */-->
   <sly
     data-sly-use.product="com.venia.core.models.commerce.MyProductTeaser"
     data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
     data-sly-use.actionsTpl="actions.html"
     data-sly-test.isConfigured="${properties.selection}"
     data-sly-test.hasProduct="${product.url}"
   ></sly>
   

   Observe que el modelo Sling de MyProductTeaser se utiliza y se asigna a product variable.

3. Modificar productteaser.html para realizar una llamada al isEcoFriendly método implementado en el ejercicio anterior:

   ...
   <div
     data-sly-test="${isConfigured && hasProduct}"
     class="item__root"
     data-cmp-is="productteaser"
     data-virtual="${product.virtualProduct}"
   >
     <div data-sly-test="${product.showBadge}" class="item__badge">
       <span>${properties.text || 'New'}</span>
     </div>
     <!--/* Insert call to Eco Friendly here */-->
     <div data-sly-test="${product.ecoFriendly}" class="item__eco">
       <span>Eco Friendly</span>
     </div>
     ...
   </div>
   

   Al llamar a un método del modelo Sling en HTL, la variable get y is del método se borra y la primera letra se convierte en minúsculas. Entonces isShowBadge() pasa a .showBadge y isEcoFriendly pasa a .ecoFriendly. Basado en el valor booleano devuelto desde .isEcoFriendly() determina si la variable <span>Eco Friendly</span> se muestra.

   Más información sobre data-sly-test y otros Puede encontrar instrucciones de bloque HTL aquí.

4. AEM Guarde los cambios e implemente las actualizaciones para que se puedan usar con sus habilidades con Maven, desde un terminal de línea de comandos:

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

5. AEM Abra una nueva ventana del explorador y vaya a la página de y a la página de inicio de la barra de herramientas de Consola OSGi > Estado > Modelos Sling: http://localhost:4502/system/console/status-slingmodels

6. Buscar por MyProductTeaserImpl y debería ver una línea como la siguiente:

   com.venia.core.models.commerce.MyProductTeaserImpl - venia/components/commerce/productteaser
   

   Esto indica que el modelo Sling se ha implementado y asignado correctamente al componente correcto.

7. Actualice a la Página principal de Venia en http://localhost:4502/editor.html/content/venia/us/en.html donde se ha agregado el teaser de productos.

   

   Si el producto tiene el eco_friendly atributo establecido en Sí, debería ver el texto "Eco Friendly" en la página. Intente cambiar a diferentes productos para ver el cambio de comportamiento.

8. AEM A continuación, abra la error.log para ver las instrucciones de registro que hemos agregado. El error.log se encuentra en <AEM SDK Install Location>/crx-quickstart/logs/error.log.

   AEM Busque los registros de la para ver las instrucciones de registro agregadas en el modelo Sling:

   2020-08-28 12:57:03.114 INFO [com.venia.core.models.commerce.MyProductTeaserImpl] *** Product is Eco Friendly**
   ...
   2020-08-28 13:01:00.271 INFO [com.venia.core.models.commerce.MyProductTeaserImpl] *** Product is not Eco Friendly**
   ...
   

   PRECAUCIÓN

   También puede ver algunos seguimientos de pila si el producto utilizado en el teaser no tiene el eco_friendly como parte de su conjunto de atributos.

Añadir estilos para la insignia ecológica

En este punto, la lógica de cuándo mostrar la variable Respetuoso con el medio ambiente El distintivo funciona, pero el texto sin formato podría utilizar algunos estilos. A continuación, añada un icono y estilos a ui.frontend para completar la implementación.

1. Descargue la eco_friendly.svg archivo. Se utilizará como el Respetuoso con el medio ambiente insignia.

2. Vuelva al IDE y vaya al ui.frontend carpeta.

3. Añada el eco_friendly.svg archivo a la ui.frontend/src/main/resources/images carpeta:

   

4. Abra el archivo productteaser.scss en ui.frontend/src/main/styles/commerce/_productteaser.scss.

5. Agregue las siguientes reglas Sass dentro de la variable .productteaser clase:

   .productteaser {
       ...
       .item__eco {
           width: 60px;
           height: 60px;
           left: 0px;
           overflow: hidden;
           position: absolute;
           padding: 5px;
   
       span {
           display: block;
           position: absolute;
           width: 45px;
           height: 45px;
           text-indent: -9999px;
           background: no-repeat center center url('../resources/images/eco_friendly.svg');
           }
       }
   ...
   }
   

   NOTA

   Desproteger Diseño de componentes principales del CIF para obtener más información sobre los flujos de trabajo front-end.

6. AEM Guarde los cambios e implemente las actualizaciones para que se puedan usar con sus habilidades con Maven, desde un terminal de línea de comandos:

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

7. Actualice a la Página principal de Venia en http://localhost:4502/editor.html/content/venia/us/en.html donde se ha agregado el teaser de productos.

   

Felicitaciones

Acaba de personalizar su primer componente del CIF de AEM. Descargue la archivos de solución finalizados aquí.

Desafío para una bonificación

Revise la funcionalidad de Nuevo que ya se ha implementado en el teaser de productos. Intente añadir una casilla de verificación adicional para que los autores controlen cuándo se Respetuoso con el medio ambiente debe mostrarse el distintivo. Deberá actualizar el cuadro de diálogo del componente en ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser/_cq_dialog/.content.xml.

Recursos adicionales

• Tipo de archivo de AEM
• Componentes principales del CIF de AEM
• Personalización de los componentes principales del CIF de AEM
• Personalización de componentes principales
• Introducción a AEM Sites
• Uso del selector de productos y categorías del CIF

Recursos de Business.Adobe.com