feat: Visibility for CMS Sections and Blocks (SWF-280)

shopware · Mar 7, 2023 · 5008dcb · 5008dcb
1 parent b036031
commit 5008dcb
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 2 deletions.
diff --git a/.changeset/cold-ways-peel.md b/.changeset/cold-ways-peel.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/types": patch
+---
+
+Adds visibility object to section and block type
diff --git a/.changeset/shaggy-actors-pull.md b/.changeset/shaggy-actors-pull.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/helpers-next": patch
+---
+
+Adds Visibility by device feature for section and block (CMS)
diff --git a/packages/helpers/src/cms/getCmsLayoutConfiguration.ts b/packages/helpers/src/cms/getCmsLayoutConfiguration.ts
@@ -1,4 +1,9 @@
-import { CmsBlock, CmsSection, CmsSlot } from "@shopware-pwa/types";
+import {
+  CmsBlock,
+  CmsSection,
+  CmsSlot,
+  CmsVisibility,
+} from "@shopware-pwa/types";
 
 /**
  * @beta
@@ -35,6 +40,45 @@ function isCmsSection(
 ): content is CmsSection {
   return content.apiAlias === "cms_section";
 }
+
+const deviceMap: { [key in CmsVisibility]: "md" | "xl" | "lg" } = {
+  mobile: "md",
+  tablet: "lg",
+  desktop: "xl",
+};
+
+
+/**
+ * Get css object for visibility classes
+ * 
+ *  mobile  -> "md"
+ *  tablet  -> "lg"
+ *  desktop -> "xl"
+ * 
+ *  i.e. if tablet device is set to hidden, the output class will be "lg:hidden"
+ */
+function getVisibilityClasses(content: CmsBlock | CmsSection | CmsSlot) {
+  if (
+    isCmsSlot(content) ||
+    !content?.visibility ||
+    Object.keys(content?.visibility).length === 0
+  )
+    return {};
+
+  let visibilityCssClasses: {
+    "md:hidden"?: boolean;
+    "xl:hidden"?: boolean;
+    "lg:hidden"?: boolean;
+  } = {};
+
+  Object.entries(content?.visibility)?.forEach(([device, isVisible]) => {
+    if (!isVisible) {
+      visibilityCssClasses[`${deviceMap[device]}:hidden`] = true;
+    }
+  });
+  return visibilityCssClasses;
+}
+
 /**
  * @category CMS (Shopping Experiences)
  */
@@ -48,8 +92,13 @@ export function getCmsLayoutConfiguration(
     } as LayoutConfiguration;
   }
 
+  const visibilityCssClasses = getVisibilityClasses(content);
+  const cssClasses = Object.keys(visibilityCssClasses).length
+    ? Object.assign({}, content.cssClass, visibilityCssClasses)
+    : content.cssClass;
+
   return {
-    cssClasses: content.cssClass,
+    cssClasses,
     layoutStyles: {
       backgroundColor: content.backgroundColor,
       backgroundImage: content.backgroundMedia

diff --git a/packages/types/shopware-6-client/models/content/cms/CmsBlock.d.ts b/packages/types/shopware-6-client/models/content/cms/CmsBlock.d.ts
@@ -5,6 +5,7 @@ import {
   CmsSlot,
   MobileBehavior,
   SizingMode,
+  CmsVisibility,
 } from "./CmsPage";
 /**
  * @public
@@ -38,4 +39,7 @@ export type CmsBlock = {
   backgroundMedia: Media | null;
   backgroundMediaMode: BackgroundMediaMode;
   cssClass: string | null;
+  visibility: {
+    [key in CmsVisibility]: boolean;
+  };
 };
diff --git a/packages/types/shopware-6-client/models/content/cms/CmsPage.d.ts b/packages/types/shopware-6-client/models/content/cms/CmsPage.d.ts
@@ -214,6 +214,8 @@ export type MobileBehavior = "boxed" | "wrap" | "hidden";
  */
 export type BackgroundMediaMode = "cover";
 
+export type CmsVisibility = "mobile" | "tablet" | "desktop" | string;
+
 /**
  * @public
  */
@@ -240,5 +242,8 @@ export type CmsSection = {
   extensions: [any];
   id: string;
   blocks: CmsBlock[];
+  visibility: {
+    [key in CmsVisibility]: boolean;
+  };
   apiAlias: "cms_section";
 };