AEM CIF Core-componenten aanpassen customize-cif-components

Voer de volgende git-opdracht uit, zodat u het project kunt klonen:

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

Bouw en stel het project aan een lokaal geval van AEM op:

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

Voeg de noodzakelijke configuraties OSGi toe zodat verbindt u uw instantie van AEM met een instantie van Adobe Commerce, of voegt de configuraties aan het gecreeerde project toe.

Op dit moment hebt u een werkende versie van een winkel die is verbonden met een Adobe Commerce-instantie. Navigeer aan US > Home pagina bij: http://localhost :4502 /editor.html/content/venia/us/en.html.

Je moet zien dat de winkel het Venia-thema gebruikt. Als u het hoofdmenu van de winkel uitbreidt, ziet u verschillende categorieën die aangeven dat de verbinding met Adobe Commerce werkt.

Navigeer aan de Pagina van het Huis van de plaats: http://localhost :4502 /editor.html/content/acme/us/en.html

Tussenvoegsel een nieuwe Component van het Teaser van het 0} Product in de belangrijkste lay-outcontainer op de pagina.

Breid het Zijpaneel (als niet reeds) van een knevel voorzien en schakel de activa vinder drop-down lijst aan Producten. Deze lijst moet een lijst weergeven met beschikbare producten van een verbonden Adobe Commerce-instantie. Selecteer een product en belemmering+drop het op de component van de Taser van het Product op de pagina.

Er wordt nu een product weergegeven door de Product Teaser. De naam van het product en de prijs van het product zijn standaardkenmerken die worden weergegeven.

Meld u aan bij uw Adobe Commerce-exemplaar.

Navigeer aan Catalogus > Producten.

Werk het onderzoeksfilter bij zodat kunt u het Configurable Product vinden dat wanneer toegevoegd aan de component van het Teaser in de vorige oefening wordt gebruikt. Open het product in de bewerkingsmodus.

Van de productmening, klik toevoegen Attribuut > Nieuw Attribuut creëren.

Vul de Nieuwe vorm van Attributen met de volgende waarden (verlaten standaardmontages voor andere waarden) uit

Klik sparen Attribuut wanneer gebeëindigd.

De rol aan de bodem van het product en breidt de rubriek van Attributen uit. U zou het nieuwe Eco Friendly gebied moeten zien. Schakelaar de knevel aan ja.

sparen de veranderingen in het product.

Navigeer aan Systeem > Hulpmiddelen > het Beheer van het Geheime voorgeheugen. Omdat het gegevensschema is bijgewerkt, moet u enkele soorten cache in Adobe Commerce ongeldig maken.

Controle de doos naast Configuratie en voorlegt het geheim voorgeheugentype voor verfrissen

Open GraphQL IDE en ga URL http://<commerce-server>/graphql in de bar URL van uw winde of uitbreiding in.

Voeg de volgende productvraagtoe waar YOUR_SKU SKU van het product is dat in de vorige oefening wordt gebruikt:

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

Voer de vraag uit en u zou een reactie als het volgende moeten krijgen:

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

De waarde van ja is een geheel van 1. Deze waarde is handig wanneer u de GraphQL-query in Java™ schrijft.

In uw winde, navigeer onder de kern module aan: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

{IDE van de plaatsIDE van 0} Kern

MyProductTeaser.java is een interface Java™ die de interface van CIF ProductTeaseruitbreidt.

Er is al een nieuwe methode met de naam isShowBadge() toegevoegd om een badge weer te geven als het product als "Nieuw" wordt beschouwd.

Voeg isEcoFriendly() toe aan de 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();
}

Deze nieuwe methode wordt geïntroduceerd om de logica in te kapselen om erop te wijzen als het product de eco_friendly attributen heeft die aan worden geplaatst ja of Nr.

Controleer vervolgens de MyProductTeaserImpl.java at core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java .

Het delegatiepatroon voor het Verdelen Modellenstaat MyProductTeaserImpl toe om ProductTeaser model via het sling:resourceSuperType bezit van verwijzingen te voorzien:

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

Voor de methoden die u niet wilt overschrijven of wijzigen, kunt u de waarde retourneren die de ProductTeaser retourneert. Bijvoorbeeld:

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

Deze methode minimaliseert de hoeveelheid code Java™ die een implementatie moet schrijven.

Een van de extra extensiepunten die door AEM CIF Core Components wordt geleverd, is de AbstractProductRetriever die toegang biedt tot specifieke productkenmerken. Controleer de methode 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 initialize the productRetriever */
    @PostConstruct
    public void initModel() {
        productRetriever = productTeaser.getProductRetriever();

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

    }
...

De @PostConstruct -annotatie zorgt ervoor dat deze methode wordt aangeroepen wanneer het Sling-model wordt geïnitialiseerd.

De product-GraphQL-query is al uitgebreid met de methode extendProductQueryWith om het extra created_at -kenmerk op te halen. Dit kenmerk wordt later gebruikt als onderdeel van de methode isShowBadge() .

