CIF-899 - Display category image on generic category page

all/pom.xml

@@ -21,15 +21,15 @@
     <parent>
         <groupId>com.adobe.commerce.cif</groupId>
         <artifactId>core-cif-components-parent</artifactId>
-        <version>0.1.1-SNAPSHOT</version>
+        <version>0.2.0-SNAPSHOT</version>
         <relativePath>../parent/pom.xml</relativePath>
     </parent>
 
     <!-- ====================================================================== -->
     <!-- P R O J E C T  D E S C R I P T I O N                                   -->
     <!-- ====================================================================== -->
     <artifactId>core-cif-components-all</artifactId>
-    <version>0.1.1-SNAPSHOT</version>
+    <version>0.2.0-SNAPSHOT</version>
     <packaging>content-package</packaging>
 
     <name>AEM CIF Core Components - All</name>

bundles/core/pom.xml

@@ -20,15 +20,15 @@
     <parent>
         <groupId>com.adobe.commerce.cif</groupId>
         <artifactId>core-cif-components-parent</artifactId>
-        <version>0.1.1-SNAPSHOT</version>
+        <version>0.2.0-SNAPSHOT</version>
         <relativePath>../../parent/pom.xml</relativePath>
     </parent>
 
     <!-- ====================================================================== -->
     <!-- P R O J E C T  D E S C R I P T I O N                                   -->
     <!-- ====================================================================== -->
     <artifactId>core-cif-components-core</artifactId>
-    <version>0.1.1-SNAPSHOT</version>
+    <version>0.2.0-SNAPSHOT</version>
     <packaging>bundle</packaging>
 
     <name>AEM CIF Core Components - Core Bundle</name>

bundles/core/src/main/java/com/adobe/cq/commerce/core/components/internal/models/v1/productlist/ProductListImpl.java

