自訂AEM CIF核心元件

CIF Venia項目 是使用的參考程式碼基底 CIF核心元件. 在本教學課程中,您將進一步擴充 Product Teaser 元件以顯示Adobe Commerce的自訂屬性。 您也將進一步了解AEM與Adobe Commerce之間的GraphQL整合,以及CIF核心元件提供的擴充功能鈎點。

秘訣

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

您要建置的

Venia品牌最近開始使用可持續材料製造一些產品,而企業想要展示 生態友好 徽章作為Product Teaser的一部分。 系統會在Adobe Commerce中建立新的自訂屬性,以指出產品是否使用 生態友好 材料。 然後,此自訂屬性將會新增為GraphQL查詢的一部分,並顯示在指定產品的產品預告上。

Eco友好徽章最終實施

必備條件

完成本教學課程需要本機開發環境。 這包括已設定並連線至Adobe Commerce執行個體的AEM執行個體。 檢閱 使用AEM as a Cloud ServiceSDK設定本機開發. 若要完整遵循本教學課程,您需要權限才能新增 產品屬性 在Adobe Commerce。

您還需要GraphQL IDE,例如 GraphiQL 或是執行程式碼範例和教學課程的瀏覽器擴充功能。 如果您安裝瀏覽器擴充功能,請確定它能設定要求標題。 在Google Chrome上, Altair GraphQL客戶端 是可執行工作的擴充功能。

複製Venia專案

我們將複製 韋尼亞項目 然後覆寫預設樣式。

注意

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

  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主題配置的店面

製作Product Teaser

