Personalizzare lo stile dei componenti core CIF di AEM

Il CIF Venia Project è una base di codice di riferimento per l’utilizzo dei componenti core CIF. In questa esercitazione esaminerai il progetto di riferimento Venia e comprenderai come sono organizzati i CSS e JavaScript utilizzati dai componenti core CIF di AEM. Inoltre, creerai un nuovo stile utilizzando CSS per aggiornare lo stile predefinito del componente Product Teaser.

SUGGERIMENTO

Utilizza l’ AEM archetipo di progetto all’avvio dell’implementazione di e-commerce.

Cosa Verrà Generato

In questa esercitazione verrà implementato un nuovo stile per il componente Product Teaser che assomiglia a una scheda. Le lezioni apprese nell’esercitazione possono essere applicate ad altri componenti core CIF.

Cosa verrà creato

Prerequisiti

Per completare questa esercitazione è necessario un ambiente di sviluppo locale. Questo include un'istanza in esecuzione di AEM configurata e connessa a un'istanza di Magento. Rivedi i requisiti e i passaggi per configurare uno sviluppo locale con AEM.

Clona il progetto Venia

Dupliceremo il Progetto Venia e quindi sovrascriveremo gli stili predefiniti.

NOTA

Puoi anche utilizzare un progetto esistente (basato su AEM Project Archetype con CIF incluso) e saltare questa sezione.

  1. Esegui il seguente comando git per clonare il progetto:

    $ git clone git@github.com:adobe/aem-cif-guides-venia.git
    
  2. Crea e implementa il progetto in un’istanza locale di AEM:

    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
  3. Aggiungi le configurazioni OSGi necessarie per collegare l’istanza AEM a un’istanza di Magento o aggiungi le configurazioni al progetto appena creato.

  4. A questo punto è necessario disporre di una versione funzionante di una vetrina che sia collegata a un’istanza di Magento. Passa alla pagina US > Home 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 a Magento funziona.

    Storefront configurato con il tema Venia

Librerie client e modulo ui.frontend

I CSS e JavaScript responsabili del rendering del tema o degli stili della vetrina sono gestiti in AEM da una libreria client o clientlibs in breve. Le librerie client consentono di organizzare CSS e JavaScript nel codice di un progetto e quindi di distribuirli sulla pagina.

Gli stili specifici per il marchio possono essere applicati AEM componenti core CIF aggiungendo ed ignorando i CSS gestiti da queste librerie client. È fondamentale comprendere in che modo le librerie client sono strutturate e incluse nella pagina.

Il ui.frontend è un progetto webpack dedicato per gestire tutte le risorse front-end di un progetto. Questo consente agli sviluppatori front-end di utilizzare un numero qualsiasi di linguaggi e tecnologie come TypeScript, Sass e molto altro.

Il modulo ui.frontend è anche un modulo Maven e integrato con il progetto più grande tramite l'utilizzo di un modulo NPM aem-clientlib-generator. Durante una build, il aem-clientlib-generator copia i file CSS e JavaScript compilati in una libreria client nel modulo ui.apps .

architettura ui.frontend a ui.apps

I CSS e Javascript compilati vengono copiati dal ui.frontend modulo nel ui.apps modulo come libreria client durante una build Maven

Aggiornare lo stile del teaser