@@ -50,7 +50,9 @@ public class ProductListImpl implements ProductList {
     private static final Logger LOGGER = LoggerFactory.getLogger(ProductListImpl.class);
 
     private static final boolean SHOW_TITLE_DEFAULT = true;
+    private static final boolean SHOW_IMAGE_DEFAULT = true;
     private static final int PAGE_SIZE_DEFAULT = 6;
+    private static final String CATEGORY_IMAGE_FOLDER = "catalog/category/";
 
     @Self
     private SlingHttpServletRequest request;
@@ -70,8 +72,11 @@ public class ProductListImpl implements ProductList {
     private Page productPage;
     private CategoryInterface category;
     private boolean showTitle;
+    private boolean showImage;
     private MagentoGraphqlClient magentoGraphqlClient;
 
+    private String mediaBaseUrl;
+
     private int navPageCursor = 1;
     private int navPagePrev;
     private int navPageNext;
@@ -82,6 +87,7 @@ public class ProductListImpl implements ProductList {
     private void initModel() {
         // read properties
         showTitle = properties.get(PN_SHOW_TITLE, currentStyle.get(PN_SHOW_TITLE, SHOW_TITLE_DEFAULT));
+        showImage = properties.get(PN_SHOW_IMAGE, currentStyle.get(PN_SHOW_IMAGE, SHOW_IMAGE_DEFAULT));
         navPageSize = properties.get(PN_PAGE_SIZE, currentStyle.get(PN_PAGE_SIZE, PAGE_SIZE_DEFAULT));
 
         setNavPageCursor();
@@ -142,6 +148,19 @@ public int getNextNavPage() {
         return this.navPageNext;
     }
 
+    @Override
+    public String getImage() {
+        if (StringUtils.isEmpty(category.getImage())) {
+            return StringUtils.EMPTY;
+        }
+        return mediaBaseUrl + CATEGORY_IMAGE_FOLDER + category.getImage();
+    }
+
+    @Override
+    public boolean showImage() {
+        return showImage;
+    }
+
     @Override
     public int getPreviousNavPage() {
         return this.navPagePrev;
@@ -203,11 +222,16 @@ private CategoryTreeQueryDefinition generateProductListQuery() {
             .id()
             .description()
             .name()
+            .image()
             .productCount()
             .products(pArgs, categoryProductsQuery -> categoryProductsQuery.items(generateProductQuery()).totalCount());
         return categoryTreeQueryDefinition;
     }
 
+    private StoreConfigQueryDefinition generateStoreConfigQuery() {
+        return q -> q.secureBaseMediaUrl();
+    }
+
     /* --- Utility methods --- */
 
     /**
@@ -223,13 +247,20 @@ private CategoryInterface fetchCategory(int categoryId) {
         QueryQuery.CategoryArgumentsDefinition searchArgs = q -> q.id(categoryId);
 
         CategoryTreeQueryDefinition queryArgs = generateProductListQuery();
-        String queryString = Operations.query(query -> query.category(searchArgs, queryArgs)).toString();
+        String queryString = Operations.query(query -> query
+            .category(searchArgs, queryArgs)
+            .storeConfig(generateStoreConfigQuery())).toString();
 
         // Send GraphQL request
         GraphqlResponse<Query, Error> response = magentoGraphqlClient.execute(queryString);
 
         // Get category & product list from response
         Query rootQuery = response.getData();
+
+        // GraphQL API provides only file name of the category image, but not the full url. We need the mediaBaseUrl to construct the full
+        // path.
+        mediaBaseUrl = rootQuery.getStoreConfig().getSecureBaseMediaUrl();
+
         return rootQuery.getCategory();
     }
 

bundles/core/src/main/java/com/adobe/cq/commerce/core/components/models/productlist/ProductList.java

@@ -29,6 +29,11 @@ public interface ProductList {
      */
     String PN_SHOW_TITLE = "showTitle";
 
+    /**
+     * Name of the boolean resource property indicating if the product list should render the category image.
+     */
+    String PN_SHOW_IMAGE = "showImage";
+
     /**
      * Name of the String resource property indicating number of products to render on front-end.
      */
@@ -75,6 +80,14 @@ default int getNextNavPage() {
         throw new UnsupportedOperationException();
     }
 
+    default String getImage() {
+        throw new UnsupportedOperationException();
+    }
+
+    default boolean showImage() {
+        throw new UnsupportedOperationException();
+    }
+
     default int getPreviousNavPage() {
         throw new UnsupportedOperationException();
     }

bundles/core/src/test/java/com/adobe/cq/commerce/core/components/internal/models/v1/productlist/ProductListImplTest.java

@@ -31,6 +31,7 @@
 import com.adobe.cq.commerce.core.components.models.productlist.ProductList;
 import com.adobe.cq.commerce.core.components.models.productlist.ProductListItem;
 import com.adobe.cq.commerce.magento.graphql.CategoryInterface;
+import com.adobe.cq.commerce.magento.graphql.CategoryTree;
 import com.adobe.cq.commerce.magento.graphql.ProductInterface;
 import com.adobe.cq.commerce.magento.graphql.Query;
 import com.adobe.cq.commerce.magento.graphql.gson.QueryDeserializer;
@@ -59,6 +60,9 @@ public void setUp() throws Exception {
         categoryQueryResult = rootQuery.getCategory();
         Whitebox.setInternalState(this.slingModel, "category", categoryQueryResult);
 
+        String mediaBaseUrl = rootQuery.getStoreConfig().getSecureBaseMediaUrl();
+        Whitebox.setInternalState(this.slingModel, "mediaBaseUrl", mediaBaseUrl);
+
         // AEM page
         productPage = mock(Page.class);
         when(productPage.getLanguage(false)).thenReturn(Locale.US);
@@ -80,6 +84,24 @@ public void getTitle() {
         Assert.assertEquals(categoryQueryResult.getName(), title);
     }
 
+    @Test
+    public void getImage() {
+        String image = this.slingModel.getImage();
+
+        Assert.assertEquals("https://my-magento.hostname/media/catalog/category/timeless.jpg", image);
+    }
+
+    @Test
+    public void getImageWhenMissingInResponse() {
+        ProductList list = new ProductListImpl();
+        CategoryTree category = mock(CategoryTree.class);
+        when(category.getImage()).thenReturn("");
+        Whitebox.setInternalState(list, "category", category);
+
+        String image = list.getImage();
+        Assert.assertEquals("", image);
+    }
+
     @Test
     public void getProducts() {
         Collection<ProductListItem> products = this.slingModel.getProducts();

bundles/core/src/test/resources/graphql/magento-graphql-category-result.json

@@ -3,6 +3,7 @@
     "id": 6,
     "name": "Running",
     "product_count": 8,
+    "image": "timeless.jpg",
     "products": {
       "items": [
         {
@@ -98,5 +99,8 @@
       ],
       "total_count": 13
     }
+  },
+  "storeConfig": {
+    "secure_base_media_url": "https://my-magento.hostname/media/"
   }
 }

parent/pom.xml

@@ -21,7 +21,7 @@
     <groupId>com.adobe.commerce.cif</groupId>
     <artifactId>core-cif-components-parent</artifactId>
     <packaging>pom</packaging>
-    <version>0.1.1-SNAPSHOT</version>
+    <version>0.2.0-SNAPSHOT</version>
 
     <name>AEM CIF Core Components - Parent</name>
     <description>Parent POM for AEM CIF Core Components</description>

pom.xml

@@ -21,7 +21,7 @@
     <groupId>com.adobe.commerce.cif</groupId>
     <artifactId>core-cif-components-reactor</artifactId>
     <packaging>pom</packaging>
-    <version>0.1.1-SNAPSHOT</version>
+    <version>0.2.0-SNAPSHOT</version>
 
     <name>AEM CIF Core Components Reactor</name>
     <description>Reactor POM for AEM CIF Core Components</description>
@@ -33,7 +33,7 @@
     <parent>
         <groupId>com.adobe.commerce.cif</groupId>
         <artifactId>core-cif-components-parent</artifactId>
-        <version>0.1.1-SNAPSHOT</version>
+        <version>0.2.0-SNAPSHOT</version>
         <relativePath>parent/pom.xml</relativePath>
     </parent>
 

ui.apps/pom.xml

@@ -20,14 +20,14 @@
     <parent>
         <groupId>com.adobe.commerce.cif</groupId>
         <artifactId>core-cif-components-parent</artifactId>
-        <version>0.1.1-SNAPSHOT</version>
+        <version>0.2.0-SNAPSHOT</version>
         <relativePath>../parent/pom.xml</relativePath>
     </parent>
     <!-- ====================================================================== -->
     <!-- P R O J E C T  D E S C R I P T I O N                                   -->
     <!-- ====================================================================== -->
     <artifactId>core-cif-components-apps</artifactId>
-    <version>0.1.1-SNAPSHOT</version>
+    <version>0.2.0-SNAPSHOT</version>
     <packaging>content-package</packaging>
 
     <name>AEM CIF Core Components - Content Package for apps</name>

ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productlist/v1/productlist/README.md

@@ -23,6 +23,7 @@ for a category are retrieved from Magento via GraphQL. The main usage of this co
 * Support for pagination
 * Configurable number of products on one page
 * Configurable category title display
+* Displays category image, if set in Magento and enabled in design dialog
 * Client-side loaded prices using GraphQL
 
 ### Use Object
@@ -37,6 +38,7 @@ This component is targeted for a category page listing products of a category.
 The following configuration properties are used:
 
 1. `./showTitle` - controls the visibility of the product category title
+2. `./showImage` - controls the visibility of the product category image
 
 ### Edit Dialog Properties
 
@@ -53,6 +55,7 @@ BLOCK category
     ELEMENT category__pagination
     ELEMENT category__placeholder
     ELEMENT category__categoryTitle
+    ELEMENT category__image
 
 BLOCK gallery
     ELEMENT gallery__root

ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productlist/v1/productlist/_cq_design_dialog/.content.xml

@@ -26,6 +26,14 @@
                                 text="Show title"
                                 uncheckedValue="false"
                                 value="true"/>
+                            <showImage
+                                jcr:primaryType="nt:unstructured"
+                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
+                                fieldDescription="Show category image of product list"
+                                name="./showImage"
+                                text="Show image"
+                                uncheckedValue="false"
+                                value="true"/>
                         </items>
                     </general>
                 </items>

ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productlist/v1/productlist/clientlibs/dist/css/productlist-aem.css

@@ -68,3 +68,13 @@
     cursor: default;
     touch-action: none;
 }
+
+.category__image {
+    min-height: 460px;
+    padding: 20px 0;
+    margin-bottom: 40px;
+    background: rgb(var(--venia-grey)) 50% no-repeat;
+    background-size: cover;
+    position: relative;
+    text-align: center;
+}

ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productlist/v1/productlist/image.html

@@ -0,0 +1,18 @@
+<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~
+  ~ Copyright 2019 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.
+  ~
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
+<template data-sly-template.listImage="${@ productList}">
+    <div class="category__image"
+         style="background-image: url('${productList.image @ context='uri'}');">
+    </div>
+</template>

ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productlist/v1/productlist/productlist.html

@@ -13,6 +13,7 @@
 -->
 <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
      data-sly-use.titleTemplate="title.html"
+     data-sly-use.imageTemplate="image.html"
      data-sly-use.itemTemplate="item.html"
      data-sly-use.paginationTemplate="paginationbar.html"
      data-sly-use.productList="com.adobe.cq.commerce.core.components.models.productlist.ProductList"
@@ -22,6 +23,8 @@
     <article class="category__root" data-sly-use.itemTemplate="item.html" data-locale="${page.language}" data-cmp-is="productlist">
         <sly data-sly-test="${productList.showTitle && productList.title}" data-sly-call="${titleTemplate.listTitle @ productList = productList}"/>
 
+        <sly data-sly-test="${productList.showImage && productList.image}" data-sly-call="${imageTemplate.listImage @ productList = productList}"/>
+
         <section data-sly-test="${productList.products}">
             <div class="gallery__root">
                 <div class="gallery__items" data-sly-list.product="${productList.products}">