CIF-1608 - Category Carousel Component (#417)

* CIF-1608 - Category Carousel Component * created generic carousel component * created category carousel component * adjusted product carousel and related products component to extend the generic carousel component * added unit tests * CIF-1608 - Category Carousel Component * updated examples project with category carousel * added integration test for category carousel * CIF-1608 - Category Carousel Component * fixed IT failure * CIF-1608 - Category Carousel Component * fixed category carousel component icon in the component palette of page editor * CIF-1608 - Category Carousel Component * fixed code after merge conflicts * CIF-1608 - Category Carousel Component * extracted card template in featured category list * CIF-1608 - Category Carousel Component * clarifications in generic carousel * CIF-1608 - Category Carousel Component * fixed issue with JS code duplication Co-authored-by: Alex Kim <69959652+alkim91@users.noreply.github.com>
adobe · Oct 26, 2020 · 4e1681d · 4e1681d
1 parent d33ee62
commit 4e1681d
Showing 43 changed files with 1,027 additions and 205 deletions.
diff --git a/examples/bundle/src/main/resources/graphql/magento-graphql-featuredcategorylist.json b/examples/bundle/src/main/resources/graphql/magento-graphql-featuredcategorylist.json
@@ -11,7 +11,21 @@
       "id": 24,
       "name": "Women's Jackets",
       "url_path": "women/tops-women/jackets-women",
-      "position": 1,
+      "position": 2,
+      "image": null
+    },
+    "category__category_28": {
+      "id": 28,
+      "name": "Accessories",
+      "url_path": "accessories",
+      "position": 3,
+      "image": null
+    },
+    "category__category_32": {
+      "id": 32,
+      "name": "Watches",
+      "url_path": "watches",
+      "position": 4,
       "image": null
     }
   }

diff --git a/...bundle/src/test/java/com/adobe/cq/commerce/core/examples/servlets/GraphqlServletTest.java b/...bundle/src/test/java/com/adobe/cq/commerce/core/examples/servlets/GraphqlServletTest.java
@@ -128,6 +128,7 @@ private static AemContext createContext(String contentPath) {
     private static final String UPSELL_PRODUCTS_RESOURCE = PAGE + "/jcr:content/root/responsivegrid/upsellproducts";
     private static final String CROSS_SELL_PRODUCTS_RESOURCE = PAGE + "/jcr:content/root/responsivegrid/crosssellproducts";
     private static final String SEARCH_RESULTS_RESOURCE = PAGE + "/jcr:content/root/responsivegrid/searchresults";
+    private static final String CATEGORY_CAROUSEL_RESOURCE = PAGE + "/jcr:content/root/responsivegrid/categorycarousel";
     private static final String FEATURED_CATEGORY_LIST_RESOURCE = PAGE + "/jcr:content/root/responsivegrid/featuredcategorylist";
     private static final String NAVIGATION_RESOURCE = PAGE + "/jcr:content/root/responsivegrid/navigation";
     private static final String PRODUCTPAGE_BREADCRUMB_RESOURCE = PRODUCT_PAGE + "/jcr:content/breadcrumb";
@@ -361,6 +362,20 @@ public void testSearchResultsModel() throws ServletException {
         }
     }
 
