Personalizzare lo stile dei componenti core CIF di AEM

Passa al modulo ui.frontend ed espandilo, quindi espandi la gerarchia delle cartelle fino a: ui.frontend/src/main/styles/commerce:

Si noti che nella cartella sono presenti più file Sass (.scss). Questi file sono gli stili specifici di Commerce per ciascuno dei componenti di Commerce.

Aprire il file _productteaser.scss.

Aggiorna la regola .item__image e modifica la regola del bordo:

.item__image {
    border: #ea00ff 8px solid; /* <-- modify this rule */
    display: block;
    grid-area: main;
    height: auto;
    opacity: 1;
    transition-duration: 512ms;
    transition-property: opacity, visibility;
    transition-timing-function: ease-out;
    visibility: visible;
    width: 100%;
}

La regola di cui sopra deve aggiungere un bordo rosa grassetto al componente Product Teaser.

Aprire una nuova finestra del terminale e passare alla cartella ui.frontend:

$ cd <project-location>/aem-cif-guides-venia/ui.frontend

Esegui il seguente comando Maven:

$ mvn clean install
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  29.497 s
[INFO] Finished at: 2020-08-25T14:30:44-07:00
[INFO] ------------------------------------------------------------------------

Controllare l'uscita del terminale. Il comando Maven ha eseguito diversi script NPM, tra cui npm run build. Il comando npm run build è definito nel file package.json, compila il progetto Webpack e attiva la generazione della libreria client.

Esaminare il file ui.frontend/dist/clientlib-site/site.css:

Il file è la versione compilata e minimizzata di tutti i file Sass nel progetto.

NOTE

File di questo tipo vengono ignorati dal controllo del codice sorgente poiché devono essere generati durante il tempo di creazione.

Controllare il file ui.frontend/clientlib.config.js.

