[TASK] add CTA option to site header module (#70)

Co-authored-by: Dmytro Hrynevych <[email protected]>
Resultify · Apr 3, 2024 · 6f41f19 · 6f41f19
1 parent e0a7a52
commit 6f41f19
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 18 deletions.
diff --git a/theme/modules/site-header.module/fields.json b/theme/modules/site-header.module/fields.json
@@ -3783,6 +3783,45 @@
         }
       }
     }
+  }, {
+    "id" : "1e7bfe18-8a16-f568-4044-9ba01ae870e4",
+    "name" : "cta",
+    "display_width" : null,
+    "label" : "CTA",
+    "required" : false,
+    "locked" : false,
+    "children" : [ {
+      "id" : "1a40de40-3f96-14bd-1cc8-97ce9b1a5c06",
+      "name" : "spacing",
+      "display_width" : null,
+      "label" : "Spacing",
+      "required" : false,
+      "locked" : false,
+      "children" : [ {
+        "id" : "6f7eb44f-2281-2cae-0bd9-5007693cab09",
+        "name" : "spacing",
+        "display_width" : null,
+        "label" : "Spacing",
+        "required" : false,
+        "locked" : false,
+        "type" : "spacing",
+        "default" : { }
+      } ],
+      "tab" : "STYLE",
+      "expanded" : false,
+      "type" : "group",
+      "default" : {
+        "spacing" : { }
+      }
+    } ],
+    "tab" : "STYLE",
+    "expanded" : false,
+    "type" : "group",
+    "default" : {
+      "spacing" : {
+        "spacing" : { }
+      }
+    }
   }, {
     "id" : "093d4147-4d6c-c47e-71bc-4168460bfbe9",
     "name" : "mobile_menu_toggler",
@@ -4650,6 +4689,11 @@
         }
       }
     },
+    "cta" : {
+      "spacing" : {
+        "spacing" : { }
+      }
+    },
     "mobile_menu_toggler" : {
       "alignment" : {
         "alignment" : "left"
@@ -5449,6 +5493,32 @@
       }
     }
   }
+}, {
+  "id" : "7b54f75f-8df1-fecf-07d3-83434a0b6b4c",
+  "name" : "ctas",
+  "display_width" : null,
+  "label" : "CTAs",
+  "required" : false,
+  "locked" : false,
+  "children" : [ {
+    "id" : "90e225b2-b6df-4b3b-5043-20bca56d5e88",
+    "name" : "cta",
+    "display_width" : null,
+    "label" : "CTA",
+    "required" : false,
+    "locked" : false,
+    "occurrence" : {
+      "min" : null,
+      "max" : 3,
+      "sorting_label_field" : null,
+      "default" : null
+    },
+    "type" : "cta"
+  } ],
+  "tab" : "CONTENT",
+  "expanded" : false,
+  "type" : "group",
+  "default" : { }
 }, {
   "id" : "6b9c9de8-cdc8-2934-3a74-6aa13691c703",
   "name" : "site_header_components",
@@ -5458,7 +5528,7 @@
   "locked" : false,
   "occurrence" : {
     "min" : 4,
-    "max" : 4,
+    "max" : 5,
     "sorting_label_field" : "2375f489-d5c3-e7b5-d816-82c665909efe",
     "default" : 4
   },
@@ -5500,5 +5570,8 @@
   }, {
     "component" : "Buttons",
     "show" : true
+  }, {
+    "component" : "CTAs",
+    "show" : true
   } ]
 } ]
diff --git a/theme/modules/site-header.module/module.css b/theme/modules/site-header.module/module.css
@@ -271,21 +271,23 @@
   padding: 5px 10px;
 }
 
-.header-search__suggestions a:hover {
-  background-color: rgb(0 0 0 / 10%);
-}
-
 .siteheader-module__link {
   margin: 0.5rem 0;
 }
 
 .siteheader-module__button,
-.siteheader-module__secondary-button {
+.siteheader-module__secondary-button,
+.siteheader-module__cta {
   margin: 0.5rem 0;
 }
 
 .siteheader-module__button .g-module-macros-btn,
-.siteheader-module__secondary-button .g-module-macros-btn {
+.siteheader-module__secondary-button .g-module-macros-btn,
+.siteheader-module__cta a {
   display: block;
   width: 100%;
 }
+
+.header-search__suggestions a:hover {
+  background-color: rgb(0 0 0 / 10%);
+}
diff --git a/theme/modules/site-header.module/module.html b/theme/modules/site-header.module/module.html
@@ -551,7 +551,8 @@ <h1 class="header-logo__company-name">Company name</h1>
       .siteheader-module__main-nav,
       .siteheader-module__language,
       .siteheader-module__links,
-      .siteheader-module__buttons {
+      .siteheader-module__buttons,
+      .siteheader-module__ctas {
         order: 2;
       }
       .siteheader-module__search {
@@ -589,13 +590,9 @@ <h1 class="header-logo__company-name">Company name</h1>
       }
 
       .siteheader-module__language {}
-      .siteheader-module__links {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-
-      .siteheader-module__buttons {
+      .siteheader-module__links,
+      .siteheader-module__buttons,
+      .siteheader-module__ctas {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -618,6 +615,12 @@ <h1 class="header-logo__company-name">Company name</h1>
         padding: 0;
         {{module.style.button.spacing.spacing.css}}
       }
+
+      .siteheader-module__cta {
+        margin: 0;
+        padding: 0;
+        {{module.style.cta.spacing.spacing.css}}
+      }
 
       .siteheader-module__secondary-button {
         margin: 0;
@@ -833,6 +836,16 @@ <h1 class="header-logo__company-name">Company name</h1>
   </div>
 {%- endmacro -%}
 
+{%- macro render_ctas() -%}
+  <div class="siteheader-module__ctas">
+    {% for item in module.ctas.cta %}
+      <div class="siteheader-module__cta">
+        {% cta guid="{{ item }}" %}
+      </div>
+    {% endfor %}
+  </div>
+{%- endmacro -%}
+
 <div class="siteheader-module_wrp">
   <nav class="siteheader-module navbar siteheader-module--{{module_id}} {{module.style.general.presets.custom_preset}}" id="main-navigation" aria-label="Primary">
 
@@ -864,13 +877,12 @@ <h1 class="header-logo__company-name">Company name</h1>
           {{render_links() if component.show}}
         {% elif component.component|lower == 'buttons' %}
           {{render_buttons() if component.show}}
+        {% elif component.component|lower == 'ctas' %}
+          {{render_ctas() if component.show}}
         {% endif %}
       {% endfor %}
 
     </div>
 
   </nav>
 </div>
-
-
-