Donner un style aux composants principaux AEM CIF style-aem-cif-core-components

Exécutez la commande git suivante pour cloner le projet :

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

Créez et déployez le projet sur une instance locale d’AEM :

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

Ajoutez les configurations OSGi nécessaires pour connecter votre instance AEM à une instance Adobe Commerce ou ajoutez les configurations au projet nouvellement créé.

À ce stade, vous devriez disposer d’une version fonctionnelle d’un storefront connecté à une instance Adobe Commerce. Accédez à la page US > Home à l’adresse suivante : http://localhost:4502/editor.html/content/venia/us/en.html.

Vous devriez voir que le storefront utilise actuellement le thème Venia. En développant le menu principal du storefront, vous devriez voir différentes catégories indiquant que la connexion à Adobe Commerce fonctionne.

Accédez au module ui.frontend et développez-le, puis développez la hiérarchie de dossiers comme suit : ui.frontend/src/main/styles/commerce :

Notez qu’il existe plusieurs fichiers Sass (.scss) sous le dossier. Il s’agit des styles propres à Commerce pour chacun des composants Commerce.

Ouvrez le fichier _productteaser.scss.

Mettez la règle .item__image à jour et modifiez la règle de bordure :

.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 règle ci-dessus doit ajouter une bordure rose, en gras, au composant Teaser de produit.

Ouvrez une nouvelle fenêtre de terminal et accédez au dossier ui.frontend :

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

Exécutez la commande Maven suivante :

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

Inspectez la sortie du terminal. Notez que la commande Maven a exécuté plusieurs scripts NPM, y compris npm run build. La commande npm run build est définie dans le fichier package.json et a pour effet de compiler le projet webpack et de déclencher la génération de la bibliothèque cliente.

Inspectez le fichier ui.frontend/dist/clientlib-site/site.css :

Le fichier constitue la version compilée et minimisée de tous les fichiers Sass du projet.