+    @Test
+    public void testCategoryCarouselModel() throws ServletException {
+        prepareModel(CATEGORY_CAROUSEL_RESOURCE);
+        FeaturedCategoryList featureCategoryListModel = context.request().adaptTo(FeaturedCategoryList.class);
+        List<CategoryTree> categories = featureCategoryListModel.getCategories();
+        Assert.assertEquals(4, categories.size());
+
+        // Test that the servlet returns the expected categories in the correct order
+        Assert.assertEquals(15, categories.get(0).getId().intValue());
+        Assert.assertEquals(24, categories.get(1).getId().intValue());
+        Assert.assertEquals(28, categories.get(2).getId().intValue());
+        Assert.assertEquals(32, categories.get(3).getId().intValue());
+    }
+
     @Test
     public void testFeaturedCategoryListModel() throws ServletException {
         prepareModel(FEATURED_CATEGORY_LIST_RESOURCE);

diff --git a/examples/bundle/src/test/resources/context/jcr-content.json b/examples/bundle/src/test/resources/context/jcr-content.json
@@ -43,6 +43,23 @@
           "searchresults": {
             "sling:resourceType": "core/cif/components/commerce/searchresults/v1/searchresults"
           },
+          "categorycarousel": {
+            "items": {
+              "item0": {
+                "categoryId": "15"
+              },
+              "item1": {
+                "categoryId": "24"
+              },
+              "item2": {
+                "categoryId": "28"
+              },
+              "item3": {
+                "categoryId": "32"
+              }
+            },
+            "sling:resourceType": "core/cif/components/commerce/categorycarousel/v1/categorycarousel"
+          },
           "featuredcategorylist": {
             "items": {
               "item0": {

diff --git a/.../content/jcr_root/apps/cif-components-examples/clientlibs/cif-clientlib-base/.content.xml b/.../content/jcr_root/apps/cif-components-examples/clientlibs/cif-clientlib-base/.content.xml
@@ -3,4 +3,4 @@
     jcr:primaryType="cq:ClientLibraryFolder"
     allowProxy="{Boolean}true"
     categories="[cif-examples.base]"
-    embed="[venia-theme,cif-examples.react,core.cif.components.common,core.cif.components.product.v1,core.cif.components.productteaser.v1,core.cif.components.productcarousel.v1,core.cif.components.productcollection.v1,core.cif.components.searchbar.v1,core.cif.components.featuredcategorylist.v1.editor,core.cif.components.teaser.v1.editor,core.cif.components.navigation.v1]"/>
+    embed="[venia-theme,cif-examples.react,core.cif.components.common,core.cif.components.product.v1,core.cif.components.productteaser.v1,core.cif.components.productcarousel.v1,core.cif.components.productcollection.v1,core.cif.components.searchbar.v1,core.cif.components.featuredcategorylist.v1.editor,core.cif.components.teaser.v1.editor,core.cif.components.navigation.v1,core.cif.components.carousel.v1]"/>
diff --git a/...rc/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/cif-demo.css b/...rc/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/cif-demo.css
@@ -12,6 +12,10 @@
     max-width: 50%;
 }
 
+.cif-demo .carousel__container {
+    max-width: 50%;
+}
+
 .cif-demo .searchBar__root {
     display: block !important;
 }

diff --git a/...s/src/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/venia.css b/...s/src/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/venia.css
diff --git a/...in/content/jcr_root/apps/cif-components-examples/components/categorycarousel/.content.xml b/...in/content/jcr_root/apps/cif-components-examples/components/categorycarousel/.content.xml
@@ -0,0 +1,7 @@
+<?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="Featured Categories Component for the CIF Components Library"
+    jcr:primaryType="cq:Component"
+    jcr:title="Category Carousel"
+    sling:resourceSuperType="core/cif/components/commerce/categorycarousel/v1/categorycarousel"
+    componentGroup="Core Components Examples"/>
diff --git a/...i.content/src/main/content/jcr_root/content/core-components-examples/library/.content.xml b/...i.content/src/main/content/jcr_root/content/core-components-examples/library/.content.xml
@@ -245,6 +245,29 @@
                                 width="12"/>
                         </cq:responsive>
                     </teaser_1837085997>
+                    <teaser_1837086007
+                            cq:styleIds="[1547060090076]"
+                            jcr:primaryType="nt:unstructured"
+                            jcr:title="Category Carousel"
+                            sling:resourceType="core-components-examples/components/teaser"
+                            actionsEnabled="false"
+                            descriptionFromPage="true"
+                            fileReference="/content/dam/core-components-examples/library/cif-components/productcarousel.svg"
+                            linkURL="/content/core-components-examples/library/commerce/categorycarousel"
+                            textIsRich="true"
+                            titleFromPage="false">
+                        <cq:responsive jcr:primaryType="nt:unstructured">
+                            <default
+                                    jcr:primaryType="nt:unstructured"
+                                    width="3"/>
+                            <small
+                                    jcr:primaryType="nt:unstructured"
+                                    width="4"/>
+                            <extrasmall
+                                    jcr:primaryType="nt:unstructured"
+                                    width="12"/>
+                        </cq:responsive>
+                    </teaser_1837086007>
                 </container_1589240807>
             </responsivegrid>
         </root>

diff --git a/.../src/main/content/jcr_root/content/core-components-examples/library/commerce/.content.xml b/.../src/main/content/jcr_root/content/core-components-examples/library/commerce/.content.xml
@@ -23,6 +23,7 @@
     <relatedproducts/>
     <productlist/>
     <search/>
+    <categorycarousel/>
     <featuredcategorylist/>
     <teaser/>
     <navigation/>

diff --git a/.../jcr_root/content/core-components-examples/library/commerce/categorycarousel/.content.xml b/.../jcr_root/content/core-components-examples/library/commerce/categorycarousel/.content.xml
@@ -0,0 +1,140 @@
+<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="cq:Page">
+    <jcr:content
+        cq:lastModified="{Date}2020-10-14T12:05:03.012+02:00"
+        cq:lastModifiedBy="admin"
+        cq:tags="[]"
+        cq:template="/conf/core-components-examples/settings/wcm/templates/content-page"
+        jcr:description="Display product categories in a carousel"
+        jcr:primaryType="cq:PageContent"
+        jcr:title="Category Carousel"
+        sling:resourceType="cif-components-examples/components/page">
+        <root
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="wcm/foundation/components/responsivegrid">
+            <responsivegrid
+                jcr:primaryType="nt:unstructured"
+                sling:resourceType="wcm/foundation/components/responsivegrid">
+                <text_title
+                    cq:styleIds="[1644862132301]"
+                    jcr:created="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:createdBy="admin"
+                    jcr:lastModified="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    sling:resourceType="core/wcm/components/text/v2/text"
+                    text="&lt;h1>Category Carousel&lt;sub>v1&lt;/sub>&lt;/h1>"
+                    textIsRich="true"/>
+                <text_description
+                    cq:styleIds="[1544762734201]"
+                    jcr:created="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:createdBy="admin"
+                    jcr:lastModified="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    sling:resourceType="core/wcm/components/text/v2/text"
+                    text="&lt;p>The Category Carousel is a server side component written in HTL, allowing to display a list of categories in a carousel. Authors can configure the categories via&amp;nbsp;Multifield&amp;nbsp;and&amp;nbsp;Category Picker. The image displayed for each category is obtained from the commerce system or can be manually selected by the author.&lt;/p>&#xa;&lt;p>Note: due to the limited amount of sample data available, the link to the category pages will always display the same sample category data.&lt;/p>&#xa;"
+                    textIsRich="true"/>
+                <teaser_documentation
+                    cq:styleIds="[1550165685463]"
+                    jcr:created="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:createdBy="admin"
+                    jcr:description="&lt;p>GitHub&lt;/p>&#xd;&#xa;"
+                    jcr:lastModified="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="Technical Documentation"
+                    sling:resourceType="core-components-examples/components/teaser"
+                    actionsEnabled="false"
+                    descriptionFromPage="false"
+                    fileReference="/content/dam/core-components-examples/library/github-logo.svg"
+                    linkURL="https://github.com/adobe/aem-core-cif-components/tree/master/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/categorycarousel/v1/categorycarousel"
+                    textIsRich="true"
+                    titleFromPage="false"/>
+                <title_examples
+                    cq:styleIds="[1544759664489]"
+                    jcr:created="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:createdBy="admin"
+                    jcr:lastModified="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="Examples"
+                    sling:resourceType="core/wcm/components/title/v2/title"
+                    type="h2"/>
+                <title_standard
+                    cq:styleIds="[1544759676459]"
+                    jcr:created="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:createdBy="admin"
+                    jcr:lastModified="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="Standard"
+                    sling:resourceType="core/wcm/components/title/v2/title"
+                    type="h3"/>
+                <text_details
+                    jcr:created="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:createdBy="admin"
+                    jcr:lastModified="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    sling:resourceType="core/wcm/components/text/v2/text"
+                    text="&lt;p>Category Carousel displaying sample data.&lt;/p>"
+                    textIsRich="true"/>
+                <demo
+                    jcr:created="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:createdBy="admin"
+                    jcr:lastModified="{Date}2020-10-14T12:05:03.012+02:00"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    sling:resourceType="cif-components-examples/components/demo">
+                    <component
+                        jcr:primaryType="nt:unstructured"
+                        sling:resourceType="core-components-examples/components/demo/component">
+                        <categorycarousel
+                            jcr:created="{Date}2020-10-14T12:05:03.012+02:00"
+                            jcr:createdBy="admin"
+                            jcr:lastModified="{Date}2020-10-14T12:05:03.012+02:00"
+                            jcr:lastModifiedBy="admin"
+                            jcr:primaryType="nt:unstructured"
+                            jcr:title="Trending product categories"
+                            sling:resourceType="cif-components-examples/components/categorycarousel">
+                            <items jcr:primaryType="nt:unstructured">
+                                <item0
+                                    jcr:primaryType="nt:unstructured"
+                                    asset="/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/bruno-compete-hoodie/mh03-black_main_2.jpg"
+                                    categoryId="15"/>
+                                <item1
+                                    jcr:primaryType="nt:unstructured"
+                                    asset="/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/ingrid-running-jacket/wj04-orange_main_2.jpg"
+                                    categoryId="24"/>
+                                <item2
+                                    jcr:primaryType="nt:unstructured"
+                                    asset="/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/fusion-backpack/mb02-gray-0.jpg"
+                                    categoryId="28"/>
+                                <item3
+                                    jcr:primaryType="nt:unstructured"
+                                    asset="/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/summit-watch/mg03-br-0.jpg"
+                                    categoryId="32"/>
+                            </items>
+                        </categorycarousel>
+                    </component>
+                    <info
+                        jcr:primaryType="nt:unstructured"
+                        sling:resourceType="core-components-examples/components/tabs">
+                        <properties
+                            cq:panelTitle="Properties"
+                            jcr:primaryType="nt:unstructured"
+                            sling:resourceType="core-components-examples/components/demo/properties"
+                            reference="../../component"/>
+                        <markup
+                            cq:panelTitle="Markup"
+                            jcr:primaryType="nt:unstructured"
+                            sling:resourceType="core-components-examples/components/demo/markup"
+                            reference="../../component"/>
+                    </info>
+                </demo>
+            </responsivegrid>
+        </root>
+    </jcr:content>
+</jcr:root>
diff --git a/it/http/src/test/java/com/adobe/cq/commerce/it/http/CategoryCarouselComponentIT.java b/it/http/src/test/java/com/adobe/cq/commerce/it/http/CategoryCarouselComponentIT.java
@@ -0,0 +1,43 @@
+/*******************************************************************************
+ *
+ *    Copyright 2020 Adobe. All rights reserved.
+ *    This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License. You may obtain a copy
+ *    of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software distributed under
+ *    the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ *    OF ANY KIND, either express or implied. See the License for the specific language
+ *    governing permissions and limitations under the License.
+ *
+ ******************************************************************************/
+
+package com.adobe.cq.commerce.it.http;
+
+import org.apache.sling.testing.clients.ClientException;
+import org.apache.sling.testing.clients.SlingHttpResponse;
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Document;
+import org.jsoup.select.Elements;
+import org.junit.Assert;
+import org.junit.Test;
+
+public class CategoryCarouselComponentIT extends CommerceTestBase {
+
+    // Differentiates between the HTML output of the component itself, and the tab displaying the HTML output
+    private static final String CATEGORYCAROUSEL_SELECTOR = CMP_EXAMPLES_DEMO_SELECTOR + " .categorycarousel ";
+
+    @Test
+    public void testCategoryCarouselWithSampleData() throws ClientException {
+        SlingHttpResponse response = adminAuthor.doGet(COMMERCE_LIBRARY_PATH + "/categorycarousel.html", 200);
+        Document doc = Jsoup.parse(response.getContent());
+
+        // Check title
+        Elements elements = doc.select(CATEGORYCAROUSEL_SELECTOR + ".carousel__title");
+        Assert.assertEquals("Trending product categories", elements.first().html());
+
+        // Check that the components displays 4 categories
+        elements = doc.select(CATEGORYCAROUSEL_SELECTOR + ".carousel__cardscontainer > .categorycarousel__card");
+        Assert.assertEquals(4, elements.size());
+    }
+}
diff --git a/it/http/src/test/java/com/adobe/cq/commerce/it/http/NavigationComponentIT.java b/it/http/src/test/java/com/adobe/cq/commerce/it/http/NavigationComponentIT.java
@@ -34,6 +34,6 @@ public void testNavigationWithSampleData() throws ClientException {
 
         // Check the number of elements in the navigation menu
         Elements elements = doc.select(NAVIGATION_SELECTOR + ".categoryTree__root > .categoryTree__tree > .cmp-navigation__item");
-        Assert.assertEquals(10, elements.size());
+        Assert.assertEquals(11, elements.size());
     }
 }
diff --git a/ui.apps/karma.conf.js b/ui.apps/karma.conf.js
@@ -30,6 +30,7 @@ module.exports = function(config) {
     files: [
       'node_modules/@babel/polyfill/dist/polyfill.js',
       'src/main/content/jcr_root/apps/core/cif/components/commerce/product/**/js/*.js',
+      'src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/**/js/*.js',
       'src/main/content/jcr_root/apps/core/cif/components/structure/navigation/**/js/*.js',
       'src/main/content/jcr_root/apps/core/cif/components/content/teaser/**/js/*.js',
 

diff --git a/...main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/.content.xml b/...main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/.content.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" 
+    xmlns:jcr="http://www.jcp.org/jcr/1.0" 
+    jcr:primaryType="cq:Component" 
+    jcr:title="Carousel"
+    cq:icon="imageCarousel"
+    componentGroup=".hidden" />