Quindi, apporta una piccola modifica allo stile Teaser per vedere come funzionano il modulo ui.frontend e le librerie client. Utilizza l'IDE che preferisci per importare il progetto Venia. Le schermate utilizzate provengono dall' IDE di Visual Studio Code.

  1. Naviga ed espandi il modulo ui.frontend ed espandi la gerarchia delle cartelle fino a: ui.frontend/src/main/styles/commerce:

    cartella di e-commerce ui.frontend

    Tieni presente che la cartella contiene più file Sass (.scss). Si tratta degli stili specifici Commerce per ciascuno dei componenti Commerce .

  2. Aprire il file _productteaser.scss.

  3. 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 molto grassetto al componente Product Teaser.

  4. Apri una nuova finestra terminale e passa alla cartella ui.frontend :

    $ cd <project-location>/aem-cif-guides-venia/ui.frontend
    
  5. 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 terminale. Il comando Maven esegue 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 di attivare la generazione della libreria client.

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

    CSS del sito compilato

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

    NOTA

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

  7. 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 CSS e JavaScript compilati verranno trasformati in una libreria client AEM.

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

    CSS del sito compilato in ui.apps

    Questo copia il file site.css nel progetto ui.apps. Ora fa parte di una libreria client denominata clientlib-site con una categoria venia.site. Una volta che il file fa parte del modulo ui.apps, può essere distribuito a AEM.

    NOTA

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

  9. Ispeziona quindi le altre librerie client generate dal progetto:

    Altre librerie client

    Queste librerie client non sono gestite dal modulo ui.frontend . Queste librerie client includono invece 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 di 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 di AEM. La categoria è venia.cif.

    clientlib-grid : include il CSS necessario per abilitare AEM funzione Griglia reattiva. L’utilizzo della griglia AEM abilita Modalità layout nell’editor AEM e consente agli autori di contenuti di ridimensionare i componenti. La categoria è venia.grid ed è incorporata nella libreria venia.base.

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

    Script personalizzati di intestazione e piè di pagina

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

    NOTA

    Solo le librerie di base sono "hard-coded" come parte degli script di pagina. venia.site non è incluso in questi file, ma è incluso come parte del modello di pagina per una maggiore flessibilità. Questo verrà esaminato successivamente.

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

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

Creare un Product Teaser

Dopo aver distribuito gli aggiornamenti di codice, aggiungi una nuova istanza del componente Product Teaser nella home page del sito utilizzando gli strumenti di authoring AEM. Questo ci consentirà di visualizzare gli stili aggiornati.

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

  2. Espandi il Asset Finder (barra laterale) in modalità Modifica . Cambia il filtro Risorsa in Prodotti.

    Espandi Asset Finder e filtra per prodotti

  3. Trascina un nuovo prodotto nella home page del contenitore di layout principale:

    Product Teaser con bordo rosa

    Dovresti vedere che Product Teaser ora ha un bordo rosa brillante in base alla modifica della regola CSS creata in precedenza.

Verificare le librerie client sulla pagina

Quindi verifica l’inclusione delle librerie client nella pagina.

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

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

    Visualizza come pubblicato

    La pagina viene aperta senza caricare alcun JavaScript di authoring di 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 l’AEM dell’autore.

  3. Visualizza l’origine 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 distribuite alla pagina hanno il prefisso /etc.clientlibs e vengono servite tramite un proxy per evitare di esporre qualsiasi elemento sensibile 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 .

Inclusione della libreria client con i modelli di pagina

Sono disponibili diverse opzioni per includere una libreria lato client. Nella sezione che segue viene esaminato come il progetto generato include le librerie clientlib-site tramite Modelli di pagina.

  1. Passa alla Home Page del sito all'interno dell'Editor di AEM: http://localhost:4502/editor.html/content/venia/us/en.html.

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

    Modificare il modello

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

    NOTA

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

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

    Voce di menu Criterio pagina

  4. Verrà aperto il Criterio pagina per il modello Pagina di destinazione:

    Criterio pagina : pagina di destinazione

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

    • venia.dependencies - Fornisce tutte le librerie di fornitori da cui venia.site dipende.
    • venia.site - Questa è la categoria per clientlib-site la quale il ui.frontend modulo genera.

    Altri modelli utilizzano lo stesso criterio, Pagina di contenuto, Pagina di destinazione e così via. Riutilizzando lo stesso criterio, possiamo assicurarci che le stesse librerie client siano 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 avrà un proprio stile o un proprio tema, ma le librerie e il codice di base saranno gli stessi. Un altro esempio, nel caso di una libreria client più grande che si voglia visualizzare solo su determinate pagine, si può creare un criterio di pagina univoco solo per quel modello.

Sviluppo webpack locale

Nell’esercizio precedente, è stato effettuato un aggiornamento a un file Sass nel modulo ui.frontend e dopo aver eseguito una build Maven le modifiche vengono distribuite in AEM. Ora cercheremo di sfruttare un webpack-dev-server per sviluppare rapidamente gli stili front-end.

