La CIF Venia Project è una base di codice di riferimento per l'utilizzo di Componenti core CIF. In questa esercitazione, estenderai ulteriormente la Product Teaser per visualizzare un attributo personalizzato da Adobe Commerce. Ulteriori informazioni sull’integrazione GraphQL tra AEM e Adobe Commerce e gli hook di estensione forniti dai componenti core CIF.
Utilizza la Archetipo AEM progetto all’avvio dell’implementazione Commerce personalizzata.
Il brand Venia ha recentemente iniziato a produrre alcuni prodotti utilizzando materiali sostenibili e l'azienda desidera mostrare un Ecologico come parte del Product Teaser. In Adobe Commerce verrà creato un nuovo attributo personalizzato per indicare se un prodotto utilizza l’ Ecologico materiale. Questo attributo personalizzato verrà quindi aggiunto come parte della query GraphQL e visualizzato sul Product Teaser per prodotti specifici.
Per completare questa esercitazione è necessario un ambiente di sviluppo locale. Questo include un'istanza in esecuzione di AEM configurata e connessa a un'istanza Adobe Commerce. Rivedi i requisiti e le fasi per configurazione di uno sviluppo locale con AEM SDK as a Cloud Service. Per seguire completamente l’esercitazione, dovrai disporre delle autorizzazioni per aggiungere Attributi a un prodotto in Adobe Commerce.
Sarà inoltre necessario GraphQL IDE come GraphiQL o un'estensione del browser per eseguire gli esempi di codice e le esercitazioni. Se installi un'estensione del browser, assicurati che sia in grado di impostare le intestazioni della richiesta. Su Google Chrome, Client Altair GraphQL è un'estensione che può eseguire il lavoro.
Cloneremo il Progetto Venia quindi sovrascrivi gli stili predefiniti.
Sentitevi liberi di utilizzare un progetto esistente (in base al AEM Project Archetype con CIF incluso) e salta questa sezione.
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,cloud
Aggiungi le configurazioni OSGi necessarie per collegare l’istanza AEM a un’istanza Adobe Commerce o aggiungi le configurazioni al progetto appena creato.
A questo punto è necessario disporre di una versione funzionante di una vetrina connessa a un'istanza di Adobe Commerce. Passa 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. Espandi il menu principale della vetrina, dovresti vedere diverse categorie, a indicare che la connessione ad Adobe Commerce funziona.
Il componente Product Teaser verrà esteso durante l’esercitazione. Come primo passo, aggiungi una nuova istanza del Product Teaser alla home page per comprendere la funzionalità 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 il menu a discesa di ricerca risorse su Prodotti. Dovrebbe essere visualizzato un elenco di prodotti disponibili da un’istanza Adobe Commerce connessa. Seleziona un prodotto e trascinalo sul componente Product Teaser nella pagina.
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.
I prodotti e i dati di prodotto visualizzati in AEM vengono memorizzati in Adobe Commerce. Aggiungere quindi un nuovo attributo per Ecologico come parte dell’attributo di prodotto impostato utilizzando l’interfaccia utente di Adobe Commerce.
Disponi già di un Sì/No come parte del set di attributi del prodotto? Puoi usarlo e saltare questa sezione.
Accedi alla tua istanza Adobe Commerce.
Passa a Catalogo > Prodotti.
Aggiorna il filtro di ricerca per trovare il Prodotto configurabile utilizzato quando aggiunto al componente Teaser nell’esercizio precedente. Apri il prodotto in modalità di modifica.
Dalla visualizzazione del prodotto, fai clic su Aggiungi attributo > Crea nuovo attributo.
Compila il Nuovo attributo modulo con i seguenti valori (lasciare le impostazioni predefinite per altri valori)
Set di campi | Etichetta campo | Valore |
---|---|---|
Proprietà attributo | Etichetta attributo | Ecologico |
Proprietà attributo | Tipo di ingresso catalogo | Sì/No |
Proprietà attributo avanzate | Codice attributo | eco_friendly |
Fai clic su Salva attributo una volta finito.
Scorri fino alla parte inferiore del prodotto ed espandi il Attributi intestazione. Dovresti vedere il nuovo Ecologico campo . Passa a Sì.
Salva le modifiche apportate al prodotto.
Ulteriori dettagli sulla gestione Gli attributi del prodotto si trovano nella guida utente di Adobe Commerce.
Passa a Sistema > Strumenti > Gestione cache. Poiché è stato effettuato un aggiornamento allo schema dati, è necessario annullare la validità di alcuni tipi di cache in Adobe Commerce.
Seleziona la casella accanto a Configurazione e invia il tipo di cache per Aggiorna
Maggiori dettagli Gestione della cache si trova nella guida utente di Adobe Commerce.
Prima di saltare nel codice AEM è utile esplorare Panoramica di GraphQL utilizzando un IDE GraphQL. L’integrazione di Adobe Commerce con AEM viene eseguita principalmente tramite una serie di query GraphQL. Comprendere e modificare le query GraphQL è uno dei modi principali in cui è possibile estendere i componenti core CIF.
Quindi, utilizza un IDE GraphQL per verificare che eco_friendly
è stato aggiunto al set di attributi del prodotto. Le schermate in questa esercitazione utilizzano Client Altair GraphQL.
Apri l’IDE GraphQL e immetti l’URL . http://<commerce-server>/graphql
nella barra degli URL dell’IDE o dell’estensione.
Aggiungi quanto segue query sui prodotti dove YOUR_SKU
è SKU del prodotto utilizzato nell'esercizio precedente:
{
products(
filter: { sku: { eq: "YOUR_SKU" } }
) {
items {
name
sku
eco_friendly
}
}
}
Esegui la query e ottieni una risposta come quella riportata di seguito:
{
"data": {
"products": {
"items": [
{
"name": "Valeria Two-Layer Tank",
"sku": "VT11",
"eco_friendly": 1
}
]
}
}
}
Tieni presente che il valore di Sì è un numero intero di 1. Questo sarà utile quando scriviamo la query GraphQL in Java.
Documentazione più dettagliata su Adobe Commerce GraphQL è disponibile qui.
Ora estenderemo la logica di business del Product Teaser implementando un modello Sling. I 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 insieme agli script HTL come parte del componente. Seguiremo il pattern di delega per modelli Sling in modo da estendere solo parti del modello esistente di Product Teaser.
I modelli Sling sono implementati come Java e si trovano nel modulo core del progetto generato.
Utilizzo l'IDE che preferisci importare il progetto Venia. Le schermate utilizzate sono IDE codice di Visual Studio.
Nell’IDE, naviga sotto la nucleo centrale modulo per: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java
.
MyProductTeaser.java
è un’interfaccia Java che estende CIF ProductTeaser interfaccia.
È già stato aggiunto un nuovo metodo denominato isShowBadge()
per visualizzare un badge se il prodotto è considerato "Nuovo".
Aggiungi il nuovo 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();
}
Questo è un nuovo metodo che introdurremo per incapsulare la logica per indicare se il prodotto ha eco_friendly
attributo impostato su Sì o No.
Quindi, controlla il MyProductTeaserImpl.java
a core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java
.
La pattern di delega per modelli Sling permette MyProductTeaserImpl
riferimento ProductTeaser
tramite sling:resourceSuperType
proprietà:
@Self
@Via(type = ResourceSuperType.class)
private ProductTeaser productTeaser;
Per tutti i metodi che non dovranno essere ignorati o modificati, possiamo semplicemente restituire il valore che ProductTeaser
restituisce. 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 di AEM è il AbstractProductRetriever
che fornisce l’accesso a attributi di prodotto specifici. Inspect initModel()
metodo:
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());
}
}
...
La @PostConstruct
l’annotazione assicura che questo metodo venga chiamato non appena viene inizializzato il modello Sling.
La query GraphQL del prodotto è già stata estesa utilizzando la variabile extendProductQueryWith
metodo per recuperare l'ulteriore created_at
attributo. Questo attributo viene successivamente utilizzato come parte del isShowBadge()
metodo .
Aggiorna la query GraphQL per includere il eco_friendly
attributo 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)
);
}
}
Con l’aggiunta al metodo extendProductQueryWith
, gli attributi di prodotto aggiuntivi saranno disponibili per il resto del modello. Inoltre si riduce la quantità di query eseguite.
Nel codice di cui sopra iladdCustomSimpleField
viene utilizzato per recuperare eco_friendly
attributo. Questo illustra come eseguire una query per gli attributi personalizzati che fanno parte dello schema Adobe Commerce.
La createdAt()
è stato effettivamente 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.
Aggiungi un logger per 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, implementa isEcoFriendly()
metodo:
@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 di cui sopra il productRetriever
viene utilizzato per recuperare il prodotto e getAsInteger()
viene utilizzato per ottenere il valore del eco_friendly
attributo. In base alle query GraphQL eseguite in precedenza, sappiamo che il valore previsto quando eco_friendly
attributo impostato su "Sì" è in realtà un numero intero di 1.
Ora che il modello Sling è stato aggiornato, il markup del componente deve essere aggiornato per visualizzare effettivamente un indicatore di Ecologico basato sul modello Sling.
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. HTML Template Language (HTL) è un linguaggio per modelli leggero usato dai componenti di AEM per eseguire il rendering dinamico del markup in base al contenuto creato, in modo che sia possibile riutilizzare i componenti. Il Product Teaser, ad esempio, può essere riutilizzato più volte per visualizzare prodotti diversi.
Nel nostro caso, vogliamo eseguire il rendering di un banner sopra il teaser per indicare che il prodotto è "eco-compatibile" in base a un attributo personalizzato. Il modello di progettazione per personalizzare il markup di un componente è in realtà standard per tutti i componenti di AEM, non solo per i componenti core CIF di AEM.
Se personalizzi un componente utilizzando i selettori di prodotti CIF e categorie come questo Product Teaser o il componente di pagina CIF, accertati di includere il cif.shell.picker
clientlib per le finestre di dialogo dei componenti. Vedi Utilizzo del selettore di prodotti e categorie CIF per i dettagli.
Nell’IDE, naviga ed espandi la ui.apps
modulo ed espandi la gerarchia delle cartelle per: ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser
e ispezionare .content.xml
file.
<?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"/>
Questa è la definizione del componente Product Teaser usato nel nostro progetto. 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 di AEM, possiamo utilizzare sling:resourceSuperType
per ereditare tutte le funzionalità.
Aprire il file productteaser.html
. Questa è una copia del 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>
Si noti che il modello Sling per MyProductTeaser
viene utilizzato e assegnato al product
variabile.
Modifica productteaser.html
per effettuare una chiamata al isEcoFriendly
metodo applicato 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 variabile get
e is
parte del metodo viene eliminata e la prima lettera viene minuscola. Quindi isShowBadge()
diventa .showBadge
e isEcoFriendly
diventa .ecoFriendly
. In base al valore booleano restituito da .isEcoFriendly()
determina se la <span>Eco Friendly</span>
viene visualizzato.
Ulteriori informazioni data-sly-test
e altri Le istruzioni per il blocco HTL si trovano qui.
Salva le modifiche e distribuisci gli aggiornamenti per AEM utilizzando le tue competenze Maven, da un terminale di riga di comando:
$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallSinglePackage,cloud
Apri una nuova finestra del browser e passa a AEM e 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 a Home page Venia a http://localhost:4502/editor.html/content/venia/us/en.html dove è stato aggiunto il Product Teaser.
Se il prodotto ha il eco_friendly
attributo impostato su Sì, dovresti vedere il testo "Eco-friendly" sulla pagina . Prova a passare a prodotti diversi per vedere il cambiamento di comportamento.
Apri il AEM error.log
per visualizzare le istruzioni di registro aggiunte. La error.log
si trova 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**
...
È inoltre possibile che vengano visualizzate delle tracce di stack se il prodotto utilizzato nel teaser non contiene eco_friendly
come parte del set di attributi.
A questo punto, la logica che determina quando visualizzare il Ecologico il badge funziona, tuttavia il testo normale potrebbe utilizzare alcuni stili. Quindi aggiungi un’icona e gli stili al ui.frontend
per completare l’implementazione.
Scarica la eco_friendly.svg file. Viene utilizzato come Ecologico badge.
Torna all’IDE e passa alla ui.frontend
cartella.
Aggiungi il eco_friendly.svg
al ui.frontend/src/main/resources/images
cartella:
Apri il file . productteaser.scss
a ui.frontend/src/main/styles/commerce/_productteaser.scss
.
Aggiungi le seguenti regole Sass all'interno della .productteaser
Classe:
.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');
}
}
...
}
Consulta Definizione dello stile dei componenti core CIF per maggiori dettagli sui flussi di lavoro front-end.
Salva le modifiche e distribuisci gli aggiornamenti per AEM utilizzando le tue competenze Maven, da un terminale di riga di comando:
$ 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 dove è stato aggiunto il Product Teaser.
Hai appena personalizzato il tuo primo componente CIF di AEM. Scarica la file della soluzione completati qui.
Esamina la funzionalità del Nuovo badge già implementato nel Product Teaser. Prova ad aggiungere una casella di controllo aggiuntiva per consentire agli autori di controllare quando il Ecologico deve essere visualizzato il badge . Sarà necessario aggiornare la finestra di dialogo del componente in ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser/_cq_dialog/.content.xml
.