Show Menu
TEMAS×

Personalización de los componentes principales del CIF de AEM

El proyecto CIF Venia es una base de código de referencia para el uso de componentes principales CIF. En este tutorial ampliará el componente Product Teaser para mostrar un atributo personalizado del Magento. También aprenderá más sobre la integración de GraphQL entre AEM y Magento y los enlaces de extensión proporcionados por los componentes principales de CIF.
Utilice el arquetipo Proyecto AEM al iniciar su propia implementación comercial.

Qué va a generar

La marca Venia comenzó recientemente a fabricar algunos productos utilizando materiales sostenibles y el negocio quiere mostrar una marca Eco Friendly como parte del teaser de productos. Se creará un nuevo atributo personalizado en Magento para indicar si un producto utiliza el material ecológico . Este atributo personalizado se agregará como parte de la consulta de GraphQL y se mostrará en el teaser de productos para los productos especificados.

Requisitos previos

Se necesita un entorno de desarrollo local para completar este tutorial. Esto incluye una instancia de AEM en ejecución que está configurada y conectada a una instancia de Magento. Revise los requisitos y pasos para configurar un desarrollo local con AEM como SDK Cloud Service. Para seguir el tutorial por completo, necesitará permisos para agregar atributos a un producto en Magento.
También necesitará el IDE de GraphQL como GraphiQL o una extensión del explorador para ejecutar los tutoriales y ejemplos de código. Si instala una extensión de explorador, asegúrese de que puede establecer encabezados de solicitud. En Google Chrome, Altair GraphQL Client es una extensión que puede realizar el trabajo.

Clonar el proyecto de Venia

Clonaremos el proyecto Venia y luego anularemos los estilos predeterminados.
Siéntase libre de usar un proyecto existente (basado en el Arquetipo de Proyecto AEM con CIF incluido) y omita esta sección.
  1. Ejecute el siguiente comando 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 -PautoInstallPackage,cloud
    
    
  3. Añada las configuraciones de OSGi necesarias para conectar la instancia de AEM a una instancia de Magento 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 Magento. Navigate to the US > Home page at: 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 Magento está funcionando.

Creación del teaser de productos

El componente teaser de producto se ampliará a lo largo de este tutorial. Como primer paso, agregue 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 conectada a Magento. Seleccione un producto y arrástrelo y suéltelo en el componente teaser de productos de la página.
    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 Magento

Los productos y los datos del producto mostrados en AEM se almacenan en Magento. A continuación, añada un nuevo atributo para Eco Friendly como parte del atributo de producto definido mediante la interfaz de usuario del Magento.
¿Ya tiene un atributo Sí/No personalizado como parte del conjunto de atributos de producto? No dude en usarla y omitir esta sección.
  1. Inicie sesión en la instancia de Magento.
  2. Vaya a Catálogo > Productos .
  3. Actualice el filtro de búsqueda para encontrar el producto ​configurable utilizado cuando se agregó 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 formulario Nuevo atributo con los siguientes valores (deje la configuración predeterminada para otros valores)
    Conjunto de campos
    Etiqueta de campo
    Value
    Propiedades del atributo
    Etiqueta de atributo
    Eco amigable
    Propiedades del atributo
    Tipo de entrada de catálogo
    Sí/No
    Propiedades de atributos avanzadas
    Código de atributo
    eco_friendly
    Haga clic en Guardar atributo cuando termine.
  6. Desplácese hasta la parte inferior del producto y expanda el encabezado Atributos . Debería ver el nuevo campo Eco-Amigable . Cambie el conmutador a .
    Guarde los cambios en el producto.
    Encontrará más información sobre la administración de atributos de producto en la guía de usuario del Magento.
  7. Vaya a Sistema > Herramientas > Administración de caché . Dado que se ha realizado una actualización en el esquema de datos, es necesario invalidar algunos de los tipos de caché en Magento.
  8. Marque la casilla junto a Configuración y envíe el tipo de caché para Actualizar
    Encontrará más detalles sobre la administración de caché en la guía de usuario de Magento.

Usar un IDE de GraphQL para verificar el atributo

Antes de pasar a AEM código, es útil explorar el Magento GraphQL mediante un IDE de GraphQL. La integración del Magento con AEM se realiza principalmente mediante una serie de consultas GraphQL. El comprender y modificar las consultas de GraphQL es una de las formas clave de ampliar los componentes principales de CIF.
A continuación, utilice un IDE de GraphQL para comprobar que el eco_friendly atributo se ha agregado al conjunto de atributos del producto. Las capturas de pantalla de este tutorial están usando el cliente Altair GraphQL .
  1. Abra el IDE de GraphQL e introduzca la URL http://<magento-server>/graphql en la barra URL de su IDE o extensión.
  2. Añada la 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 debe obtener una respuesta como la siguiente:
    {
    "data": {
        "products": {
            "items": [
                {
                "name": "Valeria Two-Layer Tank",
                "sku": "VT11",
                "eco_friendly": 1
                }
            ]
            }
        }
    }
    
    
    Tenga en cuenta que el valor de es un entero de 1 . Esto será útil cuando escribamos la consulta GraphQL en Java.
    Encontrará documentación más detallada sobre Magento GraphQL aquí .

