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

Kör följande Git-kommando för att 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 för att ansluta AEM till en Adobe Commerce-instans eller lägga till konfigurationerna i det nyskapade 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. Detta ä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. Du kan se att Maven-kommandot körde flera NPM-skript, inklusive npm run build. Kommandot npm run build definieras i filen package.json och har effekten att kompilera webbpaketprojektet och utlösa 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: {
...

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

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

Detta kopierar filen site.css 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 - Det här är ett tomt klientbibliotek som helt enkelt bäddar in nödvändiga beroenden från AEM Core Components. Kategorin är venia.base.

clientlib-CIF - Det här är också ett tomt klientbibliotek som helt enkelt bäddar in nödvändiga beroenden från AEM CIF Core Components. Kategorin är venia.cif.

clientlib-grid - Detta inkluderar den CSS som behövs 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:

Då öppnas sidan utan att någon av de AEM författarna till 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. Detta ä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:

Då öppnas mallen Startsida som sidan Startsida baseras på.

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

Då öppnas sidprincipen för mallen Landningssida:

Till höger visas en lista över klientbibliotek kategorier som kommer att inkluderas 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 - Det här är 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 policy kan vi se till 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 tas bort eftersom de representerar den kompilerade versionen av CSS och JavaScript som genereras av modulen ui.frontend. Lämna kvar de andra klientbiblioteken så att de 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

Detta 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 för att 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.