Personalizzare i componenti core dell’CIF dell’AEM 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 AEM e Adobe Commerce e gli hook di estensione forniti dai componenti core CIF.
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.
Prerequisiti prerequisites
Per completare questa esercitazione è necessario un ambiente di sviluppo locale. Questo ambiente include un’istanza in esecuzione dell’AEM configurata e connessa a un’istanza Adobe Commerce. Rivedi i requisiti e i passaggi per impostazione di uno sviluppo locale con l’SDK as a Cloud Service per 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 possa 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
Clona il Progetto Veniae quindi ignorare gli stili predefiniti.
-
Esegui il seguente comando Git per clonare il progetto:
code language-shell $ git clone git@github.com:adobe/aem-cif-guides-venia.git
-
Crea e implementa il progetto in un’istanza locale di AEM:
code language-shell $ cd aem-cif-guides-venia/ $ mvn clean install -PautoInstallSinglePackage,cloud
-
Aggiungi le configurazioni OSGi necessarie per collegare l’istanza AEM a un’istanza Adobe Commerce o aggiungi le configurazioni al progetto creato.
-
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.
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.
-
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 l’elenco a discesa di ricerca risorse su Prodotti. In questo elenco 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.
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). -
Ora puoi vedere un prodotto visualizzato dal Product Teaser. Il nome del prodotto e il prezzo del prodotto sono attributi predefiniti visualizzati.
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 un attributo per Rispettoso dell'ambiente come parte dell’attributo del prodotto impostato utilizzando l’interfaccia utente di Adobe Commerce.
-
Accedi all’istanza di Adobe Commerce.
-
Accedi a Catalogo > Prodotti.
-
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.
-
Dalla vista prodotto, fai clic su Aggiungi attributo > Crea nuovo attributo.
-
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 Clic Salva attributo al termine.
-
Scorri fino alla parte inferiore del prodotto ed espandi il Attributi intestazione. Dovresti visualizzare il nuovo Rispettoso dell'ambiente campo. Passa a Sì.
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.. -
Accedi 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 Aggiorna
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 Panoramica di 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 Client Altair GraphQL Estensione Google Chrome.
-
Apri l’IDE di GraphQL e immetti l’URL
http://<commerce-server>/graphql
nella barra URL dell’IDE o dell’estensione. -
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 } } }
-
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 } ] } } }
Il valore di Sì è un numero intero di 1. Questo valore è utile quando scrivi la query GraphQL in Java™.
note tip TIP Leggi la documentazione più dettagliata su Adobe Commerce GraphQL.
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 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.
-
Nell’IDE, passa alla sezione core modulo a:
core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java
.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". -
Aggiungi
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 nuovo metodo viene introdotto per incapsulare la logica per indicare se il prodotto ha
eco_friendly
attributo impostato su Sì o No. -
Quindi, controlla
MyProductTeaserImpl.java
acore/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java
.Il pattern di delega per modelli Sling consente
MyProductTeaserImpl
a riferimentoProductTeaser
tramite ilsling:resourceSuperType
proprietà:code language-java @Self @Via(type = ResourceSuperType.class) private ProductTeaser productTeaser;
Per i metodi che non si desidera sostituire o modificare, è possibile restituire il valore che
ProductTeaser
restituisce. Ad esempio:code language-java @Override public String getImage() { return productTeaser.getImage(); }
Questo metodo 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 consente di accedere ad attributi di prodotto specifici. InspectinitModel()
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 initialize the productRetriever */ @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 aggiuntivicreated_at
attributo. Questo attributo viene in seguito utilizzato come parte delisShowBadge()
metodo. -
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, il
addCustomSimpleField
viene utilizzato per recuperareeco_friendly
attributo. Questo attributo 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 attributiaddCustomSimpleField
per gli attributi realmente personalizzati. -
Aggiungi un logger per 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);
-
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 ilgetAsInteger()
viene utilizzato per ottenere il valore deleco_friendly
attributo. In base alle query GraphQL eseguite in precedenza, sai che il valore previsto quandoeco_friendly
è impostato su "Sì" è un numero intero di 1.Ora che il modello Sling è stato aggiornato, è necessario aggiornare il markup del componente per visualizzare effettivamente 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. Questa modifica viene eseguita ignorando Script HTL che il componente utilizza per riprodurre il proprio 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.
cif.shell.picker
clientlib per le finestre di dialogo del componente. Consulta Utilizzo del selettore di prodotti e categorie CIF per i dettagli.-
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.code language-xml <?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 definizione del componente precedente si riferisce al componente Product Teaser nel progetto. Osserva la proprietà
sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser"
. Questa proprietà è un esempio di creazione di un Componente proxy. Invece di copiare e incollare gli script HTL di Product Teaser dai componenti core CIF dell’AEM, puoi utilizzaresling:resourceSuperType
per ereditare tutte le funzionalità. -
Apri il file
productteaser.html
. Questo file è una copia diproductteaser.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 alproduct
variabile. -
Modifica
productteaser.html
in modo da poter chiamareisEcoFriendly
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
eis
parte del metodo viene eliminata e la prima lettera viene convertita in minuscolo. QuindiisShowBadge()
diventa.showBadge
eisEcoFriendly
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. -
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
-
Apri una nuova finestra del browser e passa a AEM e al Console OSGi > Stato > Modelli Sling: http://localhost:4502/system/console/status-slingmodels
-
Cerca
MyProductTeaserImpl
e dovresti vedere una riga simile alla seguente:code language-plain com.venia.core.models.commerce.MyProductTeaserImpl - venia/components/commerce/productteaser
Questa riga indica che il modello Sling è correttamente distribuito e mappato al componente corretto.
-
Aggiorna a Home page Venia a http://localhost:4502/editor.html/content/venia/us/en.html in cui è stato aggiunto il Product Teaser.
Se il prodotto ha
eco_friendly
attributo impostato su Sì, sulla pagina dovrebbe essere visualizzato il testo "Rispettoso dell'ambiente". Prova a passare a prodotti diversi per vedere come cambia il comportamento. -
Ora apri l'AEM
error.log
per visualizzare le istruzioni di registro aggiunte. Ilerror.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.
-
Scarica il file eco_friendly.svg file. Questo file viene utilizzato come Rispettoso dell'ambiente distintivo.
-
Torna all’IDE e passa a
ui.frontend
cartella. -
Aggiungi il
eco_friendly.svg
file inui.frontend/src/main/resources/images
cartella: -
Apri il file
productteaser.scss
aui.frontend/src/main/styles/commerce/_productteaser.scss
. -
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. -
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
-
Aggiorna a Home page Venia a http://localhost:4502/editor.html/content/venia/us/en.html in cui è stato aggiunto il Product Teaser.
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 corrispondenza di ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser/_cq_dialog/.content.xml
.