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

Il Progetto CIF Venia è una base di codice di riferimento per l’utilizzo di Componenti core CIF. In questo tutorial, puoi estendere ulteriormente il Product Teaser per visualizzare un attributo personalizzato da Adobe Commerce. Scopri anche l’integrazione di GraphQL tra Adobe Experience Manager (AEM) e Adobe Commerce e gli hook di estensione forniti dai componenti core dell’CIF.

TIP
Utilizza il Archetipo progetto AEM all’avvio dell’implementazione di commerce.

Cosa verrà creato

Il marchio Venia ha recentemente iniziato a produrre alcuni prodotti utilizzando materiali sostenibili e l'azienda desidera mostrare un Rispettoso dell'ambiente come parte del Product Teaser. In Adobe Commerce viene creato un nuovo attributo personalizzato per indicare se un prodotto utilizza Rispettoso dell'ambiente materiale. Questo attributo personalizzato viene aggiunto come parte della query GraphQL e visualizzato nel Product Teaser per i prodotti specificati.

Implementazione finale del badge eco-compatibile

Prerequisiti prerequisites

Per completare questa esercitazione è necessario un ambiente di sviluppo locale. Ciò include un’istanza in esecuzione dell’AEM configurata e connessa a un’istanza Adobe Commerce. Rivedi i requisiti e i passaggi per sviluppo locale con l'AEM. Per seguire completamente l’esercitazione, è necessario disporre dell’autorizzazione per aggiungere Attributi di un prodotto in Adobe Commerce.

È inoltre necessario GraphQL IDE, ad esempio GraphiQL o un’estensione del browser per eseguire gli esempi di codice e i tutorial. Se installi un’estensione del browser, accertati che sia in grado di impostare le intestazioni della richiesta. Su Google Chrome, Client Altair GraphQL è un’estensione che può eseguire il processo.

Clonare il progetto Venia clone-venia-project

Clonare Progetto Venia e quindi ignorare gli stili predefiniti.

NOTE
Puoi utilizzare un progetto esistente (in base all’archetipo del progetto AEM con CIF incluso) e salta questa sezione.
  1. Esegui il seguente comando Git per clonare il progetto:

    code language-shell
    $ git clone git@github.com:adobe/aem-cif-guides-venia.git
    
  2. Crea e implementa il progetto in un’istanza locale di AEM:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  3. Aggiungi le configurazioni OSGi necessarie per collegare l’istanza AEM a un’istanza Adobe Commerce o aggiungere le configurazioni al progetto appena creato.

  4. A questo punto, devi disporre di una versione funzionante di una vetrina connessa a un’istanza di Adobe Commerce. Accedi a US > Home pagina in: 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.

    Vetrina configurata con il tema Venia

Creare il Product Teaser author-product-teaser

Il componente Product Teaser viene esteso in tutta questa esercitazione. Come primo passo, aggiungi un’istanza del Product Teaser alla home page per comprenderne le funzionalità della linea di base.

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

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

    Inserire Product Teaser

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

    Trascinare su Product Teaser

    note note
    NOTE
    Puoi anche configurare il prodotto visualizzato impostando il componente tramite la finestra di dialogo (clic sull’icona a forma di chiave inglese).
  4. Ora puoi vedere un prodotto visualizzato dal Product Teaser. Il nome del prodotto e il prezzo del prodotto sono attributi predefiniti visualizzati.

    Product Teaser - stile predefinito

Aggiungere un attributo personalizzato in Adobe Commerce add-custom-attribute

I prodotti e i dati dei prodotti visualizzati nell’AEM sono memorizzati in Adobe Commerce. Aggiungi quindi un attributo per Rispettoso dell'ambiente come parte dell’attributo del prodotto impostato utilizzando l’interfaccia utente di Adobe Commerce.

