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 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. 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). Si tratta degli stili specifici di Commerce per ciascuno dei componenti 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 e ha l'effetto di compilare il progetto Webpack e attivare 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 è il file di configurazione per aem-clientlib-generator e determina dove e come i file CSS e JavaScript compilati verranno trasformati in una libreria client AEM.

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

Copia il file site.css 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 - Si tratta di una libreria client vuota che incorpora semplicemente le dipendenze necessarie dai componenti core AEM. La categoria è venia.base.

clientlib-cif - Si tratta anche di una libreria client vuota che incorpora semplicemente le dipendenze necessarie dai componenti core CIF dell'AEM. La categoria è venia.cif.

clientlib-grid - Questo include il CSS necessario 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:

Viene aperta la pagina 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. Si tratta dei 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:

Verrà aperto il modello Pagina di destinazione su cui si basa la Home pagina.

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

Verrà visualizzato il criterio pagina per il modello Pagina di destinazione:

Sul lato destro è disponibile un elenco delle librerie client categorie che verranno 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, possiamo essere certi 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 saranno 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>

Questi elementi vengono rimossi perché rappresentano la versione compilata di CSS e JavaScript generata dal modulo ui.frontend. Lascia le altre librerie client così come verranno 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

Verrà 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 che il nome e il prezzo vengano sovrapposti 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.