自訂AEM CIF核心元件

此 CIF Venia專案是用於的參考程式碼基底 CIF Core Components. 在本教學課程中，您將進一步擴充產品Teaser 元件以顯示來自Adobe Commerce的自訂屬性。您也會進一步瞭解AEM與Adobe Commerce之間的GraphQL整合，以及CIF核心元件提供的擴充功能鉤點。

秘訣

使用 AEM專案原型當您開始自己的commerce實作時。

您將建置的內容

Venia品牌最近開始使用永續性材料製造一些產品，而企業想要展示 環保型 徽章作為產品Teaser的一部分。將在Adobe Commerce中建立新的自訂屬性，以指出產品是否使用 環保型 材質。然後，此自訂屬性將新增為GraphQL查詢的一部分，並顯示在指定產品的產品Teaser上。

必備條件

需要本機開發環境才能完成本教學課程。這包括執行中的AEM執行個體，其已設定並連線至Adobe Commerce執行個體。檢閱的需求和步驟使用AEMas a Cloud ServiceSDK設定本機開發. 若要完全按照本教學課程進行，您需要許可權才能新增產品的屬性在Adobe Commerce中。

您還需要GraphQL IDE，例如 GraphiQL 或瀏覽器擴充功能來執行程式碼範例和教學課程。如果您安裝瀏覽器擴充功能，請確定其有能力設定請求標頭。在Google Chrome上， Altair GraphQL使用者端是可執行此工作的擴充功能。

原地複製Venia專案

我們將複製 Venia專案然後覆寫預設樣式。

注意

歡迎使用現有專案 (根據包含CIF的AEM專案原型)並略過本節。

執行下列git命令以複製專案：

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

建置專案並將其部署到AEM的本機執行個體：

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

新增必要的OSGi設定以將您的AEM執行個體連線到Adobe Commerce執行個體，或將設定新增到新建立的專案。
此時，您應該有已連線至Adobe Commerce執行個體的有效店面版本。導覽至 US > Home 頁面位置： http://localhost:4502/editor.html/content/venia/us/en.html.

您應該會看到店面目前使用Venia主題。展開店面的「主要」功能表，應該會看到各種類別，表示與Adobe Commerce的連線正常運作。

編寫產品Teaser

產品Teaser元件將在本教學課程中不斷擴展。第一步，將產品Teaser的新執行個體新增到首頁，以瞭解基準線功能。

導覽至首頁網站的： http://localhost:4502/editor.html/content/acme/us/en.html
插入新專案 產品Teaser 元件放入頁面上的主要版面容器中。
展開「側面板」（如果尚未切換），然後將「資產尋找器」下拉式清單切換為產品. 這應該會顯示已連線之Adobe Commerce執行個體的可用產品清單。選取產品和拖放它登入 產品Teaser 元件時。

注意

注意，您也可以使用對話方塊(按一下扳手圖示)。
您現在應該會看到產品Teaser顯示的產品。產品的「名稱」和產品的「價格」是顯示的預設屬性。

在Adobe Commerce中新增自訂屬性

AEM中顯示的產品和產品資料會儲存在Adobe Commerce中。接著新增屬性 環保型 作為使用Adobe Commerce UI設定的產品屬性的一部分。

秘訣

已有自訂 是/否 屬性是否屬於產品屬性集？歡迎您隨時使用，並略過本節。

登入您的Adobe Commerce執行個體。
導覽至目錄 > 產品.
更新搜尋篩選器以尋找 可設定的產品 在上一個練習中新增至Teaser元件時使用。在編輯模式下開啟產品。
在產品檢視中，按一下 新增屬性 > 建立新屬性.
填寫 新增屬性 表單的預設值（保留其他值的預設設定）

欄位集欄位標籤值

屬性屬性屬性標籤 環保型

屬性屬性目錄輸入型別 是/否

進階屬性特性屬性代碼 eco_friendly

按一下 儲存屬性 完成後。
捲動至產品底部並展開屬性標題。您應該會看到新的 環保型 欄位。切換至是.

儲存對產品的變更。

秘訣

有關管理的更多詳細資訊您可以在Adobe Commerce使用手冊中找到產品屬性.
導覽至系統 > 工具 > 快取管理. 由於資料結構已更新，我們需要讓Adobe Commerce中的部分快取型別失效。
勾選「」旁的方塊設定並提交快取型別 重新整理

秘訣

更多關於以下專案的詳細資訊：快取管理可在Adobe Commerce使用手冊中找到.

欄位集	欄位標籤	值
屬性屬性	屬性標籤	環保型
屬性屬性	目錄輸入型別	是/否
進階屬性特性	屬性代碼	eco_friendly

