Personalizzare lo stile dei componenti core CIF di AEM style-aem-cif-core-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 -PautoInstallPackage,cloud

Aggiungi le configurazioni OSGi necessarie per collegare l’istanza AEM a un’istanza Adobe Commerce o aggiungere le configurazioni al progetto 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 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] ------------------------------------------------------------------------

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

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

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

Inspect 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 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 che il file fa parte del modulo ui.apps, può essere distribuito all'AEM.

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 AEM. La categoria è venia.base.

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

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

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

Dal terminale, crea e implementa l’intero progetto in un’istanza locale dell’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 dell’autore dell’AEM, come apparirebbe sul sito pubblicato. All'URL è stato aggiunto il parametro di query ?wcmmode=disabled. Quando si sviluppano 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 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.

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/

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 nell'AEM. Puoi scaricare il file della soluzione qui.

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 -PautoInstallPackage,cloud

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.