/* clientlib.config.js*/
...
// Config for `aem-clientlib-generator`
module.exports = {
    context: BUILD_DIR,
    clientLibRoot: CLIENTLIB_DIR,
    libs: [
        {
            ...libsBaseConfig,
            name: 'clientlib-site',
            categories: ['venia.site'],
            dependencies: ['venia.dependencies', 'aem-core-cif-react-components'],
            assets: {
...

Questo file di configurazione è per aem-clientlib-generator e determina dove e come i file CSS e JavaScript compilati vengono trasformati in una libreria client di AEM.

Nel modulo ui.apps, esaminare il file: ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css:

Il file è site.css copiato nel progetto ui.apps. Ora fa parte di una libreria client denominata clientlib-site con categoria venia.site. Una volta inserito nel modulo ui.apps, il file può essere distribuito ad AEM.

NOTE

File di questo tipo vengono ignorati anche dal controllo del codice sorgente in quanto devono essere generati durante il tempo di creazione.

Quindi, esamina le altre librerie client generate dal progetto:

Queste librerie client non sono gestite dal modulo ui.frontend. Queste librerie client includono invece le dipendenze CSS e JavaScript fornite da Adobe. La definizione di queste librerie client si trova nel file .content.xml sotto ogni cartella.

clientlib-base - Libreria client vuota che incorpora semplicemente le dipendenze necessarie dai componenti core di AEM. La categoria è venia.base.

clientlib-cif - Libreria client vuota che incorpora semplicemente le dipendenze necessarie dai componenti core di AEM CIF. La categoria è venia.cif.

clientlib-grid - Include il CSS per abilitare la funzione Griglia reattiva di AEM. L'utilizzo della griglia di AEM abilita la modalità Layout nell'editor di AEM e consente agli autori di contenuto di ridimensionare i componenti. La categoria è venia.grid ed è incorporata nella libreria venia.base.

Esaminare i file customheaderlibs.html e customfooterlibs.html sotto ui.apps/src/main/content/jcr_root/apps/venia/components/page:

Questi script includono venia.base e venia.cif librerie come parte di tutte le pagine.

NOTE

Solo le librerie di base sono "hardcoded" come parte degli script di pagina. venia.site non è incluso in questi file ma come parte del modello della pagina per una maggiore flessibilità. Questo processo viene esaminato successivamente.

Dal terminale, genera e implementa l’intero progetto in un’istanza locale di AEM:

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

Apri una nuova scheda del browser e passa alla home page del sito: http://localhost:4502/editor.html/content/venia/us/en.html.

Espandi il Finder risorse (barra laterale) in modalità Modifica. Cambia il filtro risorse in Prodotti.

Trascina e rilascia un nuovo prodotto nella home page nel Contenitore di layout principale:

Dovresti notare che il Product Teaser ora presenta un bordo rosa brillante in base alla modifica della regola CSS creata in precedenza.

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

Seleziona il menu Informazioni pagina e fai clic su Visualizza come pubblicato:

Questa pagina si apre senza caricare nessuno dei JavaScript di authoring di AEM, come apparirebbe sul sito pubblicato. All'URL è stato aggiunto il parametro di query ?wcmmode=disabled. Durante lo sviluppo di CSS e JavaScript, è buona norma utilizzare questo parametro per semplificare la pagina senza alcun intervento da parte dell’autore AEM.

Visualizza il codice sorgente della pagina e individua diverse librerie client incluse:

<!DOCTYPE html>
<html lang="en-US">
<head>
    ...
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-site.min.css" type="text/css">
</head>
...
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/core/wcm/components/commons/site/clientlibs/container.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-base.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/core/cif/clientlibs/common.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-cif.min.js"></script>
</body>
</html>

Le librerie client recapitate alla pagina hanno il prefisso /etc.clientlibs e vengono servite tramite un proxy per evitare di esporre elementi sensibili in /apps o /libs.

Avviso venia/clientlibs/clientlib-site.min.css e venia/clientlibs/clientlib-site.min.js. Questi file sono i file CSS e JavaScript compilati derivati dal modulo ui.frontend.

Passa alla home page del sito nell'editor di AEM: http://localhost:4502/editor.html/content/venia/us/en.html.

Seleziona il menu Informazioni pagina e fai clic su Modifica modello:

Il modello Pagina di destinazione è aperto su cui si basa la Home pagina.

NOTE

Per visualizzare tutti i modelli disponibili nella schermata iniziale di AEM, passa a Strumenti > Generale > Modelli.

Nell’angolo in alto a sinistra, seleziona l’icona Informazioni pagina e fai clic su Criterio pagina.

Criterio pagina viene aperto per il modello Pagina di destinazione:

Sul lato destro è disponibile un elenco delle librerie client categorie incluse in tutte le pagine che utilizzano questo modello.

• venia.dependencies - Fornisce tutte le librerie fornitori da cui dipende venia.site.
• venia.site - Categoria per clientlib-site generata dal modulo ui.frontend.

Altri modelli utilizzano lo stesso criterio: Pagina contenuto, Pagina di destinazione e così via. Riutilizzando lo stesso criterio, si garantisce che le stesse librerie client vengano incluse in tutte le pagine.

Quando si gestisce l’inclusione delle librerie client mediante l’uso di modelli e criteri di pagina, si può modificare il criterio a livello di modello. Ad esempio, supponiamo di dover gestire due marchi diversi nella stessa istanza di AEM. Ogni marchio ha un proprio stile o tema, ma le librerie e il codice di base sono gli stessi. Un altro esempio, se disponi di una libreria client più grande che desideri visualizzare solo su determinate pagine, puoi creare un criterio di pagina univoco solo per quel modello.

Nel browser passa alla pagina Home e Visualizza come pubblicato: http://localhost:4502/content/venia/us/en.html?wcmmode=disabled.

Visualizza l'origine della pagina e copia il HTML non elaborato della pagina.

Torna all'IDE scelto sotto il modulo ui.frontend apri il file: ui.frontend/src/main/static/index.html

Sovrascrivi il contenuto di index.html e incolla il HTML copiato nel passaggio precedente.

Trovare le "inclusioni" per clientlib-site.min.css, clientlib-site.min.js e rimuoverle.

<head>
    <!-- remove this link -->
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
    ...
</head>
<body>
    ...
     <!-- remove this link -->
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
</body>

Queste "inclusioni" vengono rimosse perché rappresentano la versione compilata di CSS e JavaScript generata dal modulo ui.frontend. Lascia le altre librerie client così come verranno abilitate al proxy dall’istanza AEM in esecuzione.

Aprire una nuova finestra del terminale e passare alla cartella ui.frontend. Eseguire il comando npm start:

$ cd ui.frontend
$ npm start

Con questo comando viene avviato Webpack-dev-server su http://localhost:8080/

CAUTION

Se si verifica un errore relativo a Sass, arrestare il server, eseguire il comando npm rebuild node-sass e ripetere i passaggi precedenti. Questo errore può verificarsi se la versione di npm e node è diversa da quella specificata nel progetto aem-cif-guides-venia/pom.xml.

Passa a http://localhost:8080/ in una nuova scheda con lo stesso browser di un'istanza registrata di AEM. Dovresti vedere la home page di Venia tramite il webpack-dev-server:

Lascia web pack-dev-server in esecuzione. Viene utilizzato nell'esercizio successivo.

Nel modulo ui.frontend, riaprire il file _productteaser.scss in ui.frontend/src/main/styles/commerce/_productteaser.scss.

Apporta le seguenti modifiche al bordo del Product Teaser:

    .item__image {
-       border: #ea00ff 8px solid;
+       border-bottom: 1px solid #c0c0c0;
        display: block;
        grid-area: main;
        height: auto;
        opacity: 1;
        transition-duration: 512ms;
        transition-property: opacity, visibility;
        transition-timing-function: ease-out;
        visibility: visible;
        width: 100%;
    }

Salva le modifiche; webpack-dev-server verrà aggiornato automaticamente con i nuovi stili.

Aggiungi un’ombra esterna e includi angoli arrotondati al Product Teaser.

 .item__root {
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     border-radius: 5px;
     float: left;
     margin-left: 12px;
     margin-right: 12px;
}

.item__root:hover {
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

Aggiorna il nome del prodotto in modo che venga visualizzato nella parte inferiore del teaser e modifica il colore del testo.

.item__name {
    color: #000;
    display: block;
    float: left;
    font-size: 22px;
    font-weight: 900;
    line-height: 1em;
    padding: 0.75em;
    text-transform: uppercase;
    width: 75%;
}

Aggiorna il prezzo del prodotto in modo che venga visualizzato nella parte inferiore del teaser e modifica il colore del testo.

.price {
    color: #000;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: 900;
    padding: 0.75em;
    padding-bottom: 2em;
    width: 25%;

    ...

Aggiorna la query multimediale nella parte inferiore, in modo da poter impilare il nome e il prezzo in schermi più piccoli di 992px.

@media (max-width: 992px) {
    .productteaser .item__name {
        font-size: 18px;
        width: 100%;
    }
    .productteaser .item__price {
        font-size: 14px;
        width: 100%;
    }
}

Ora dovresti vedere lo stile della scheda riflesso nel webpack-dev-server:

Tuttavia, le modifiche non sono ancora state implementate in AEM. Puoi scaricare il file della soluzione qui.

Distribuisci gli aggiornamenti in AEM utilizzando le tue competenze Maven, da un terminale della riga di comando:

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

NOTE

Sono disponibili strumenti e configurazione IDE aggiuntivi per sincronizzare i file di progetto direttamente con un’istanza AEM locale senza dover eseguire una generazione Maven completa.

Torna al browser e aggiorna la home page: http://localhost:4502/editor.html/content/venia/us/en.html. Dovresti vedere gli stili del product teaser aggiornati.

Prova ad aggiungere altri Product Teaser. Utilizza la modalità Layout per modificare la larghezza e l’offset dei componenti in modo da visualizzare più teaser su una riga.