Personalizzare i componenti core CIF di Adobe Experience Manager customize-cif-components

Esegui il seguente comando Git per clonare il progetto:

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

Crea e implementa il progetto in un’istanza locale di AEM:

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

Aggiungi le configurazioni OSGi necessarie per collegare l’istanza AEM a un’istanza Adobe Commerce o aggiungere le configurazioni al progetto appena creato.

A questo punto, devi disporre di una versione funzionante di una vetrina connessa a un’istanza di Adobe Commerce. Passare alla pagina US > Home all'indirizzo: http://localhost:4502/editor.html/content/venia/us/en.html.

Dovresti vedere che la vetrina si basa al momento sul tema Venia. Espandendo il menu principale della vetrina, dovresti vedere diverse categorie, a indicare che la connessione ad Adobe Commerce funziona.

Passa alla home page del sito: http://localhost:4502/editor.html/content/acme/us/en.html

Inserisci un nuovo componente Product Teaser nel contenitore di layout principale della pagina.

Espandi il pannello laterale (se non è già attivato) e imposta il menu a discesa di ricerca risorse su Prodotti. Dovrebbe essere visualizzato un elenco dei prodotti disponibili da un’istanza di Adobe Commerce connessa. Seleziona un prodotto e trascinalo sul componente Product Teaser nella pagina.

Ora puoi vedere un prodotto visualizzato dal Product Teaser. Il nome del prodotto e il prezzo del prodotto sono attributi predefiniti visualizzati.

Accedi all’istanza di Adobe Commerce.

Passa a Catalogo > Prodotti.

Aggiorna il filtro di ricerca in modo da trovare il prodotto configurabile utilizzato quando aggiunto al componente Teaser nell'esercizio precedente. Apri il prodotto in modalità di modifica.

Dalla visualizzazione del prodotto, fare clic su Aggiungi attributo > Crea nuovo attributo.

Compila il modulo Nuovo attributo con i seguenti valori (lascia le impostazioni predefinite per gli altri valori)

Al termine, fai clic su Salva attributo.

Scorri fino alla parte inferiore del prodotto ed espandi l'intestazione Attributi. Dovresti visualizzare il nuovo campo Eco-friendly. Passa a Sì.

Salva le modifiche apportate al prodotto.

Passa a Sistema > Strumenti > Gestione cache. Poiché è stato effettuato un aggiornamento allo schema dati, è necessario invalidare alcuni dei tipi di cache in Adobe Commerce.

Seleziona la casella accanto a Configurazione e invia il tipo di cache per Aggiornamento

Aprire GraphQL IDE e immettere l'URL http://<server>/graphql nella barra dell'URL dell'IDE o dell'estensione.

Aggiungi la seguente query prodotti dove YOUR_SKU è il SKU del prodotto utilizzato nell'esercizio precedente:

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

Esegui la query e dovresti ricevere una risposta simile alla seguente:

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

Nell'IDE, passa al modulo core fino a: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

MyProductTeaser.java è un'interfaccia Java™ che estende l'interfaccia CIF ProductTeaser.

È già stato aggiunto un nuovo metodo denominato isShowBadge() per visualizzare un badge se il prodotto è considerato "Nuovo".

Aggiungere un metodo isEcoFriendly() all'interfaccia:

@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();
}

Quindi, controllare MyProductTeaserImpl.java alle core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

Il pattern di delega per modelli Sling consente a MyProductTeaserImpl di fare riferimento al modello ProductTeaser tramite la proprietà sling:resourceSuperType:

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

Per tutti i metodi che non vengono sostituiti o modificati, è possibile restituire il valore restituito da ProductTeaser. Ad esempio:

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

Questo riduce al minimo la quantità di codice Java™ che un’implementazione deve scrivere.

Uno dei punti di estensione aggiuntivi forniti dai componenti core CIF dell'AEM è AbstractProductRetriever, che fornisce l'accesso ad attributi di prodotto specifici. Inspect il metodo 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());
        }

    }
...

L'annotazione @PostConstruct assicura che questo metodo venga chiamato quando il modello Sling viene inizializzato.

La query GraphQL del prodotto è già stata estesa utilizzando il metodo extendProductQueryWith per recuperare l'attributo aggiuntivo created_at. Questo attributo viene successivamente utilizzato come parte del metodo isShowBadge().