Update the Sling Model for the Product Teaser

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.
Utilice el IDE de su elección para importar el proyecto de Venia. Las capturas de pantalla utilizadas son del IDE de código de Visual Studio.
  1. En su IDE, navegue bajo el módulo principal para: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java .
    MyProductTeaser.java es una interfaz de Java que amplía la interfaz CIF ProductTeaser .
    Ya se ha agregado un nuevo método con el nombre 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 que indica si el producto tiene el eco_friendly atributo establecido en 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 hacer referencia a ProductTeaser un modelo a través de la sling:resourceSuperType propiedad:
    @Self
    @Via(type = ResourceSuperType.class)
    private ProductTeaser productTeaser;
    
    
    For all of the methods that we don't want to override or change, we can simply return the value that the ProductTeaser returns. Por ejemplo:
    @Override
    public String getImage() {
        return productTeaser.getImage();
    }
    
    
    Esto minimiza la cantidad de código Java que debe escribir una implementación.
  4. One of the extra extension points provided by AEM CIF Core Components is the AbstractProductRetriever which provides access to specific product attributes. 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 intialize the proudctRetriever */
        @PostConstruct
        public void initModel() {
            productRetriever = productTeaser.getProductRetriever();
    
            if (productRetriever != null) {
                productRetriever.extendProductQueryWith(p -> p.createdAt());
            }
    
        }
    ...
    
    
    La @PostConstruct anotación garantiza que se llame a este método tan pronto como se inicialice el modelo de Sling.
    Observe que la consulta GraphQL del producto ya se ha ampliado con el extendProductQueryWith método para recuperar el created_at atributo adicional. Este atributo se utiliza posteriormente como parte del isShowBadge() método.
  5. Actualice la consulta GraphQL para incluir el eco_friendly atributo 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 ->
                 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, addCustomSimpleField se utiliza para recuperar el eco_friendly atributo. Esto ilustra cómo se puede realizar la consulta de cualquier atributo personalizado que forme parte del esquema del Magento.
    El createdAt() método se ha implementado como parte de la interfaz del 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 ayudar a 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 el 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, productRetriever se utiliza para recuperar el producto y el getAsInteger() método se utiliza para obtener el valor del eco_friendly atributo. Basándonos en las consultas de GraphQL que ejecutamos anteriormente, sabemos que el valor esperado cuando el eco_friendly atributo se establece en " " es en realidad un entero de 1 .
    Ahora que se ha actualizado el modelo Sling, es necesario actualizar el marcado Component para que muestre un indicador ecológico basado 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 mostrar un letrero 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. In the IDE, navigate and expand the ui.apps module and expand the folder hierarchy to: ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser and inspect the .content.xml file.
    <?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 archivo del teaser de productos 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}">
    
    
    Tenga en cuenta que el modelo de Sling para MyProductTeaser se utiliza y se asigna a la product variable.
  3. Modifique 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>
    ...
    
    
    Al llamar a un método de modelo de Sling en HTL, se borra la get parte y is del método y se baja la primera letra. Entonces isShowBadge() se convierte .showBadge y isEcoFriendly se convierte en .ecoFriendly . Según el valor booleano devuelto por .isEcoFriendly() determina si se muestra el <span>Eco Friendly</span> .
    Puede encontrar más información sobre data-sly-test y otras afirmaciones de bloques HTL aquí .
  4. Guarde los cambios e implemente las actualizaciones en AEM con sus habilidades Maven, desde un terminal de línea de comandos:
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
    
  5. Abra una nueva ventana del navegador y vaya a AEM y a la consola ​OSGi > Estado > Modelos Sling : http://localhost:4502/system/console/status-slingmodels
  6. Busque MyProductTeaserImpl y vea 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 correctamente y se ha asignado al componente correcto.
  7. Actualice a la Página de inicio ​Venia en http://localhost:4502/editor.html/content/venia/us/en.html , donde se ha añadido el teaser de productos.
    Si el producto tiene el eco_friendly atributo establecido en , debería ver el texto "Eco Friendly" en la página. Intente cambiar a diferentes productos para ver el cambio de comportamiento.
  8. A continuación, abra el AEM error.log para ver las sentencias de registro que hemos agregado. El error.log hotel está situado en <AEM SDK Install Location>/crx-quickstart/logs/error.log .
    Busque en los registros de AEM para ver las sentencias de registro agregadas en el modelo de 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**
    ...
    
    
    También puede ver algunos rastros de pila si el producto utilizado en el teaser no tiene el eco_friendly atributo como parte de su conjunto de atributos.

Añadir estilos para la insignia ecológica

En este punto, la lógica para mostrar el distintivo Eco práctico está funcionando, sin embargo el texto sin formato podría utilizar algunos estilos. A continuación, agregue un icono y estilos al ui.frontend módulo para completar la implementación.
  1. Descargue el archivo eco_friendly.svg . Se utilizará como distintivo ecológico .
  2. Vuelva al IDE y vaya a la ui.frontend carpeta.
  3. Añada el eco_friendly.svg archivo a la ui.frontend/src/main/resources/images carpeta:
  4. Open the file productteaser.scss at ui.frontend/src/main/styles/commerce/_productteaser.scss .
  5. Añada las siguientes reglas de Sass dentro de la .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'); 
            }
        }
    ...
    }
    
    
    Consulte Estilo de los componentes principales de CIF para obtener más información sobre los flujos de trabajo front-end.
  6. Guarde los cambios e implemente las actualizaciones en AEM con sus habilidades Maven, desde un terminal de línea de comandos:
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
    
  7. Actualice a la Página de inicio ​Venia en http://localhost:4502/editor.html/content/venia/us/en.html , donde se ha añadido el teaser de productos.

Felicitaciones

Acaba de personalizar su primer componente del CIF de AEM. Download the finished solution files here .

Desafío para una bonificación

Revise la funcionalidad del distintivo Nuevo que ya se ha implementado en el teaser de productos. Intente agregar una casilla de verificación adicional para que los autores controlen cuándo se debe mostrar el distintivo Eco práctico . 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 .