使用GraphQL IDE驗證屬性

在跳入AEM程式碼之前，探索 GraphQL概觀使用GraphQL IDE。 Adobe Commerce與AEM的整合主要是透過一系列GraphQL查詢來完成。瞭解及修改GraphQL查詢是擴充CIF核心元件的重要方式之一。

接下來，使用GraphQL IDE來驗證 eco_friendly 屬性已新增至產品屬性集。本教學課程中的熒幕擷取畫面使用 Altair GraphQL使用者端.

開啟GraphQL IDE並輸入URL http://<commerce-server>/graphql 在IDE或擴充功能的URL列中。

新增下列專案產品查詢位置 YOUR_SKU 是 SKU 上個練習使用的產品：

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

執行查詢，您應該會收到如下的回應：
```
{
  "data": {
    "products": {
      "items": [
        {
          "name": "Valeria Two-Layer Tank",
          "sku": "VT11",
          "eco_friendly": 1
        }
      ]
    }
  }
}
```
請注意，值是為的整數 1. 當我們使用Java撰寫GraphQL查詢時，這會很有用。

秘訣

更詳細的檔案關於您可以在此處找到Adobe Commerce GraphQL.

更新產品Teaser的Sling模型

接下來，我們將實作Sling模型，以擴充Product Teaser的商業邏輯。 Sling模型是註解導向的「POJO」（純舊的Java物件），可實作元件所需的任何商業邏輯。 Sling模型會與HTL指令碼搭配使用，當作元件的一部分。我們將遵循 Sling模型的委派模式因此我們只需延伸現有產品Teaser模型的部分即可。

Sling模型會實作為Java，且可在以下網址找到：核心所產生專案的模組。

使用您選擇的IDE 匯入Venia專案。使用的熒幕擷取畫面來自 Visual Studio Code IDE.

在IDE中，瀏覽至核心模組至： core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

MyProductTeaser.java 是擴充CIF的Java介面 ProductTeaser 介面。

已新增名為的新方法 isShowBadge() 以在產品視為「新」時顯示徽章。

新增方法， isEcoFriendly() 至介面：

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

這是我們介紹的一種新方法，用來封裝邏輯以指出產品是否具有 eco_friendly 屬性設定為是或否.

接下來，檢查 MyProductTeaserImpl.java 於 core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

此 Sling模型的委派模式允許 MyProductTeaserImpl 以參考 ProductTeaser 模型透過 sling:resourceSuperType 屬性：
```
@Self
@Via(type = ResourceSuperType.class)
private ProductTeaser productTeaser;
```
對於我們不想要覆寫或變更的所有方法，我們只需傳回 ProductTeaser 會傳回。例如：
```
@Override
public String getImage() {
    return productTeaser.getImage();
}
```
如此一來，實作所需寫入的Java程式碼量便會降至最低。

AEM CIF核心元件提供的額外擴充功能點之一是 AbstractProductRetriever 可讓您存取特定產品屬性。 Inspect 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());
        }

    }
...

此 @PostConstruct 註解可確保在Sling模型初始化後立即呼叫此方法。

請注意，產品GraphQL查詢已使用擴展 extendProductQueryWith 擷取其他 created_at 屬性。此屬性稍後會用作 isShowBadge() 方法。

更新GraphQL查詢以包含 eco_friendly 部分查詢中的屬性：
```
//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)
        );
    }
}
```
新增至 extendProductQueryWith 方法是一種確保其他產品屬性可供模型的其餘部分使用的強大方法。它也會將執行的查詢數減到最少。

在上述程式碼中，addCustomSimpleField 用於擷取 eco_friendly 屬性。以下說明如何查詢屬於Adobe Commerce結構描述的任何自訂屬性。

注意

此 createdAt() 方法實際上已實作為產品介面. 大部分常見的結構描述屬性都已實作，因此請只使用 addCustomSimpleField 以取得真正自訂的屬性。

新增記錄器以協助對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);

接下來，實作 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;
}

在上述方法中 productRetriever 用於擷取產品和 getAsInteger() 方法用來取得 eco_friendly 屬性。根據我們先前執行的GraphQL查詢，我們知道當 eco_friendly 屬性已設定為"是「」實際上是整數 1.

現在已更新Sling模型，需要更新元件標籤以實際顯示 環保型 根據Sling模型。

自訂產品Teaser的標籤

AEM元件的常見擴充功能是修改元件產生的標籤。這是透過覆寫 HTL指令碼元件用來呈現其標籤的。 HTML範本語言(HTL)是一種輕量型的範本語言，AEM元件會使用它來根據編寫的內容動態呈現標籤，並允許重複使用元件。例如，產品Teaser可以重複使用，以顯示不同的產品。

