Personalización de componentes principales de Adobe Experience Manager CIF customize-cif-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 -PautoInstallSinglePackage -Pclassic

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

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

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

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.

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.

Inicie sesión en la instancia de Adobe Commerce.

Vaya a Catálogo > Productos.

Actualice el filtro de búsqueda para que pueda encontrar el producto configurable que se utilizó cuando se agregó al componente Teaser en el ejercicio anterior. Abra el producto en modo de edición.

En la vista del producto, haga clic en Agregar atributo > Crear nuevo atributo.

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

Haga clic en Guardar atributo cuando termine.

Desplácese hasta la parte inferior del producto y expanda el encabezado Atributos. Debería ver el nuevo campo Respetuoso con el medio ambiente. Cambie el conmutador a Yes.

Guardar los cambios en el producto.

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

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

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

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

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

En su IDE, vaya al módulo core a: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

CIF MyProductTeaser.java es una interfaz de Java™ que amplía la interfaz de ProductTeaser de la interfaz de la aplicación que se encuentra en el servidor de correo electrónico.

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

Agregar un método isEcoFriendly() a 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();
}

A continuación, inspeccione MyProductTeaserImpl.java a las core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

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

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

Para todos los métodos que no se anulan ni se modifican, puede devolver el valor que devuelve ProductTeaser. Por ejemplo:

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

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

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

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 anotación @PostConstruct garantiza que se llame a este método cuando se inicialice el modelo Sling.

Observe que la consulta de GraphQL del producto ya se ha extendido usando el método extendProductQueryWith para recuperar el atributo created_at adicional. Este atributo se utiliza posteriormente como parte del método isShowBadge().

Actualice la consulta de GraphQL para incluir el atributo 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)
        );
    }
}

Agregar al método extendProductQueryWith es una forma eficaz de asegurarse de que el resto del modelo disponga de atributos de producto adicionales. También minimiza el número de consultas ejecutadas.

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

Añada un registrador para que pueda ayudarle 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);

A continuación, implemente el método isEcoFriendly():

@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 usa para recuperar el producto y el método getAsInteger() para obtener el valor del atributo eco_friendly. Según las consultas de GraphQL que ejecutó anteriormente, sabe que el valor esperado cuando el atributo eco_friendly está establecido en "Yes" es en realidad un número entero de 1.

Ahora que el modelo Sling está actualizado, actualice el marcado del componente para mostrar un indicador de Eco Friendly basado en el modelo Sling.

En el IDE, navegue y expanda el módulo 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 archivo .content.xml.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://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"/>

La definición del componente para el componente teaser de productos en este proyecto está arriba. Observe la propiedad sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser". Este es un ejemplo de creación de un componente Proxy. AEM CIF En lugar de copiar y pegar todas las secuencias de comandos HTL del teaser de productos de los componentes principales de la, puede usar sling:resourceSuperType para heredar toda la funcionalidad.

Abra el archivo productteaser.html. CIF Esta es una copia del archivo productteaser.html del teaser de productos de la lista de distribución de productos de la serie

<!--/* 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 para MyProductTeaser se utiliza y se asigna a la variable product.

Edite productteaser.html para que llame al método isEcoFriendly 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 parte get y is del método se borra y la primera letra se convierte a minúsculas. Así que isShowBadge() se convierte en .showBadge y isEcoFriendly se convierte en .ecoFriendly. En función del valor booleano devuelto por .isEcoFriendly(), determina si se muestra <span>Eco Friendly</span>.

Encontrará más información sobre data-sly-test y otras instrucciones de bloque HTL aquí.

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

AEM Abra una nueva ventana del explorador y vaya a la consola OSGi > Estado > Modelos Sling: http://localhost:4502/system/console/status-slingmodels

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

Actualice a la página principal de Venia en http://localhost:4502/editor.html/content/venia/us/en.html donde se agregó el teaser de productos.

Si el producto tiene el atributo eco_friendly 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.

AEM A continuación, abra la error.log para ver las instrucciones de registro que se agregaron. 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**
...

Descargue el archivo eco_friendly.svg. Se usa como distintivo respetuoso con el medio ambiente.

Vuelva al IDE y navegue hasta la carpeta ui.frontend.

Agregar el archivo eco_friendly.svg a la carpeta ui.frontend/src/main/resources/images:

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

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

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

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

Actualice a la página principal de Venia en http://localhost:4502/editor.html/content/venia/us/en.html donde se agregó el teaser de productos.