AEM CIF Personalizar componentes principales de 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,cloud

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

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.

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 la lista desplegable del buscador de recursos a Productos. Esta lista debe 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 la variable Producto configurable se utiliza cuando se añade al componente Teaser en el ejercicio anterior. Abra el producto en modo de edición.

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

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

Clic Guardar atributo cuando termine.

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.

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://<commerce-server>/graphql en la barra URL del IDE o de la extensión.

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

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

El valor de Sí es un número entero de 1. Este valor es útil cuando se escribe la consulta de GraphQL en Java™.

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

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

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

Añadir 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();
}

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

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 los métodos que no desea anular o cambiar, puede devolver el valor que ProductTeaser devuelve. Por ejemplo:

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

Este método minimiza la cantidad de código Java™ que debe escribir una implementación.

AEM CIF Uno de los puntos de extensión adicionales que proporcionan los componentes principales de la es el 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 cuando 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.

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 a extendProductQueryWith es una forma eficaz de garantizar 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, la variableaddCustomSimpleField se utiliza para recuperar la variable eco_friendly atributo. Este atributo ilustra cómo se puede consultar cualquier atributo personalizado que forme parte del esquema de Adobe Commerce.

Añada un registrador para poder 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 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. Según las consultas de GraphQL que ejecutó anteriormente, sabe que el valor esperado cuando 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.

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"/>

La definición del componente anterior es para el componente teaser de productos en su proyecto. Observe la propiedad sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser". Esta propiedad es un ejemplo de creación de un Componente Proxy. AEM CIF En lugar de copiar y pegar las secuencias de comandos HTL del teaser de productos desde los componentes principales de la, puede utilizar el complemento sling:resourceSuperType para heredar todas las funcionalidades.

Abra el archivo productteaser.html. Este archivo es una copia del productteaser.html desde el CIF Teaser de productos.

<!--/* 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.

Modificar productteaser.html para que pueda llamar a 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í.

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

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

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

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

Esta línea indica que el modelo Sling está correctamente implementado y asignado al componente correcto.

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.

AEM A continuación, abra la error.log para ver las instrucciones de registro agregadas. El error.log es el <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 la eco_friendly.svg archivo. Este archivo se utiliza como Respetuoso con el medio ambiente insignia.

Vuelva al IDE y vaya al ui.frontend carpeta.

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

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

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

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

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.