Stil AEM CIF kärnkomponenter style-aem-cif-core-components

Kör följande Git-kommando så att du kan klona projektet:

$ git clone git@github.com:adobe/aem-cif-guides-venia.git

Skapa och distribuera projektet till en lokal instans av AEM:

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

Lägg till nödvändiga OSGi-konfigurationer så att du kan ansluta AEM till en Adobe Commerce-instans eller lägga till konfigurationerna i det skapade projektet.

Nu bör du ha en fungerande version av en storefront som är ansluten till en Adobe Commerce-instans. Gå till sidan US > Home på: http://localhost:4502/editor.html/content/venia/us/en.html.

Du ser att butiken för närvarande använder temat Venia. När du expanderar huvudmenyn för butiken bör du se olika kategorier som anger att anslutningen till Adobe Commerce fungerar.

Navigera och expandera modulen ui.front och expandera mapphierarkin till: ui.frontend/src/main/styles/commerce:

Observera att det finns flera Sass-filer (.scss) under mappen. Dessa filer är de Commerce-specifika formaten för var och en av Commerce-komponenterna.

Öppna filen _productteaser.scss.

Uppdatera regeln .item__image och ändra kantlinjalen:

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

Regeln ovan bör lägga till en fet rosa ram i Product Teaser Component.

Öppna ett nytt terminalfönster och navigera till mappen ui.frontend:

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

Kör följande Maven-kommando:

$ 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 terminalutdata. Observera att Maven-kommandot körde flera NPM-skript, inklusive npm run build. Kommandot npm run build definieras i filen package.json och kompilerar webbpaketprojektet och utlöser genereringen av klientbiblioteket.

Inspect filen ui.frontend/dist/clientlib-site/site.css:

Filen är den kompilerade och minimerade versionen av alla Sass-filer i projektet.