Werk de GraphQL-query bij om het kenmerk eco_friendly op te nemen in de gedeeltelijke query:

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

Toevoegen aan de methode extendProductQueryWith is een krachtige manier om ervoor te zorgen dat extra productkenmerken beschikbaar zijn voor de rest van het model. Het minimaliseert ook het aantal uitgevoerde vragen.

In de bovenstaande code, wordt addCustomSimpleField gebruikt om het eco_friendly attribuut terug te winnen. Dit kenmerk demonstreert hoe u query's kunt uitvoeren voor aangepaste kenmerken die onderdeel zijn van het Adobe Commerce-schema.

Voeg een logger toe zodat u de code kunt zuiveren 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);

Implementeer vervolgens de methode 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;
}

In de bovenstaande methode wordt productRetriever gebruikt om het product op te halen en wordt de methode getAsInteger() gebruikt om de waarde van het kenmerk eco_friendly op te halen. Gebaseerd op de vragen van GraphQL u vroeger in werking stelde, weet u dat de verwachte waarde wanneer het eco_friendly attribuut aan "ja"wordt geplaatst eigenlijk een geheel van 1 is.

Nu het het Verdelen Model is bijgewerkt, moet de prijsverhoging van de Component worden bijgewerkt om eigenlijk een indicator van Milieuvriendelijk te tonen die op het het Verschilderen Model wordt gebaseerd.

Navigeer in de IDE naar de module ui.apps en vouw de maphiërarchie uit naar: ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser en inspecteer het bestand .content.xml .

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://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"/>

De bovenstaande componentdefinitie is voor de Product Teaser Component in uw project. Let op de eigenschap sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser" . Dit bezit is een voorbeeld van het creëren van de component van de Volmacht van de a 🔗. In plaats van de HTML-scripts van de Product Teaser te kopiëren en te plakken van de AEM CIF Core Components, kunt u sling:resourceSuperType gebruiken om alle functionaliteit over te nemen.

Open het bestand productteaser.html . Dit dossier is een exemplaar van het productteaser.html dossier van de Teaser van het Product van 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>

Het Sling-model voor MyProductTeaser wordt gebruikt en toegewezen aan de variabele product .

Wijzig productteaser.html zodat u de methode isEcoFriendly kunt aanroepen die in de vorige exercitie is geïmplementeerd:

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

Wanneer u een methode van het Sling Model in HTML aanroept, wordt het get - en is -gedeelte van de methode verwijderd en wordt de eerste letter verlaagd. Dus isShowBadge() wordt .showBadge en isEcoFriendly wordt .ecoFriendly . Op basis van de Booleaanse waarde die door .isEcoFriendly() wordt geretourneerd, wordt bepaald of de <span>Eco Friendly</span> wordt weergegeven.

Meer informatie over data-sly-test en andere het blokverklaringen van HTML kan in de Specificatie van HTML worden gevonden.

Sparen de veranderingen en stel de updates aan AEM op gebruikend uw Maven vaardigheden, van een bevel-lijn terminal:

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

Open een nieuw browser venster en navigeer aan AEM en de console OSGi > Status > Sling Models: http://localhost :4502/system/console/status-slingmodels

Zoek naar MyProductTeaserImpl en u zou een lijn als het volgende moeten zien:

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

Deze lijn wijst erop dat het het Verdelen Model behoorlijk wordt opgesteld en aan de correcte component in kaart gebracht.

Vernieuwen aan de Homepage van Venia in http://localhost :4502 /editor.html/content/venia/us/en.htmlwaar de Teaser van het Product is toegevoegd.

Als het product de eco_friendly attributen heeft die aan worden geplaatst ja, zou u de tekst "vriendschappelijk"op de pagina moeten zien. Probeer over te schakelen op verschillende producten om de gedragswijziging te zien.

Open vervolgens de AEM error.log om de toegevoegde loginstructies te bekijken. De error.log bevindt zich op <AEM SDK Install Location>/crx-quickstart/logs/error.log .

Zoek in de AEM-logboeken naar de toegevoegde loginstructies in het Sling-model:

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

Download het { dossier 0} eco_Vriendelijk.svg.Dit dossier wordt gebruikt als Milieuvriendelijk badge.

Ga terug naar de IDE en navigeer naar de map ui.frontend .

Voeg het bestand eco_friendly.svg toe aan de map ui.frontend/src/main/resources/images :

Open het bestand productteaser.scss om ui.frontend/src/main/styles/commerce/_productteaser.scss .

Voeg de volgende regels van de Klasse binnen de .productteaser klasse toe:

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

Sparen de veranderingen en stel de updates aan AEM op gebruikend uw Maven vaardigheden, van een bevel-lijn terminal:

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

Vernieuwen aan de Homepage van Venia in http://localhost :4502 /editor.html/content/venia/us/en.htmlwaar de Teaser van het Product is toegevoegd.