自訂Adobe Experience Manager CIF核心元件 customize-cif-components

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

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

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

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

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

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

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

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

    }
...

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

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

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

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

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

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

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

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

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

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

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