在我們的案例中，我們想要在Teaser上方呈現橫幅，以根據自訂屬性指出產品是「環保的」。的設計模式自訂標籤實際上元件是所有AEM元件的標準，而不僅僅是AEM CIF核心元件。

注意

如果您使用CIF產品和類別選擇器（如本產品Teaser或CIF頁面元件）自訂元件，請務必包含必要的 cif.shell.picker 元件對話方塊的clientlib。另請參閱 CIF產品和類別選擇器的使用方式以取得詳細資訊。

在IDE中，瀏覽並展開 ui.apps 模組並展開資料夾階層以： ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser 並檢查 .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"/>
```
以上是我們專案中產品Teaser元件的元件定義。注意屬性 sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser". 此為建立 Proxy元件. 與其複製和貼上來自AEM CIF核心元件的所有Product Teaser HTL指令碼，我們可以使用 sling:resourceSuperType 以繼承所有功能。

開啟檔案 productteaser.html. 此為的副本 productteaser.html 檔案來自 CIF產品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>

請注意，的Sling模型 MyProductTeaser 已使用並指派給 product 變數。

修改 productteaser.html 以呼叫 isEcoFriendly 上一個練習實作的方法：

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

在HTL中呼叫Sling模型方法時 get 和 is 會捨棄方法的部分，且第一個字母會變成小寫。所以 isShowBadge() 變成 .showBadge 和 isEcoFriendly 變成 .ecoFriendly. 根據傳回的布林值 .isEcoFriendly() 決定 <span>Eco Friendly</span> 隨即顯示。

更多關於的資訊 data-sly-test 和其他 HTL區塊陳述可在此處找到.

從命令列終端機，使用Maven技能儲存變更並將更新部署到AEM：

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

開啟新的瀏覽器視窗，並導覽至AEM與 OSGi控制檯 > 狀態 > Sling模型： http://localhost:4502/system/console/status-slingmodels
搜尋 MyProductTeaserImpl 而且您應該會看到類似以下的一行：
```
com.venia.core.models.commerce.MyProductTeaserImpl - venia/components/commerce/productteaser
```
這表示Sling模型已正確部署並對應至正確的元件。
重新整理至 Venia首頁 於 http://localhost:4502/editor.html/content/venia/us/en.html 新增產品Teaser的位置。

如果產品具有 eco_friendly 屬性設定為是，您應該會在頁面上看到「生態友好」文字。請嘗試切換至不同的產品，以檢視行為變更。
接著開啟AEM error.log 以檢視新增的記錄陳述式。此 error.log 位於 <AEM SDK Install Location>/crx-quickstart/logs/error.log.

搜尋AEM記錄檔以檢視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**
...
```
注意

如果Teaser中使用的產品沒有 eco_friendly 屬性，作為其屬性集的一部分。

新增環保徽章的樣式

此時，顯示「」的時機邏輯 環保型 徽章正在運作，但純文字可以使用某些樣式。接下來，將圖示和樣式新增至 ui.frontend 完成實作的模組。

下載 eco_friendly.svg 檔案。這將用作 環保型 徽章。
返回IDE並瀏覽至 ui.frontend 資料夾。
新增 eco_friendly.svg 檔案到 ui.frontend/src/main/resources/images 資料夾：
開啟檔案 productteaser.scss 於 ui.frontend/src/main/styles/commerce/_productteaser.scss.

將下列Sass規則新增至 .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');
        }
    }
...
}

注意

簽出設定CIF核心元件的樣式瞭解更多有關前端工作流程的詳細資訊。

從命令列終端機，使用Maven技能儲存變更並將更新部署到AEM：

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

重新整理至 Venia首頁 於 http://localhost:4502/editor.html/content/venia/us/en.html 新增產品Teaser的位置。

恭喜

您剛剛自訂了第一個AEM CIF元件！下載已在此完成解決方案檔案.

額外挑戰

檢閱的功能新增已在產品Teaser中實作的徽章。嘗試新增其他核取方塊讓作者控制何時 環保型 應顯示徽章。您需要更新元件對話方塊： ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser/_cq_dialog/.content.xml.

自訂AEM CIF核心元件

您將建置的內容

必備條件

原地複製Venia專案

編寫產品Teaser

在Adobe Commerce中新增自訂屬性

使用GraphQL IDE驗證屬性

更新產品Teaser的Sling模型

自訂產品Teaser的標籤

新增環保徽章的樣式

恭喜

額外挑戰

其他資源

Business.Adobe.com 資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe