自定義AEMCIF核心元件

CIF韋尼亞項目 是用於使用的參考代碼庫 CIF核心元件。 在本教程中,您將進一步擴展 產品預告 元件以顯示來自Adobe Commerce的自定義屬性。 您還將瞭解有關GraphQL在與Adobe Commerce之間集AEM成以及CIF核心元件提供的擴展掛接的更多資訊。

秘訣

使用 項AEM目原型 啟動您自己的商業實施。

您將構建的

維尼亞品牌最近開始使用可持續材料製造一些產品,該公司希望展示 生態友好 作為產品預告的一部分。 將在Adobe Commerce建立一個新的自定義屬性,以指示產品是否使用 生態友好 材料。 然後,此自定義屬性將作為GraphQL查詢的一部分添加,並顯示在指定產品的產品預告中。

生態友好徽章最終實施

必備條件

完成本教程需要本地開發環境。 這包括已配置並AEM連接到Adobe Commerce實例的運行實例。 查看 使用as a Cloud ServiceSDK設定本AEM地開發。 要完全學習本教程,您需要權限才能添加 產品的屬性 在Adobe Commerce。

您還需要GraphQL IDE,例如 圖形QL 或瀏覽器擴展,以運行代碼示例和教程。 如果安裝瀏覽器擴展,請確保它能夠設定請求標頭。 在Google·克羅姆, Altair GraphQL客戶端 是能做這個工作的分機。

克隆Venia項目

我們將克隆 韋尼亞計畫 然後覆蓋預設樣式。

注意

可以自由使用現有項目 (基於包含CIFAEM的項目原型)並跳過此部分。

  1. 運行以下git命令以克隆項目:

    $ git clone git@github.com:adobe/aem-cif-guides-venia.git
    
  2. 將項目構建並部署到以下的本地實AEM例:

    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  3. 添加必要的OSGi配置,將實AEM例連接到Adobe Commerce實例或將配置添加到新建立的項目。

  4. 此時,您應具有連接到Adobe Commerce實例的店面的工作版本。 導航到 US > Home 頁: http://localhost:4502/editor.html/content/venia/us/en.html

    您應看到店面當前正在使用Venia主題。 展開店面的「主菜單」,您應看到各種類別,表明與Adobe Commerce的連接正在工作。

    配置Venia主題的店面

編寫產品預告

在本教程中,產品預告元件將進行擴展。 作為第一步,將「產品預告」的新實例添加到首頁以瞭解基線功能。

  1. 導航到 首頁 地址欄: http://localhost:4502/editor.html/content/acme/us/en.html

  2. 插入新 產品預告 元件到頁面上的主佈局容器中。

    插入產品預告

  3. 展開「側面板」(如果尚未切換),並將資產查找器下拉清單切換到 產品。 這應顯示連接的Adobe Commerce實例的可用產品清單。 選擇產品並 拖放產品預告 元件。

    拖放產品預告

    注意

    注意,也可通過使用對話框配置元件(按一下 )的正平方根。

  4. 現在,您應看到產品預告顯示的產品。 產品名稱和產品價格是顯示的預設屬性。

    產品預告 — 預設樣式

在Adobe Commerce添加自定義屬性

所顯示的產品和產品數AEM據儲存在Adobe Commerce。 下一步,為 生態友好 作為使用Adobe CommerceUI設定的產品屬性的一部分。

秘訣

已有自定義 是/否 屬性作為產品屬性集的一部分? 您可以隨意使用,並跳過此部分。

  1. 登錄到您的Adobe Commerce實例。

  2. 導航到 目錄 > 產品

  3. 更新搜索篩選器以查找 可配置產品 在上一練習中添加到「預激」元件時使用。 在編輯模式下開啟產品。

    搜索Valeria產品

  4. 在產品視圖中,按一下 添加屬性 > 建立新屬性

  5. 填寫 新建屬性 表單,其值如下(保留其他值的預設設定)

    欄位集 欄位標籤
    屬性屬性 屬性標籤 生態友好
    屬性屬性 目錄輸入類型 是/否
    高級屬性屬性 屬性代碼 eco_friendly

    新建屬性窗體

    按一下 保存屬性 的子菜單。

  6. 滾動到產品底部並展開 屬性 的子菜單。 您應該看到新 生態友好 的子菜單。 切換到

    切換為是

    保存 產品的更改。

    秘訣
  7. 導航到 系統 > 工具 > 快取管理。 由於對資料架構進行了更新,因此我們需要使Adobe Commerce的某些快取類型失效。

  8. 選中旁邊的框 配置 並提交快取類型 刷新

    刷新配置快取類型

使用GraphQL IDE驗證屬性

在跳入代AEM碼之前,探索 GraphQL概述 使用GraphQL IDE。 與的Adobe Commerce集AEM成主要通過一系列GraphQL查詢完成。 瞭解和修改GraphQL查詢是擴展CIF核心元件的關鍵方法之一。

接下來,使用GraphQL IDE驗證 eco_friendly 屬性已添加到產品屬性集。 本教程中的螢幕截圖使用 Altair GraphQL客戶端

  1. 開啟GraphQL IDE並輸入URL http://<commerce-server>/graphql 的子菜單。

  2. 添加以下內容 產品查詢 何處 YOUR_SKUSKU 上次練習中使用的產品:

      {
        products(
        filter: { sku: { eq: "YOUR_SKU" } }
        ) {
            items {
            name
            sku
            eco_friendly
            }
        }
    }
    
  3. 執行查詢,您應得到如下響應:

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

    示例GraphQL響應

    請注意, 是整數 1。 這在我們以Java編寫GraphQL查詢時非常有用。

    秘訣

    更詳細的文檔關於 Adobe CommerceGraphQL可在此處找到