Inspect filen 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: {
...

Den här konfigurationsfilen är för aem-clientlib-generator och avgör var och hur kompilerad CSS och JavaScript omvandlas till ett AEM klientbibliotek.

Granska filen i modulen ui.apps: ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css:

Filen site.css kopieras till projektet ui.apps. Den ingår nu i ett klientbibliotek med namnet clientlib-site och kategorin venia.site. När filen är en del av modulen ui.apps kan den distribueras till AEM.

Kontrollera sedan de andra klientbiblioteken som genereras av projektet:

Dessa klientbibliotek hanteras inte av modulen ui.frontend. I stället innehåller dessa klientbibliotek CSS- och JavaScript-beroenden från Adobe. Definitionen för dessa klientbibliotek finns i filen .content.xml under varje mapp.

clientlib-base - Ett tomt klientbibliotek som helt enkelt bäddar in nödvändiga beroenden från AEM Core Components. Kategorin är venia.base.

clientlib-CIF - Ett tomt klientbibliotek som helt enkelt bäddar in nödvändiga beroenden från AEM CIF kärnkomponenter. Kategorin är venia.cif.

clientlib-grid - Innehåller CSS för att aktivera funktionen AEM responsivt stödraster. Om du använder det AEM stödrastret aktiveras layoutläget i AEM Editor och innehållsförfattarna kan ändra storlek på komponenter. Kategorin är venia.grid och är inbäddad i biblioteket venia.base.

Inspect filerna customheaderlibs.html och customfooterlibs.html under ui.apps/src/main/content/jcr_root/apps/venia/components/page:

Dessa skript innehåller biblioteken venia.base och venia.CIF som en del av alla sidor.

Bygg och distribuera hela projektet till en lokal instans av AEM:

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

Öppna en ny flik i webbläsaren och gå till webbplatsens hemsida: http://localhost:4502/editor.html/content/venia/us/en.html.

Expandera Resurssökaren (sidospåret) i läget Redigera. Växla resursfiltret till Produkter.

Dra och släpp en ny produkt på startsidan i huvudlayoutbehållaren:

Du bör se att Product Teaser nu har en ljusrosa kantlinje som baseras på CSS-regeländringen som skapades tidigare.

Navigera till webbplatsens hemsida: http://localhost:4502/editor.html/content/venia/us/en.html.

Välj menyn Sidinformation och klicka på Visa som publicerad:

Den här sidan öppnas utan att någon av de AEM författarna av JavaScript har lästs in, som den skulle se ut på den publicerade webbplatsen. Observera att URL:en har frågeparametern ?wcmmode=disabled tillagd. När du utvecklar CSS och JavaScript är det en god vana att använda den här parametern för att förenkla sidan utan att AEM författare behöver göra något.

Visa sidkällan så bör du kunna identifiera flera klientbibliotek:

<!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>

Klientbibliotek som levereras till sidan har prefixet /etc.clientlibs och hanteras via en proxy för att undvika att exponera något känsligt i /apps eller /libs.

Obs! venia/clientlibs/clientlib-site.min.css och venia/clientlibs/clientlib-site.min.js. Dessa filer är de kompilerade CSS- och JavaScript-filerna som härleds från modulen ui.frontend.

Navigera till webbplatsens hemsida i AEM Editor: http://localhost:4502/editor.html/content/venia/us/en.html.

Välj menyn Sidinformation och klicka på Redigera mall:

Mallen Startsida öppnas och sidan Startsida baseras på den.

I det övre vänstra hörnet markerar du ikonen Sidinformation och klickar på Sidprofil.

Sidprofilen öppnas för mallen Landningssida:

Till höger visas en lista över kategorier för klientbibliotek som finns på alla sidor som använder den här mallen.

• venia.dependencies - Tillhandahåller eventuella leverantörsbibliotek som venia.site är beroende av.
• venia.site - Kategorin för clientlib-site som modulen ui.frontend genererar.

Observera att samma princip används för andra mallar, Innehållssida, Landningssida och så vidare. Genom att återanvända samma princip säkerställs att samma klientbibliotek inkluderas på alla sidor.

Fördelen med att använda mallar och sidprofiler för att hantera inkludering av klientbibliotek är att du kan ändra principen per mall. Du kanske hanterar två olika varumärken inom samma AEM. Varje varumärke har sin egen unika stil eller tema, men basbiblioteken och koden är desamma. Om du har ett större klientbibliotek som du bara vill visa på vissa sidor kan du skapa en unik sidprofil för just den mallen.

Gå till sidan Hem och Visa som publicerad i webbläsaren: http://localhost:4502/content/venia/us/en.html?wcmmode=disabled.

Visa sidans källa och kopian HTML i Raw-format.

Gå tillbaka till den utvecklingsmiljö du valt under modulen ui.frontend och öppna filen: ui.frontend/src/main/static/index.html

Skriv över innehållet i index.html och paste HTML som kopierades i föregående steg.

Sök efter inkluderingarna för clientlib-site.min.css, clientlib-site.min.js och ta bort.

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

Dessa inkluderingar tas bort eftersom de representerar den kompilerade versionen av CSS och JavaScript som genereras av modulen ui.frontend. Lämna kvar de andra klientbiblioteken som de kommer att proxideras från den AEM som körs.

Öppna ett nytt terminalfönster och navigera till mappen ui.frontend. Kör kommandot npm start:

$ cd ui.frontend
$ npm start

Det här kommandot startar webbpack-dev-server på http://localhost:8080/

Navigera till http://localhost:8080/ på en ny flik med samma webbläsare som en loggad instans av AEM. Du kan se Venias hemsida via webbpack-dev-server:

Låt webbpack-dev-server vara igång. Det används i nästa övning.

Öppna filen _productteaser.scss ui.frontend/src/main/styles/commerce/_productteaser.scss igen i modulen ui.front.

Gör följande ändringar i Product Teaser-gränsen:

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

Spara ändringarna och webbpack-dev-server uppdateras automatiskt med de nya formaten.

Lägg till en skugga och ta med rundade hörn i 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);
}

Uppdatera produktens namn så att det visas längst ned på teaser och ändra textfärgen.

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

Uppdatera produktens pris så att det också visas längst ned på teaser och ändra textfärgen.

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

    ...

Uppdatera mediefrågan längst ned så att du kan stapla namnet och priset på skärmar som är mindre än 992px.

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

Nu bör du se kortstilen återspeglas i webbpack-dev-server:

Ändringarna har dock inte distribuerats till AEM än. Du kan hämta lösningsfilen här.

Distribuera uppdateringarna till AEM med hjälp av dina Maven-kunskaper från en kommandoradsterminal:

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

Gå tillbaka till webbläsaren och uppdatera hemsidan: http://localhost:4502/editor.html/content/venia/us/en.html. Du bör se hur de uppdaterade produktmallarna används.

Experimentera genom att lägga till ytterligare produktutbildningar. Använd layoutläget om du vill ändra komponenternas bredd och förskjutning så att flera scener visas på en rad.