TIP
Hai già un Sì/No come parte del set di attributi del prodotto? Puoi utilizzarlo e saltare questa sezione.
  1. Accedi all’istanza di Adobe Commerce.

  2. Accedi a Catalogo > Prodotti.

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

    Cerca prodotto Valeria

  4. Dalla vista prodotto, fai clic su Aggiungi attributo > Crea nuovo attributo.

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

    table 0-row-3 1-row-3 2-row-3 3-row-3
    Set di campi Etichetta campo Valore
    Proprietà attributo Etichetta attributo Rispettoso dell'ambiente
    Proprietà attributo Tipo di input catalogo Sì/No
    Proprietà attributi avanzate Codice attributo eco_friendly

    Modulo nuovo attributo

    Clic Salva attributo al termine.

  6. Scorri fino alla parte inferiore del prodotto ed espandi il Attributi intestazione. Dovresti visualizzare il nuovo Rispettoso dell'ambiente campo. Passa a .

    Passa a yes

    Salva le modifiche apportate al prodotto.

    note tip
    TIP
    Ulteriori dettagli sulla gestione Gli attributi del prodotto sono disponibili nella guida utente di Adobe Commerce..
  7. Accedi a Sistema > Strumenti > Gestione cache. Poiché è stato effettuato un aggiornamento allo schema dati, è necessario invalidare alcuni dei tipi di cache in Adobe Commerce.

  8. Seleziona la casella accanto a Configurazione e invia il tipo di cache per Aggiorna

    Aggiorna tipo cache configurazione

    note tip
    TIP
    Ulteriori dettagli su La gestione della cache è disponibile nella guida utente di Adobe Commerce.

Utilizzare un IDE GraphQL per verificare l'attributo use-graphql-ide

Prima di passare al codice AEM, è utile esplorare i Adobe Commerce GraphQL utilizzo di un IDE GraphQL. L’integrazione di Adobe Commerce con l’AEM viene eseguita principalmente tramite una serie di query GraphQL. Comprendere e modificare le query di GraphQL è uno dei modi chiave con cui è possibile estendere i Componenti core dell’CIF.

Quindi, utilizza un IDE di GraphQL per verificare che eco_friendly L'attributo è stato aggiunto al set di attributi del prodotto. Le schermate di questo tutorial utilizzano l’estensione Google Chrome Client Altair GraphQL.

  1. Apri l’IDE di GraphQL e immetti l’URL http://<server>/graphql nella barra URL dell’IDE o dell’estensione.

  2. Aggiungi quanto segue query prodotti dove YOUR_SKU è il SKU del prodotto utilizzato nell'esercizio precedente:

    code language-json
      {
        products(
        filter: { sku: { eq: "YOUR_SKU" } }
        ) {
            items {
            name
            sku
            eco_friendly
            }
        }
    }
    
  3. Esegui la query e dovresti ricevere una risposta simile alla seguente:

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

    Risposta GraphQL di esempio

Il valore di è un numero intero di 1. Questa funzione è utile quando scrivi la query GraphQL in Java™.

TIP
Documentazione più dettagliata su Adobe Commerce GraphQL è disponibile qui.

Aggiornare il modello Sling per Product Teaser updating-sling-model-product-teaser

Ora puoi estendere la logica di business del Product Teaser implementando un modello Sling. Modelli Sling sono "POJO" (Plain Old Java™ Objects) basati su annotazioni che implementano la logica di business necessaria per il componente. I modelli Sling vengono utilizzati con gli script HTL come parte del componente. Segui le pattern di delega per modelli Sling in modo da poter estendere parti del modello esistente di Product Teaser.

I modelli Sling sono implementati come Java™ e si trovano in core del progetto generato.

Utilizzare l'IDE di tua scelta per importare il progetto Venia. Le schermate utilizzate provengono da IDE codice Visual Studio.

  1. Nell’IDE, passa alla sezione core modulo a: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

    IDE posizione core

    MyProductTeaser.java è un’interfaccia Java™ che estende l’CIF ProductTeaser di rete.

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

  2. Aggiungi un metodo isEcoFriendly() all’interfaccia:

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

Questo è un nuovo metodo per incapsulare la logica per indicare se il prodotto ha eco_friendly attributo impostato su o No.

  1. Quindi, controlla MyProductTeaserImpl.java a core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

    Il pattern di delega per modelli Sling consente MyProductTeaserImpl a riferimento ProductTeaser tramite il sling:resourceSuperType proprietà:

    code language-java
    @Self
    @Via(type = ResourceSuperType.class)
    private ProductTeaser productTeaser;
    

    Per tutti i metodi che non vengono sostituiti o modificati, puoi restituire il valore che ProductTeaser restituisce. Ad esempio:

    code language-java
    @Override
    public String getImage() {
        return productTeaser.getImage();
    }
    

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

  2. Uno dei punti di estensione aggiuntivi forniti dai Componenti core CIF dell’AEM è AbstractProductRetriever che consente di accedere ad attributi di prodotto specifici. Inspect initModel() metodo:

    code language-java
    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());
            }
    
        }
    ...
    

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

    La query GraphQL del prodotto è già stata estesa utilizzando extendProductQueryWith per recuperare i dati aggiuntivi created_at attributo. Questo attributo viene in seguito utilizzato come parte del isShowBadge() metodo.

  3. Aggiorna la query GraphQL per includere eco_friendly attributo nella query parziale:

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

    Aggiunta a extendProductQueryWith è un metodo efficace 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 riportato sopra, iladdCustomSimpleField viene utilizzato per recuperare eco_friendly attributo. Questo illustra come eseguire una query per gli attributi personalizzati che fanno parte dello schema di Adobe Commerce.

    note note
    NOTE
    Il createdAt() è stato implementato come parte del Interfaccia prodotto. La maggior parte degli attributi dello schema comunemente trovati è già stata implementata, quindi utilizza solo gli attributi addCustomSimpleField per gli attributi realmente personalizzati.
  4. Aggiungi un logger in modo che possa aiutarti a eseguire il debug del codice Java™:

    code language-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);
    
  5. Quindi, implementa isEcoFriendly() metodo:

    code language-java
    @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, il productRetriever viene utilizzato per recuperare il prodotto e il getAsInteger() viene utilizzato per ottenere il valore del eco_friendly attributo. In base alle query GraphQL eseguite in precedenza, sai che il valore previsto quando eco_friendly è impostato su "" è un numero intero di 1.

    Una volta aggiornato il modello Sling, aggiorna il markup Componente per visualizzare un indicatore di Rispettoso dell'ambiente basato sul modello Sling.

Personalizzazione del markup del Product Teaser customize-markup-product-teaser

I componenti AEM vengono spesso estesi per modificare il markup generato dal componente. A tal fine, sovrascrivi lo script HTL utilizzato dal componente per eseguire il rendering del relativo markup. HTL (HTML Template Language) è un linguaggio per modelli leggero utilizzato dai componenti AEM per eseguire il rendering dinamico del markup in base al contenuto creato, che consente di riutilizzare i componenti. Il Product Teaser, ad esempio, può essere riutilizzato più volte per visualizzare prodotti diversi.

In questo caso, desideri applicare un banner sopra il teaser per indicare che il prodotto è "eco-compatibile" in base a un attributo personalizzato. Schema di progettazione per personalizzazione del markup di un componente è standard per tutti i Componenti AEM, non solo per i Componenti core CIF dell’AEM.