更新產品預告的吊具模型

接下來,我們將通過實施Sling模型來擴展產品預告的業務邏輯。 吊具模型,是注釋驅動的「POJO」(普通舊Java對象),用於實現元件所需的任何業務邏輯。 Sling Models與HTL指令碼一起作為元件的一部分使用。 我們將跟蹤 Sling模型的委託模式 這樣我們就可以擴展現有產品預告模型的部分。

Sling模型以Java形式實現,可在 生成項目的模組。

使用 您選擇的IDE 來修改標籤元素的屬性。 使用的螢幕截圖來自 Visual Studio代碼IDE

  1. 在IDE中,在 模組: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java

    核心位置IDE

    MyProductTeaser.java 是擴展CIF的Java介面 產品預告

    已添加名為 isShowBadge() 顯示徽章(如果產品被視為「新」)。

  2. 添加新方法, 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 屬性集

  3. 接下來,檢查 MyProductTeaserImpl.javacore/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代碼量減到最小。

  4. CIF核心元件提供的額AEM外擴展點之一是 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() 的雙曲餘切值。

  5. 更新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 的子菜單。

  6. 添加記錄器以幫助調試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);
    
  7. 接下來,實施 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模型。

自定義產品預告的標籤

元件的一AEM個公共擴展是修改元件生成的標籤。 通過覆蓋 HTL指令碼 元件用於呈現其標籤的標籤。 HTML模板語言(HTL)是一種輕量級模板語言AEM,元件使用它根據創作的內容動態呈現標籤,允許重新使用元件。 例如,產品預告可以反複使用,以顯示不同的產品。

在本例中,我們希望在預告的頂部渲染一個標題,以根據自定義屬性指示產品是「Eco Friendly」。 用於 自定義標籤 元件的標準實際上是所AEM有元件的標準,而不AEM僅是CIF核心元件。

注意

如果您使用CIF產品和類別選擇器(如此產品預告器)或CIF頁面元件來定制元件,請確保包括所需的元件 cif.shell.picker 元件對話框的客戶端庫。 請參閱 CIF產品和類別選取器的使用 的雙曲餘切值。

  1. 在IDE中,導航並展開 ui.apps 將資料夾層次結構展開到: ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser 檢查 .content.xml 的子菜單。

    產品預告ui.apps

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

    上面是我們項目中「產品預告」元件的元件定義。 注意屬性 sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser"。 這是建立 代理元件。 我們不能從CIF核心元件中複製和貼上所AEM有產品預告HTL指令碼,而是可以使用 sling:resourceSuperType 繼承所有功能。

  2. 開啟檔案 productteaser.html。 這是 productteaser.html 檔案 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>
    

    注意, MyProductTeaser 被使用並分配給 product 變數。

  3. 修改 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模型方法時 getis 該方法的一部分被丟棄並且第一字母被下寫。 所以 isShowBadge() 變成 .showBadgeisEcoFriendly 變成 .ecoFriendly。 基於從返回的布爾值 .isEcoFriendly() 確定 <span>Eco Friendly</span> 的上界。

    有關 data-sly-test 其他 HTL塊語句可在此處找到

  4. 從命令行終端保存更改並AEM部署更新以使用Maven技能:

    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  5. 開啟新瀏覽器窗口並導航AEM至 OSGi控制台 > 狀態 > 吊具模型: http://localhost:4502/system/console/status-slingmodels

  6. 搜索 MyProductTeaserImpl 您應看到如下行:

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

    這表示已正確部署Sling模型並將其映射到正確的元件。

  7. 刷新到 韋尼亞首頁http://localhost:4502/editor.html/content/venia/us/en.html 已添加產品預告的位置。

    顯示Eco Friendly消息

    如果產品 eco_friendly 屬性集 ,您應在頁面上看到「Eco Friendly」文本。 嘗試切換到不同的產品以查看行為更改。

  8. 下一步開啟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**
    ...
    
    注意

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

添加環保徽章的樣式

此時,何時顯示 生態友好 徽章起作用,但純文字檔案可能使用某些樣式。 下一步,將表徵圖和樣式添加到 ui.frontend 模組完成實現。

  1. 下載 eco_friendly.svg 的子菜單。 這將用作 生態友好 徽章。

  2. 返回到IDE並導航到 ui.frontend 的子菜單。

  3. 添加 eco_friendly.svg 檔案 ui.frontend/src/main/resources/images 資料夾:

    添加了環保SVG

  4. 開啟檔案 productteaser.scssui.frontend/src/main/styles/commerce/_productteaser.scss

  5. .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核心元件的樣式 的子菜單。

  6. 從命令行終端保存更改並AEM部署更新以使用Maven技能:

    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  7. 刷新到 韋尼亞首頁http://localhost:4502/editor.html/content/venia/us/en.html 已添加產品預告的位置。

    生態友好徽章最終實施

恭喜

您剛剛定製了第AEM一個CIF元件! 下載 已完成解決方案檔案

獎金挑戰

查看 新建 已在產品預告中實施的徽章。 嘗試添加附加複選框,以便作者控制 生態友好 應顯示徽章。 您需要更新元件對話框,位於 ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser/_cq_dialog/.content.xml

新的徽章實施挑戰

其他資源

本頁內容