Aggiornare la query GraphQL per includere l'attributo eco_friendly nella query parziale:

//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)
        );
    }
}

L'aggiunta al metodo extendProductQueryWith è un modo potente per garantire che gli attributi di prodotto aggiuntivi siano disponibili per il resto del modello. Inoltre si riduce la quantità di query eseguite.

Nel codice precedente, addCustomSimpleField viene utilizzato per recuperare l'attributo eco_friendly. Questo illustra come eseguire una query per gli attributi personalizzati che fanno parte dello schema di Adobe Commerce.

Aggiungi un logger in modo che possa aiutarti a eseguire il debug del codice 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);

Quindi, implementare il metodo 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;
}

Nel metodo precedente, viene utilizzato productRetriever per recuperare il prodotto e il metodo getAsInteger() per ottenere il valore dell'attributo eco_friendly. In base alle query GraphQL eseguite in precedenza, si sa che il valore previsto quando l'attributo eco_friendly è impostato su "Yes" è in realtà un numero intero di 1.

Ora che il modello Sling è stato aggiornato, aggiorna il markup del componente per visualizzare un indicatore di Rispettoso dell'ambiente basato sul modello Sling.

Nell'IDE, spostarsi ed espandere il modulo ui.apps, espandere la gerarchia delle cartelle in ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser e controllare il file .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 definizione del componente Product Teaser in questo progetto è riportata sopra. Osserva la proprietà sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser". Questo è un esempio di creazione di un componente Proxy. Invece di copiare e incollare tutti gli script HTL di Product Teaser dai componenti core CIF dell’AEM, puoi utilizzare sling:resourceSuperType per ereditare tutte le funzionalità.

Aprire il file productteaser.html. Questa è una copia del file productteaser.html dal Product Teaser 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>

Il modello Sling per MyProductTeaser è utilizzato e assegnato alla variabile product.

Modificare productteaser.html in modo che chiami il metodo isEcoFriendly implementato nell'esercizio precedente:

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

Quando si chiama un metodo Sling Model in HTL, la parte get e is del metodo viene eliminata e la prima lettera viene convertita in minuscolo. isShowBadge() diventa .showBadge e isEcoFriendly diventa .ecoFriendly. In base al valore booleano restituito da .isEcoFriendly() determina se <span>Eco Friendly</span> è visualizzato.

Ulteriori informazioni su data-sly-test e altre istruzioni di blocco HTL sono disponibili qui.

Salva le modifiche e distribuisci gli aggiornamenti a AEM utilizzando le tue competenze Maven, da un terminale della riga di comando:

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

Apri una nuova finestra del browser e passa a AEM e alla console OSGi > Stato > Modelli Sling: http://localhost:4502/system/console/status-slingmodels

Cerca MyProductTeaserImpl e dovresti vedere una riga come la seguente:

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

Questo indica che il modello Sling è stato distribuito correttamente e mappato al componente corretto.

Aggiorna alla home page di Venia all'indirizzo http://localhost:4502/editor.html/content/venia/us/en.html in cui è stato aggiunto il Product Teaser.

Se l'attributo eco_friendly del prodotto è impostato su Yes, nella pagina dovrebbe essere visualizzato il testo "Eco-friendly". Prova a passare a prodotti diversi per vedere come cambia il comportamento.

Aprire quindi l'AEM error.log per visualizzare le istruzioni di registro aggiunte. error.log è in <AEM SDK Install Location>/crx-quickstart/logs/error.log.

Cerca nei registri AEM per visualizzare le istruzioni di registro aggiunte nel modello 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**
...

Scarica il file eco_friendly.svg. Utilizzato come badge Rispettoso dell'ambiente.

Tornare all'IDE e passare alla cartella ui.frontend.

Aggiungere il file eco_friendly.svg alla cartella ui.frontend/src/main/resources/images:

Aprire il file productteaser.scss in ui.frontend/src/main/styles/commerce/_productteaser.scss.

Aggiungere le regole Sass seguenti nella classe .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');
        }
    }
...
}

Salva le modifiche e distribuisci gli aggiornamenti a AEM utilizzando le tue competenze Maven, da un terminale della riga di comando:

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

Aggiorna alla home page di Venia all'indirizzo http://localhost:4502/editor.html/content/venia/us/en.html in cui è stato aggiunto il Product Teaser.