Personnaliser les composants principaux CIF d’Adobe Experience Manager customize-cif-components

Exécutez la commande git suivante afin de pouvoir 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 -PautoInstallSinglePackage -Pclassic

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 à la page d’accueil du site : http://localhost:4502/editor.html/content/acme/us/en.html

Insérez un nouveau composant Teaser de produit dans le conteneur de disposition principal de la page.

Développez le panneau latéral (s’il n’est pas déjà activé) et faites basculer la liste déroulante de recherche de ressources sur Produits. Cela devrait afficher la liste de produits disponibles à partir d’une instance Adobe Commerce connectée. Sélectionnez un produit puis faites-le glisser et déposez-le sur le composant Teaser de produit de la page.

Vous devriez maintenant voir un produit affiché par le teaser de produit. Le nom du produit et son prix sont des attributs par défaut qui sont affichés.

Connectez-vous à votre instance Adobe Commerce.

Accédez à Catalog  > Products.

Mettez à jour le filtre de recherche pour pouvoir rechercher le Configurable product (Produit configurable) utilisé lors de son ajout au composant Teaser dans l’exercice précédent. Ouvrez le produit en mode édition.

Dans le mode Produits, cliquez sur Add Attribute (Ajouter un attribut) > Create New Attribute (Créer un attribut).

Remplissez le formulaire New Attribute (Nouvel attribut) avec les valeurs suivantes (conservez les paramètres par défaut des autres valeurs).

Lorsque vous avez terminé, cliquez sur Save Attribute (Enregistrer l’attribut).

Faites défiler la page jusqu’au bas du produit et développez l’en-tête Attributes. Le nouveau champ Écologique devrait apparaître. Redéfinissez le bouton bascule sur Yes.

Cliquez sur Save pour enregistrer les modifications apportées au produit.

Accédez à System  > Tools  > Cache Management. Comme une mise à jour a été apportée au schéma de données, vous devez invalider certains types de cache dans Adobe Commerce.

Cochez la case Configuration et envoyez le type de cache pour Actualiser.

Ouvrez l’IDE GraphQL et entrez l’URL http://<server>/graphql dans la barre d’URL de votre IDE ou extension.

Ajoutez la requête de produit suivante, YOUR_SKU correspondant au SKU du produit utilisé dans l’exercice précédent :

  {
    products(
    filter: { sku: { eq: "YOUR_SKU" } }
    ) {
        items {
        name
        sku
        eco_friendly
        }
    }
}

Exécutez la requête ; vous devriez obtenir une réponse semblable à la suivante :

{
  "data": {
    "products": {
      "items": [
        {
          "name": "Valeria Two-Layer Tank",
          "sku": "VT11",
          "eco_friendly": 1
        }
      ]
    }
  }
}

Dans votre IDE, naviguez jusqu’au module core vers : core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

MyProductTeaser.java est une interface Java™ qui étend l’interface ProductTeaser CIF.

Une nouvelle méthode nommée isShowBadge() a déjà été ajoutée pour afficher un badge si le produit est considéré comme « Nouveau ».

Ajoutez une nouvelle méthode, isEcoFriendly(), à l’interface :

@ProviderType
public interface MyProductTeaser extends ProductTeaser {
    // Extend the existing interface with the additional properties which you
    // want to expose to the HTL template.
    public Boolean isShowBadge();

    public Boolean isEcoFriendly();
}

Ensuite, inspectez MyProductTeaserImpl.java à l’emplacement core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

Le motif de délégation des modèles Sling permet à MyProductTeaserImpl de référencer le modèle ProductTeaser via la propriété sling:resourceSuperType :

@Self
@Via(type = ResourceSuperType.class)
private ProductTeaser productTeaser;

Pour toutes les méthodes qui ne sont ni remplacées ni modifiées, vous pouvez renvoyer la valeur que ProductTeaser renvoie. Par exemple :

@Override
public String getImage() {
    return productTeaser.getImage();
}

Cela réduit la quantité de code Java™ qu’une implémentation doit écrire.

L’un des points d’extension supplémentaires fournis par les composants principaux AEM CIF est le point AbstractProductRetriever, qui permet d’accéder à des attributs de produits spécifiques. Inspectez la méthode initModel() :