Inspectez le fichier 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: {
...

Il s’agit du fichier de configuration de aem-clientlib-generator, et qui détermine où et comment les fichiers CSS et JavaScript compilés se transforment en une bibliothèque cliente AEM.

Dans le module ui.apps, inspectez le fichier : ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css :

Il s’agit du fichier site.css copié dans le projet ui.apps. Il fait désormais partie d’une bibliothèque cliente nommée clientlib-site avec une catégorie de venia.site. Une fois que le fichier fait partie du module ui.apps, il peut être déployé dans AEM.

Examinez ensuite les autres bibliothèques clientes générées par le projet :

Ces bibliothèques clientes ne sont pas gérées par le module ui.frontend. À la place, elles incluent les dépendances CSS et JavaScript fournies par Adobe. La définition de ces bibliothèques clientes figure dans le fichier .content.xml sous chaque dossier.

clientlib-base  : il s’agit d’une bibliothèque cliente vide qui incorpore simplement les dépendances nécessaires des composants principaux AEM. La catégorie est venia.base.

clientlib-cif  : il s’agit également d’une bibliothèque cliente vide qui incorpore simplement les dépendances nécessaires des composants principaux AEM CIF. La catégorie est venia.cif.

clientlib-grid  : inclut le fichier CSS nécessaire pour activer la fonction de grille réactive d’AEM. Utiliser la grille AEM active le mode de disposition dans l’éditeur AEM et permet aux personnes qui créent du contenu de redimensionner les composants. La catégorie est venia.grid et est incorporée dans la bibliothèque venia.base.

Inspectez les fichiers customheaderlibs.html et customfooterlibs.html sous ui.apps/src/main/content/jcr_root/apps/venia/components/page :

Ces scripts incluent les bibliothèques venia.base et venia.cif comme partie de toutes les pages.

Depuis le terminal, créez et déployez tout le projet sur une instance locale d’AEM :

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

Ouvrez un nouvel onglet de navigateur et accédez à la page d’accueil du site : http://localhost:4502/editor.html/content/venia/us/en.html.

Développez l’outil de recherche de ressources (rail latéral) en mode Modifier. Faites basculer le filtre Ressources sur Produits.

Faites glisser et déposez un nouveau produit sur la page d’accueil du conteneur de mise en page principal :

Le teaser de produit devrait maintenant comporter une bordure rose vif en fonction de la modification de règle CSS créée précédemment.

Accédez à la page d’accueil du site : http://localhost:4502/editor.html/content/venia/us/en.html

Sélectionnez le menu Informations sur la page, puis cliquez sur Afficher comme publié(e)  :

La page s’ouvre sans aucun code JavaScript pour l’environnement de création AEM chargé, lequel apparaîtrait sur le site publié. Notez que le paramètre de requête ?wcmmode=disabled est annexé à l’URL. Lors du développement du code CSS et JavaScript, il est recommandé d’utiliser ce paramètre pour simplifier la page sans intervention sur l’environnement de création AEM.

Affichez la source de la page ; vous devriez pouvoir constater que plusieurs bibliothèques clientes sont incluses :

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

Diffusées sur la page, les bibliothèques clientes sont précédées de /etc.clientlibs et sont diffusées par le biais d’un proxy afin d’éviter d’exposer un contenu sensible dans /apps ou /libs.

Remarquez venia/clientlibs/clientlib-site.min.css et venia/clientlibs/clientlib-site.min.js. Il s’agit des fichiers CSS et JavaScript compilés dérivés du module ui.frontend.

Accédez à la page d’accueil du site dans l’éditeur AEM : http://localhost:4502/editor.html/content/venia/us/en.html.

Sélectionnez le menu Informations sur la page, puis cliquez sur Éditer le modèle  :

Cela ouvre le modèle Page de destination sur lequel se base la page Accueil.

Dans le coin supérieur gauche, sélectionnez l’icône Informations sur la page, puis cliquez sur Politique de page.

La politique de page du modèle Page de destination s’ouvre alors :

Sur le côté droit figure la liste des catégories de bibliothèques clientes qui vont être incluses sur toutes les pages qui utilisent ce modèle.

• venia.dependencies – Fournit les bibliothèques de fournisseurs dont venia.site dépend.
• venia.site – Il s’agit de la catégorie de clientlib-site que le module ui.frontend génère.

Notez que d’autres modèles utilisent la même stratégie, la Page de contenu, la Page de destination, etc. En réutilisant la même politique, nous pouvons nous assurer que les mêmes bibliothèques clientes sont incluses sur toutes les pages.

Utiliser des politiques de modèle et de page pour gérer l’inclusion des bibliothèques clientes présente l’avantage de permettre de changer la politique par modèle. Par exemple, il se peut que vous gériez deux marques différentes au sein de la même instance AEM. Chaque marque comporte son propre style ou thème, mais les bibliothèques et le code de base sont les mêmes. Autre exemple : si vous disposez d’une bibliothèque cliente plus grande que vous ne souhaitez afficher que sur certaines pages, vous pouvez créer une politique de page unique réservée à ce modèle.

Dans le navigateur, accédez à la page d’accueil et à Afficher comme publié(e)  : http://localhost:4502/content/venia/us/en.html?wcmmode=disabled.

Affichez la source de la page et la copie du code HTML brut de la page.

Revenez à l’IDE de votre choix sous le module ui.frontend et ouvrez le fichier : ui.frontend/src/main/static/index.html

Remplacez le contenu de index.html et collez le code HTML copié à l’étape précédente.

Recherchez les inclusions clientlib-site.min.css, clientlib-site.min.js et supprimez-les.

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

Celles-ci sont supprimées car elles représentent la version compilée du code CSS et JavaScript généré par le module ui.frontend. Laissez les autres bibliothèques clientes telles qu’elles seront traitées par proxy à partir de l’instance AEM en cours d’exécution.

Ouvrez une nouvelle fenêtre de terminal et accédez au dossier ui.frontend. Exécutez la commande npm start :

$ cd ui.frontend
$ npm start

Vous démarrez ainsi le serveur webpack-dev-server sur http://localhost:8080/.

Accédez au dossier http://localhost:8080/ dans un nouvel onglet avec le même navigateur qu’une instance d’AEM connectée. Vous devriez voir la page d’accueil Venia via le serveur webpack-dev-server :

Laissez le serveur webpack-dev-server en cours d’exécution. Il sera utilisé dans le prochain exercice.

Dans le module ui.frontend, rouvrez le fichier _productteaser.scss à l’emplacement ui.frontend/src/main/styles/commerce/_productteaser.scss.

Apportez les modifications suivantes à la bordure du teaser de produit :

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

Enregistrez les modifications ; le serveur webpack-dev-server devrait automatiquement s’actualiser avec les nouveaux styles.

Ajoutez une ombre portée et ajoutez des coins arrondis au teaser de produit.

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

Mettez à jour le nom du produit devant s’afficher au bas du teaser et modifiez la couleur du texte.

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

Mettez à jour le prix du produit devant également s’afficher au bas du teaser et modifiez la couleur du texte.

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

    ...

Mettez la requête multimédia à jour au bas du teaser pour empiler le nom et le prix dans des écrans d’une taille inférieure à 992 px.

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

Le style de carte devrait maintenant se refléter sur le serveur webpack-dev-server :

Toutefois, les modifications n’ont pas encore été déployées dans AEM. Vous pouvez télécharger le fichier de solution ici.

Déployez les mises à jour dans AEM à l’aide de vos compétences Maven, à partir d’un terminal de ligne de commande :

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

Revenez à votre navigateur et actualisez la page d’accueil : http://localhost:4502/editor.html/content/venia/us/en.html. Vous devriez constater que les styles de teaser de produit mis à jour ont été appliqués.

Expérimentez en ajoutant d’autres teasers de produit. Utilisez le mode Disposition pour modifier la largeur et le décalage des composants afin d’afficher plusieurs teasers sur une même ligne.