NOTE
Se personalizzi un componente utilizzando i selettori di prodotti e categorie dell’CIF, come questo Product Teaser o il componente pagina dell’CIF, assicurati di includere i cif.shell.picker clientlib per le finestre di dialogo del componente. Consulta Utilizzo del selettore di prodotti e categorie CIF per i dettagli.
  1. Nell’IDE, esplora ed espandi la ui.apps ed espandere la gerarchia delle cartelle in modo da: ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser e ispezionare .content.xml file.

    Product Teaser ui.apps

    code language-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à.

  2. Apri il file productteaser.html. Questa è una copia di productteaser.html file da Product Teaser CIF

    code language-html
    <!--/* 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 viene utilizzato e assegnato al product variabile.

  3. Modifica productteaser.html in modo che chiami isEcoFriendly metodo applicato nell'esercizio precedente:

    code language-html
    ...
    <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, get e is parte del metodo viene eliminata e la prima lettera viene convertita in minuscolo. Quindi isShowBadge() diventa .showBadge e isEcoFriendly diventa .ecoFriendly. In base al valore booleano restituito da .isEcoFriendly() determina se <span>Eco Friendly</span> viene visualizzato.

    Ulteriori informazioni su data-sly-test e altro Le istruzioni del blocco HTL sono disponibili qui.

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

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  5. Apri una nuova finestra del browser e passa a AEM e al Console OSGi > Stato > Modelli Sling: http://localhost:4502/system/console/status-slingmodels

  6. Cerca MyProductTeaserImpl e dovresti vedere una riga simile alla seguente:

    code language-plain
    com.venia.core.models.commerce.MyProductTeaserImpl - venia/components/commerce/productteaser
    

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

  7. Aggiorna a Home page Venia a http://localhost:4502/editor.html/content/venia/us/en.html in cui è stato aggiunto il Product Teaser.

    Messaggio eco-compatibile visualizzato

    Se il prodotto ha eco_friendly attributo impostato su , sulla pagina dovrebbe essere visualizzato il testo "Rispettoso dell'ambiente". Prova a passare a prodotti diversi per vedere come cambia il comportamento.

  8. Quindi, apri l'AEM error.log per visualizzare le istruzioni di registro aggiunte. Il 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:

    code language-plain
    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**
    ...
    
    note caution
    CAUTION
    È inoltre possibile visualizzare alcune tracce dello stack se il prodotto utilizzato nel teaser non dispone di eco_friendly come parte del relativo set di attributi.

Aggiungi stili per il badge eco-compatibile add-styles

A questo punto, la logica per la visualizzazione del Rispettoso dell'ambiente Il badge funziona, tuttavia il testo normale potrebbe utilizzare alcuni stili. Quindi aggiungi un’icona e degli stili al ui.frontend per completare l'implementazione.

  1. Scarica il file eco_friendly.svg file. Viene utilizzato come Rispettoso dell'ambiente distintivo.

  2. Torna all’IDE e passa a ui.frontend cartella.

  3. Aggiungi il eco_friendly.svg file in ui.frontend/src/main/resources/images cartella:

    Eco-Friendly SVG

  4. Apri il file productteaser.scss a ui.frontend/src/main/styles/commerce/_productteaser.scss.

  5. Aggiungi le seguenti regole Sass all’interno del .productteaser classe:

    code language-scss
    .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');
            }
        }
    ...
    }
    
    note note
    NOTE
    Estrai Stile dei componenti core dell’CIF per ulteriori dettagli sui flussi di lavoro front-end.
  6. Salva le modifiche e distribuisci gli aggiornamenti a AEM utilizzando le tue competenze Maven, da un terminale della riga di comando:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  7. Aggiorna a Home page Venia a http://localhost:4502/editor.html/content/venia/us/en.html in cui è stato aggiunto il Product Teaser.

    Implementazione finale del badge eco-compatibile

Complimenti congratulations

Hai personalizzato il tuo primo componente AEM CIF. Scarica il file file di soluzione completati qui.

Sfida bonus bonus-challenge

Rivedi la funzionalità di Nuovo badge già implementato nel Product Teaser. Prova ad aggiungere una casella di controllo aggiuntiva che consenta agli autori di controllare quando Rispettoso dell'ambiente deve essere visualizzato il badge. Aggiorna la finestra di dialogo del componente in ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser/_cq_dialog/.content.xml.

Nuova sfida per l’implementazione del badge

Risorse aggiuntive additional-resources

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2