Il webpack-dev-server proxy le immagini e alcuni dei CSS/JavaScript dell'istanza locale di AEM, ma consente allo sviluppatore di modificare gli stili e JavaScript nel modulo ui.frontend .

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

  2. Visualizzare l'origine della pagina e copiare l'HTML non elaborato della pagina.

  3. Torna all’IDE che preferisci sotto il modulo ui.frontend per aprire il file: ui.frontend/src/main/static/index.html

    File HTML statico

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

  5. Trova gli "include" per clientlib-site.min.css, clientlib-site.min.js e rimuovili.

    <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 vengono rimossi perché rappresentano la versione compilata dei CSS e JavaScript generati dal modulo ui.frontend . Lascia le altre librerie client così come verranno proxy dall'istanza AEM in esecuzione.

  6. Apri una nuova finestra terminale e passa alla cartella ui.frontend . Esegui il comando npm start:

    $ cd ui.frontend
    $ npm start
    

    Questo avvierà il webpack-dev-server su http://localhost:8080/

    ATTENZIONE

    Se ricevi un errore relativo a Sass, interrompi il server ed esegui il comando npm rebuild node-sass e ripeti i passaggi precedenti. Questo può verificarsi se disponi di una versione diversa di npm e node e quindi specificata nel progetto aem-cif-guides-venia/pom.xml.

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

    Server di sviluppo Webpack sulla porta 80

    Lasciare in esecuzione il webpack-dev-server. Sarà utilizzato nel prossimo esercizio.

Implementare lo stile della scheda per Product Teaser

Quindi, modifica i file Sass nel modulo ui.frontend per implementare uno stile tipo scheda per Product Teaser. Il webpack-dev-server verrà utilizzato per vedere rapidamente le modifiche.

Torna all’IDE e al progetto generato.

  1. Nel modulo ui.frontend riapri il file _productteaser.scss in ui.frontend/src/main/styles/commerce/_productteaser.scss.

  2. 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%;
        }
    

    Salvare le modifiche e il webpack-dev-server dovrebbe aggiornarsi automaticamente con i nuovi stili.

  3. 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);
    }
    
  4. 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%;
    }
    
  5. 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%;
    
        ...
    
  6. Aggiorna la query multimediale in basso per impilare il nome e il prezzo in schermate più piccole 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:

    Modifiche al teaser di Webpack Dev Server

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

  7. Distribuisci gli aggiornamenti per AEM utilizzando le tue competenze Maven, da un terminale a riga di comando:

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

    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.

Visualizzare il Product Teaser aggiornato

Una volta implementato in AEM il codice per il progetto, dovrebbe essere possibile vedere le modifiche apportate al Product Teaser.

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

    Stile del Product Teaser aggiornato

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

    Product Teaser multipli

Risoluzione dei problemi

In CRXDE-Lite puoi verificare che il file CSS aggiornato sia stato distribuito: http://localhost:4502/crx/de/index.jsp#/apps/venia/clientlibs/clientlib-site/css/site.css

Quando si distribuiscono nuovi file CSS e/o JavaScript, è importante anche assicurarsi che il browser non distribuisca file non aggiornati. A tale scopo, cancella la cache del browser o avvia una nuova sessione del browser.

AEM inoltre tenta di memorizzare nella cache le librerie client per migliorare le prestazioni. A volte, dopo la distribuzione del codice, vengono distribuiti i file meno recenti. Puoi annullare manualmente la validità della cache della libreria client di AEM utilizzando lo strumento Rigenera librerie client. Se si sospetta che AEM abbia memorizzato nella cache una versione precedente di una libreria client, è meglio annullare la validità della cache. La rigenerazione delle librerie è infatti inefficiente e richiede molto tempo.

Congratulazioni

Hai appena formattato il tuo primo componente core CIF AEM e hai utilizzato un server di sviluppo webpack!

Sfida bonus

Usa il Sistema di stili di AEM per creare due stili che possono essere attivati/disattivati da un autore di contenuti. La sezione su come sviluppare con il sistema di stili include passaggi dettagliati e informazioni su come eseguire questa operazione.

Sfida bonus - Sistema di stili

Risorse aggiuntive

In questa pagina