本教學課程將擴充產品預告元件。 首先,將產品預告的新例項新增至首頁,以了解基線功能。

  1. 導覽至 首頁 (位於: http://localhost:4502/editor.html/content/acme/us/en.html

  2. 插入新 Product Teaser 元件放入頁面上的主版面容器中。

    插入Product Teaser

  3. 展開「側面板」(如果尚未切換),並將資產尋找器下拉式清單切換為 產品. 這應該會顯示連線Adobe Commerce執行個體的可用產品清單。 選取產品和 拖放Product Teaser 元件。

    拖放產品預告

    注意

    注意,您也可以使用對話方塊來設定元件(按一下 扳手 圖示)。

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

    Product Teaser — 預設樣式

在Adobe Commerce中新增自訂屬性

AEM中顯示的產品和產品資料會儲存在Adobe Commerce中。 接下來,為 生態友好 做為產品屬性集的一部分,請使用Adobe Commerce UI。

秘訣

已有自訂 是/否 屬性,作為產品屬性集的一部分? 歡迎使用,並略過本節。

  1. 登入Adobe Commerce執行個體。

  2. 導覽至 目錄 > 產品.

  3. 更新搜尋篩選器以尋找 可設定產品 在先前練習中新增至Teaser元件時使用。 在編輯模式中開啟產品。

    搜尋有效產品

  4. 在產品檢視中,按一下 新增屬性 > 建立新屬性.

  5. 填寫 新屬性 表單中包含下列值(保留其他值的預設設定)

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

    新屬性表單

    按一下 儲存屬性 完成時。

  6. 捲動至產品底部,然後展開 屬性 標題。 您應該會看到新的 生態友好 欄位。 將切換開關切換為 .

    切換為「是」

    儲存 產品的變更。

    秘訣

    有關管理的更多詳細資訊 可在Adobe Commerce使用手冊中找到產品屬性.

  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 在IDE或擴展的URL欄中。

  2. 新增下列項目 產品查詢 where 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查詢時,此功能會相當實用。

更新Product Teaser的Sling模型

接下來,我們將實作Sling模型,以擴充Product Teaser的商業邏輯。 Sling模型,是註解導向的「POJO」(純舊Java對象),可實施元件所需的任何業務邏輯。 Sling模型與HTL指令碼搭配使用,是元件的一部分。 我們將遵循 Sling模型的委派模式 這樣我們就可以擴展現有產品預告模型的部分。

Sling模型以Java方式實作,可在 核心 生成項目的模組。

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

  1. 在IDE中,導航 核心 模組至: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

    核心位置IDE

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

    已新增新方法,命名為 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.java at core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

    Sling模型的委派模式 allows MyProductTeaserImpl 參考 ProductTeaser 模型 sling:resourceSuperType 屬性:

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

    對於我們不想覆寫或變更的所有方法,我們只需傳回 ProductTeaser 傳回。 例如:

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

    這可將實施需要寫入的Java程式碼量降至最低。

  4. 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 annotation可確保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模型為基礎。

自訂Product Teaser的標籤

AEM元件的常見擴充功能是修改元件產生的標籤。 這是透過覆寫 HTL指令碼 元件用來呈現其標籤的資訊。 HTML範本語言(HTL)是一種精簡的範本語言,AEM元件可用來根據撰寫的內容動態轉譯標籤,以允許重複使用元件。 例如,產品預告可反複重複使用,以顯示不同的產品。

在此情況下,我們想在預告頂端呈現橫幅,以根據自訂屬性指出產品為「生態友好」。 的設計模式 自定義標籤 元件的標準實際上是所有AEM元件的標準,而不只是AEM CIF核心元件。

注意

如果您使用CIF產品和類別選擇器(例如此產品預告)或CIF頁面元件來自訂元件,請務必納入必要項目 cif.shell.picker 元件對話方塊的clientlib 。 請參閱 CIF產品和類別選擇器的使用 以取得詳細資訊。

  1. 在IDE中,導航並展開 ui.apps 模組,然後展開資料夾階層以: ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser 檢查 .content.xml 檔案。

    Product Teaser 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". 這是建立 代理元件. 我們不必從AEM CIF核心元件複製並貼上所有產品預告HTL指令碼,而是可以使用 sling:resourceSuperType 繼承所有功能。

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

    請注意, MyProductTeaser 已使用並指派給 product 變數。

  3. 修改 productteaser.htmlisEcoFriendly 先前練習中實作的方法:

    ...
    <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 該方法的一部分被丟棄,第一字母被小寫。 So isShowBadge() com .showBadgeisEcoFriendly com .ecoFriendly. 根據傳回的布林值 .isEcoFriendly() 決定 <span>Eco Friendly</span> 的下界。

    有關 data-sly-test 其他 您可在此處找到HTL區塊陳述式.

  4. 使用Maven技能,從命令列終端儲存變更並將更新部署至AEM:

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

  6. 搜尋 MyProductTeaserImpl 您應該會看到如下的行:

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

    這表示Sling模型已正確部署並對應至正確的元件。

  7. 重新整理至 韋尼亞首頁 at http://localhost:4502/editor.html/content/venia/us/en.html 新增Product Teaser的位置。

    顯示「生態友好」消息

    如果產品具有 eco_friendly 屬性設定為 ,您應該會在頁面上看到「生態友好」文字。 嘗試切換至不同的產品,以查看行為變更。

  8. 下一步開啟AEM error.log 查看我們添加的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 屬性,作為屬性集的一部分。

為Eco友好徽章添加樣式

此時,何時顯示 生態友好 徽章正常運作,但純文字可能使用某些樣式。 接下來,在 ui.frontend 模組來完成實作。

  1. 下載 eco_friendly.svg 檔案。 這將用作 生態友好 徽章。

  2. 返回IDE並導航到 ui.frontend 檔案夾。

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

    新增生態友好SVG

  4. 開啟檔案 productteaser.scss at ui.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. 使用Maven技能,從命令列終端儲存變更並將更新部署至AEM:

    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  7. 重新整理至 韋尼亞首頁 at http://localhost:4502/editor.html/content/venia/us/en.html 新增Product Teaser的位置。

    Eco友好徽章最終實施

恭喜

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

獎金挑戰

檢閱 新增 已在Product Teaser中實作的徽章。 嘗試新增其他核取方塊,讓作者控制 生態友好 徽章。 您需要更新元件對話方塊,位於 ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser/_cq_dialog/.content.xml.

新徽章實作挑戰

其他資源

本頁內容