Customize Adobe Experience Manager CIF Core Components customize-cif-components

Run the following git command so you can clone the project:

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

Build and deploy the project to a local instance of AEM:

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

Add the necessary OSGi configurations so you can connect your AEM instance to an Adobe Commerce instance or add the configurations to the newly created project.

At this point, you should have a working version of a storefront that is connected to an Adobe Commerce instance. Navigate to the US > Home page at: http://localhost:4502/editor.html/content/venia/us/en.html.

You should see that the storefront currently is using the Venia theme. Expanding the Main Menu of the storefront, you should see various categories, indicating that the connection to Adobe Commerce is working.

Navigate to the Home Page of the site: http://localhost:4502/editor.html/content/acme/us/en.html

Insert a new Product Teaser Component into the main layout container on the page.

Expand the Side Panel (if not already toggled) and switch the asset finder dropdown to Products. This should display a list of available products from a connected Adobe Commerce instance. Select a product and drag+drop it onto the Product Teaser component on the page.

You should now see a Product being displayed by the Product Teaser. The Name of the product and the Price of the product are default attributes that are displayed.

Log in to your Adobe Commerce instance.

Navigate to Catalog > Products.

Update the search filter so you can find the Configurable Product used when added to the Teaser component in the previous exercise. Open the product in edit mode.

From the product view, click Add Attribute > Create New Attribute.

Fill out the New Attribute form with the following values (leave default settings for other values)

Click Save Attribute when finished.

Scroll to the bottom of the product and expand the Attributes heading. You should see the new Eco Friendly field. Switch the toggle to Yes.

Save the changes to the product.

Navigate to System > Tools > Cache Management. Because an update was made to the data schema, you must invalidate some of the Cache Types in Adobe Commerce.

Check the box next to Configuration and submit the cache type for Refresh

Open the GraphQL IDE and enter the URL http://<server>/graphql in the URL bar of your IDE or extension.

Add the following products query where YOUR_SKU is the SKU of the product used in the previous exercise:

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

Execute the query and you should get a response like the following:

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

In your IDE, navigate under the core module to: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

MyProductTeaser.java is a Java™ Interface that extends the CIF ProductTeaser interface.

Already a new method has been added named isShowBadge() to display a badge if the product is considered “New”.

Add a method isEcoFriendly() to the 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();
}

Next, inspect the MyProductTeaserImpl.java at core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

The delegation pattern for Sling Models allows MyProductTeaserImpl to reference ProductTeaser model via the sling:resourceSuperType property:

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

For all the methods that are not overridden or changed, you can return the value that the ProductTeaser returns. For example:

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

This minimizes the amount of Java™ code that an implementation must write.

One of the extra extension points provided by AEM CIF Core Components is the AbstractProductRetriever which provides access to specific product attributes. Inspect the initModel() method:

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

    }
...

The @PostConstruct annotation ensures that this method is called when the Sling Model is initialized.

Notice that the product GraphQL query has already been extended using the extendProductQueryWith method to retrieve the additional created_at attribute. This attribute is later used as part of the isShowBadge() method.

Update the GraphQL query to include the eco_friendly attribute in the partial 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)
        );
    }
}

Adding to the extendProductQueryWith method is a powerful way to ensure that additional product attributes are available to the rest of the model. It also minimizes the number of queries executed.

In the above code, theaddCustomSimpleField is used to retrieve the eco_friendly attribute. This illustrates how you can query for any custom attributes that are part of the Adobe Commerce schema.

Add a logger so that it can help you debug the Java™ code:

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

Next, implement the isEcoFriendly() method:

@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 the above method, the productRetriever is used to fetch the product and the getAsInteger() method is used to get the value of the eco_friendly attribute. Based on the GraphQL queries you ran earlier, you know that the expected value when the eco_friendly attribute is set to “Yes” is actually an integer of 1.

Now that the Sling Model is updated, update the Component markup to display an indicator of Eco Friendly based on the Sling Model.

In the IDE, navigate and expand the ui.apps module and expand the folder hierarchy to: ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser and inspect the .content.xml file.

<?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"/>

The Component definition for the Product Teaser Component in this project is above. Notice the property sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser". This is an example of creating a Proxy component. Instead of copying and pasting all the Product Teaser HTL scripts from the AEM CIF Core Components, you can use the sling:resourceSuperType to inherit all functionality.

Open the file productteaser.html. This is a copy of the productteaser.html file from the CIF Product Teaser

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

Notice that the Sling Model for MyProductTeaser is used and assigned to the product variable.

Edit productteaser.html so that it calls the isEcoFriendly method implemented in the previous exercise:

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

When calling a Sling Model method in HTL the get and is portion of the method is dropped and the first letter is lowercased. So isShowBadge() becomes .showBadge and isEcoFriendly becomes .ecoFriendly. Based on the boolean value returned from .isEcoFriendly() determines if the <span>Eco Friendly</span> is displayed.

For more information about data-sly-test and other HTL block statements see The HTL Specification.

Save the changes and deploy the updates to AEM using your Maven skills, from a command-line terminal:

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

Open a new browser window and navigate to AEM and the OSGi console > Status > Sling Models: http://localhost:4502/system/console/status-slingmodels

Search for MyProductTeaserImpl and you should see a line like the following:

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

This indicates that the Sling Model has been properly deployed and mapped to the correct component.

Refresh to the Venia Home Page at http://localhost:4502/editor.html/content/venia/us/en.html where the Product Teaser has been added.

If the product has the eco_friendly attribute set to Yes, you should see the text “Eco Friendly” on the page. Try switching to different products to see the behavior change.

Next, open up the AEM error.log to see the log statements that were added. The error.log is at <AEM SDK Install Location>/crx-quickstart/logs/error.log.

Search the AEM logs to see the log statements that were added in the 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 the eco_friendly.svg file. This is used as the Eco Friendly badge.

Return to the IDE and navigate to the ui.frontend folder.

Add the eco_friendly.svg file to the ui.frontend/src/main/resources/images folder:

Open the file productteaser.scss at ui.frontend/src/main/styles/commerce/_productteaser.scss.

Add the following Sass rules inside the .productteaser class:

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

Save the changes and deploy the updates to AEM using your Maven skills, from a command-line terminal:

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

Refresh to the Venia Home Page at http://localhost:4502/editor.html/content/venia/us/en.html where the Product Teaser has been added.