Adobe Experience Manager 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 -Pclassic

Voeg de noodzakelijke configuraties OSGi toe zodat kunt u uw AEM instantie met een instantie van Adobe Commerce verbinden of de configuraties toevoegen aan het onlangs gecreeerd project.

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 schakelaar de activa finder dropdown aan Producten. Dit zou een lijst van beschikbare producten van een verbonden instantie van Adobe Commerce moeten tonen. 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://<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
        }
      ]
    }
  }
}

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 CIF ProductTeaserinterface uitbreidt.

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 een methode isEcoFriendly() aan de interface toe:

@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();
}

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 alle methoden die niet worden overschreven of gewijzigd, kunt u de waarde retourneren die de ProductTeaser retourneert. Bijvoorbeeld:

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

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

Een van de extra extensiepunten die AEM Core Components biedt, is de AbstractProductRetriever die toegang biedt tot specifieke productkenmerken. Inspect 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 intialize the proudctRetriever */
    @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 illustreert hoe u kunt zoeken naar aangepaste kenmerken die deel uitmaken van het Adobe Commerce-schema.

Voeg een logger toe zodat u hiermee fouten in de Java™-code kunt opsporen:

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 wordt bijgewerkt, werk de prijsverhoging van de Component bij om een indicator van Eco Friendly te tonen die op het het Verdelen 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="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"/>

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

Open het bestand productteaser.html . Dit is een exemplaar van het productteaser.html dossier van de CIF Taser van het Product

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

Bewerk productteaser.html zodanig dat dit de methode isEcoFriendly aanroept 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.

Voor meer informatie over data-sly-test en andere het blokverklaringen van HTML zien de Specificatie van HTML.

Sparen de veranderingen en stel de updates in om AEM te gebruiken uw Maven vaardigheden, van een bevel-lijn terminal op te stellen:

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

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

Dit wijst erop dat het het Verdelen Model behoorlijk is 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 loginstructies te zien die zijn toegevoegd. De error.log bevindt zich op <AEM SDK Install Location>/crx-quickstart/logs/error.log .

Zoek in de AEM logboeken naar de logboekinstructies die in het Sling-model zijn toegevoegd:

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 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 in om AEM te gebruiken uw Maven vaardigheden, van een bevel-lijn terminal op te stellen:

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

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