Integrating Adobe Commerce Category Display Mode Configuration with PWA Frontend Category Pages

Author: del15881

packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap

@@ -4,7 +4,9 @@ exports[`useCategoryContent tests handles no data prop 1`] = `
 Object {
   "availableSortMethods": null,
   "categoryDescription": "Jewelry category",
+  "categoryDisplayMode": undefined,
   "categoryName": "Jewelry",
+  "cmsBlockContent": undefined,
   "filterOptions": undefined,
   "filters": null,
   "items": Array [
@@ -33,7 +35,9 @@ Object {
     },
   ],
   "categoryDescription": "Jewelry category",
+  "categoryDisplayMode": undefined,
   "categoryName": "Jewelry",
+  "cmsBlockContent": undefined,
   "filterOptions": undefined,
   "filters": Array [
     Object {

packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -27,6 +27,10 @@ export const GET_CATEGORY_CONTENT = gql`
                 description
                 url_key
                 url_path
+                display_mode
+                cms_block {
+                    content
+                }
             }
         }
     }

packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -196,6 +196,14 @@ export const useCategoryContent = props => {
     const availableSortMethods = sortData
         ? sortData.products.sort_fields.options
         : null;
+    const categoryDisplayMode =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].display_mode
+            : null;
+    const cmsBlockContent =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].cms_block?.content
+            : null;
 
     useEffect(() => {
         if (!categoryLoading && categoryData?.categories.items.length > 0) {
@@ -220,6 +228,8 @@ export const useCategoryContent = props => {
         setFilterOptions,
         items,
         totalCount,
-        totalPagesFromData
+        totalPagesFromData,
+        categoryDisplayMode,
+        cmsBlockContent
     };
 };