import javax.annotation.PostConstruct;
...
@Model(adaptables = SlingHttpServletRequest.class, adapters = MyProductTeaser.class, resourceType = MyProductTeaserImpl.RESOURCE_TYPE)
public class MyProductTeaserImpl implements MyProductTeaser {
    ...
    private AbstractProductRetriever productRetriever;

    /* add this method to intialize the proudctRetriever */
    @PostConstruct
    public void initModel() {
        productRetriever = productTeaser.getProductRetriever();

        if (productRetriever != null) {
            productRetriever.extendProductQueryWith(p -> p.createdAt());
        }

    }
...

L’annotation @PostConstruct garantit que cette méthode est appelée dès que le modèle Sling est initialisé.

Notez que la requête GraphQL du produit a déjà été étendue à l’aide de la méthode extendProductQueryWith pour récupérer l’attribut created_at supplémentaire. Cet attribut est ensuite utilisé dans le cadre de la méthode isShowBadge().

Mettez la requête GraphQL à jour pour inclure l’attribut eco_friendly dans la requête partielle :

//MyProductTeaserImpl.java

private static final String ECO_FRIENDLY_ATTRIBUTE = "eco_friendly";

@PostConstruct
public void initModel() {
    productRetriever = productTeaser.getProductRetriever();

    if (productRetriever != null) {
        productRetriever.extendProductQueryWith(p -> p
            .createdAt()
            .addCustomSimpleField(ECO_FRIENDLY_ATTRIBUTE)
        );
    }
}

Ajouter à la méthode extendProductQueryWith est un moyen performant de s’assurer que d’autres attributs de produit sont disponibles pour le reste du modèle. Cela permet également de réduire le nombre de requêtes exécutées.

Dans le code ci-dessus, addCustomSimpleField est utilisé pour récupérer l’attribut eco_friendly. Cet attribut illustre la manière d’exécuter une requête pour des attributs personnalisés faisant partie du schéma Adobe Commerce.

Ajoutez un journal afin de pouvoir déboguer le code Java™ :

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
...
@Model(adaptables = SlingHttpServletRequest.class, adapters = MyProductTeaser.class, resourceType = MyProductTeaserImpl.RESOURCE_TYPE)
public class MyProductTeaserImpl implements MyProductTeaser {

private static final Logger LOGGER = LoggerFactory.getLogger(MyProductTeaserImpl.class);

Implémentez ensuite la méthode isEcoFriendly() :

@Override
public Boolean isEcoFriendly() {

    Integer ecoFriendlyValue;
    try {
        ecoFriendlyValue = productRetriever.fetchProduct().getAsInteger(ECO_FRIENDLY_ATTRIBUTE);
        if(ecoFriendlyValue != null && ecoFriendlyValue.equals(Integer.valueOf(1))) {
            LOGGER.info("*** Product is Eco Friendly**");
            return true;
        }
    } catch (SchemaViolationError e) {
        LOGGER.error("Error retrieving eco friendly attribute");
    }
    LOGGER.info("*** Product is not Eco Friendly**");
    return false;
}

Dans la méthode ci-dessus, productRetriever est utilisé pour récupérer le produit et la méthode getAsInteger() est utilisée pour obtenir la valeur de l’attribut eco_friendly. Selon les requêtes GraphQL que vous avez exécutées précédemment, vous savez que la valeur attendue lorsque l’attribut eco_friendly est défini sur Oui est égale au nombre entier 1.

Maintenant que le modèle Sling a été mis à jour, le balisage de composant doit être mis à jour pour afficher un indicateur Écologique basé sur le modèle Sling.

Dans l’IDE, accédez au module ui.apps et développez-le, puis développez la hiérarchie de dossiers comme suit : ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser et inspectez le fichier .content.xml.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    jcr:description="Product Teaser Component"
    jcr:primaryType="cq:Component"
    jcr:title="Product Teaser"
    sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser"
    componentGroup="Venia - Commerce"/>

La définition de composant pour le composant Teaser de produit de ce projet se trouve ci-dessus. Notez la propriété sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser". Il s’agit d’un exemple de création d’un composant proxy. Au lieu de copier et de coller tous les scripts HTL du composant Teaser de produit à partir des composants principaux CIF d’AEM, vous pouvez utiliser sling:resourceSuperType pour hériter de toutes les fonctionnalités.

Ouvrez le fichier productteaser.html. Il s’agit d’une copie du fichier productteaser.html du teaser de produit CIF.

<!--/* productteaser.html */-->
<sly
  data-sly-use.product="com.venia.core.models.commerce.MyProductTeaser"
  data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
  data-sly-use.actionsTpl="actions.html"
  data-sly-test.isConfigured="${properties.selection}"
  data-sly-test.hasProduct="${product.url}"
></sly>

Notez que le modèle Sling de MyProductTeaser est utilisé et affecté à la variable product.

Modifiez productteaser.html pour pouvoir appeler la méthode isEcoFriendly mise en œuvre dans l’exercice précédent :

...
<div
  data-sly-test="${isConfigured && hasProduct}"
  class="item__root"
  data-cmp-is="productteaser"
  data-virtual="${product.virtualProduct}"
>
  <div data-sly-test="${product.showBadge}" class="item__badge">
    <span>${properties.text || 'New'}</span>
  </div>
  <!--/* Insert call to Eco Friendly here */-->
  <div data-sly-test="${product.ecoFriendly}" class="item__eco">
    <span>Eco Friendly</span>
  </div>
  ...
</div>

Lors de l’appel d’une méthode de modèle Sling dans HTL, les parties get et is de la méthode sont ignorées et la première lettre est une minuscule. isShowBadge() devient donc .showBadge, et isEcoFriendly devient .ecoFriendly. La valeur booléenne renvoyée par .isEcoFriendly() détermine si <span>Eco Friendly</span> est affiché.

Vous trouverez ici plus d’informations sur data-sly-test et d’autres instructions de bloc HTL.

Enregistrez les modifications et 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 -PautoInstallSinglePackage -Pclassic

Ouvrez une nouvelle fenêtre de navigateur et accédez à AEM et à la Console OSGi  > Statut  > Modèles Sling  : http://localhost:4502/system/console/status-slingmodels

Recherchez MyProductTeaserImpl ; une ligne semblable à la suivante devrait apparaître :

com.venia.core.models.commerce.MyProductTeaserImpl - venia/components/commerce/productteaser

Cette ligne indique que le modèle Sling a été correctement déployé et mappé sur le composant approprié.

Actualisez la page d’accueil Venia à l’adresse http://localhost:4502/editor.html/content/venia/us/en.html où le teaser de produit a été ajouté.

Si l’attribut eco_friendly du produit est défini sur Oui, le texte « Écologique » devrait s’afficher sur la page. Essayez de passer à d’autres produits pour observer le changement de comportement.

Ouvrez ensuite le fichier error.log d’AEM pour voir les instructions de journal qui ont été ajoutées. Le fichier error.log se trouve dans <AEM SDK Install Location>/crx-quickstart/logs/error.log.

Dans les journaux AEM, recherchez les instructions de journal qui ont été ajoutées dans le modèle Sling :

2020-08-28 12:57:03.114 INFO [com.venia.core.models.commerce.MyProductTeaserImpl] *** Product is Eco Friendly**
...
2020-08-28 13:01:00.271 INFO [com.venia.core.models.commerce.MyProductTeaserImpl] *** Product is not Eco Friendly**
...

Téléchargez le fichier eco_friendly.svg. Ce fichier est utilisé comme badge Écologique.

Revenez à l’IDE et accédez au dossier ui.frontend.

Ajoutez le fichier eco_friendly.svg dans le dossier ui.frontend/src/main/resources/images :

Ouvrez le fichier productteaser.scss dans ui.frontend/src/main/styles/commerce/_productteaser.scss.

Ajoutez les règles Sass suivantes dans la classe .productteaser :

.productteaser {
    ...
    .item__eco {
        width: 60px;
        height: 60px;
        left: 0px;
        overflow: hidden;
        position: absolute;
        padding: 5px;

    span {
        display: block;
        position: absolute;
        width: 45px;
        height: 45px;
        text-indent: -9999px;
        background: no-repeat center center url('../resources/images/eco_friendly.svg');
        }
    }
...
}

Enregistrez les modifications et 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 -PautoInstallSinglePackage -Pclassic

Actualisez la page d’accueil Venia à l’adresse http://localhost:4502/editor.html/content/venia?lang=fr.html où le teaser Produit a été ajouté.