Add header and footer section groups (#2191)

Shopify · Jan 10, 2023 · 43025db · naxorn · Jan 10, 2023 · 43025db
1 parent 118c540
commit 43025db
Show file tree

Hide file tree

Showing 25 changed files with 163 additions and 84 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -2175,10 +2175,6 @@ input[type='checkbox'] {
 }
 
 /* section-announcement-bar */
-#shopify-section-announcement-bar {
-  z-index: 4;
-}
-
 .announcement-bar {
   border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
   color: rgb(var(--color-foreground));
@@ -2215,7 +2211,7 @@ input[type='checkbox'] {
 }
 
 /* section-header */
-#shopify-section-header {
+.section-header.shopify-section-group-header-group {
   z-index: 3;
 }
 
@@ -2232,10 +2228,18 @@ input[type='checkbox'] {
   transform: translateY(0);
 }
 
-#shopify-section-header.animate {
+.section-header.animate {
   transition: transform 0.15s ease-out;
 }
 
+.shopify-section-group-header-group {
+  z-index: 4;
+}
+
+.section-header ~ .shopify-section-group-header-group {
+  z-index: initial;
+}
+
 /* Main Header Layout */
 .header-wrapper {
   display: block;

diff --git a/assets/global.js b/assets/global.js
@@ -420,7 +420,7 @@ class HeaderDrawer extends MenuDrawer {
   }
 
   openMenuDrawer(summaryElement) {
-    this.header = this.header || document.getElementById('shopify-section-header');
+    this.header = this.header || document.querySelector('.section-header');
     this.borderOffset = this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0;
     document.documentElement.style.setProperty('--header-bottom-position', `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`);
     this.header.classList.add('menu-open');

diff --git a/assets/predictive-search.js b/assets/predictive-search.js
@@ -205,7 +205,7 @@ class PredictiveSearch extends SearchForm {
   }
 
   getResultsMaxHeight() {
-    this.resultsMaxHeight = window.innerHeight - document.getElementById('shopify-section-header').getBoundingClientRect().bottom;
+    this.resultsMaxHeight = window.innerHeight - document.querySelector('.section-header').getBoundingClientRect().bottom;
     return this.resultsMaxHeight;
   }
 

diff --git a/config/settings_data.json b/config/settings_data.json
@@ -121,77 +121,6 @@
       "predictive_search_show_price": false,
       "currency_code_enabled": true,
       "sections": {
-        "announcement-bar": {
-          "type": "announcement-bar",
-          "blocks": {
-            "announcement-bar-0": {
-              "type": "announcement",
-              "settings": {
-                "text": "Welcome to our store",
-                "color_scheme": "background-1",
-                "link": ""
-              }
-            }
-          },
-          "block_order": [
-            "announcement-bar-0"
-          ]
-        },
-        "header": {
-          "type": "header",
-          "settings": {
-            "color_scheme": "background-1",
-            "logo_width": 90,
-            "logo_position": "middle-left",
-            "menu": "main-menu",
-            "show_line_separator": true,
-            "enable_sticky_header": true,
-            "margin_bottom": 0
-          }
-        },
-        "footer": {
-          "type": "footer",
-          "blocks": {
-            "footer-0": {
-              "type": "link_list",
-              "settings": {
-                "heading": "Quick links",
-                "menu": "footer"
-              }
-            },
-            "footer-1": {
-              "type": "link_list",
-              "settings": {
-                "heading": "Info",
-                "menu": "footer"
-              }
-            },
-            "footer-2": {
-              "type": "text",
-              "settings": {
-                "heading": "Our mission",
-                "subtext": "<p>Share contact information, store details, and brand content with your customers.<\/p>"
-              }
-            }
-          },
-          "block_order": [
-            "footer-0",
-            "footer-1",
-            "footer-2"
-          ],
-          "settings": {
-            "color_scheme": "background-1",
-            "newsletter_enable": true,
-            "newsletter_heading": "Subscribe to our emails",
-            "show_social": true,
-            "enable_country_selector": true,
-            "enable_language_selector": true,
-            "payment_enable": true,
-            "margin_top": 48,
-            "padding_top": 36,
-            "padding_bottom": 36
-          }
-        },
         "main-password-header": {
           "type": "main-password-header",
           "settings": {

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -245,13 +245,13 @@
       {%- render 'cart-drawer' -%}
     {%- endif -%}
 
-    {% section 'announcement-bar' %}
-    {% section 'header' %}
+    {% sections 'header-group' %}
+
     <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
       {{ content_for_layout }}
     </main>
 
-    {% section 'footer' %}
+    {% sections 'footer-group' %}
 
     <ul hidden>
       <li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>

diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid
@@ -26,6 +26,7 @@
 {
   "name": "t:sections.announcement-bar.name",
   "max_blocks": 12,
+  "class": "announcement-bar-section",
   "blocks": [
     {
       "type": "announcement",

diff --git a/sections/collage.liquid b/sections/collage.liquid
@@ -203,6 +203,9 @@
   "name": "t:sections.collage.name",
   "tag": "section",
   "class": "section",
+  "disabled_on": {
+    "groups": ["header", "footer"]
+  },
   "settings": [
     {
       "type": "text",

diff --git a/sections/collapsible-content.liquid b/sections/collapsible-content.liquid
@@ -95,6 +95,9 @@
   "name": "t:sections.collapsible_content.name",
   "tag": "section",
   "class": "section",
+  "disabled_on": {
+    "groups": ["header", "footer"]
+  },
   "settings": [
     {
       "type": "text",

diff --git a/sections/collection-list.liquid b/sections/collection-list.liquid
@@ -122,6 +122,9 @@
   "tag": "section",
   "class": "section section-collection-list",
   "max_blocks": 15,
+  "disabled_on": {
+    "groups": ["header", "footer"]
+  },
   "settings": [
     {
       "type": "text",

diff --git a/sections/contact-form.liquid b/sections/contact-form.liquid
@@ -132,6 +132,9 @@
   "name": "t:sections.contact-form.name",
   "tag": "section",
   "class": "section",
+  "disabled_on": {
+    "groups": ["header", "footer"]
+  },
   "settings": [
     {
       "type": "text",

diff --git a/sections/featured-blog.liquid b/sections/featured-blog.liquid
@@ -137,7 +137,9 @@
 {
   "name": "t:sections.featured-blog.name",
   "tag": "section",
-  "class": "section",
+  "disabled_on": {
+    "groups": ["header", "footer"]
+  },
   "settings": [
     {
       "type": "text",

diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid
@@ -144,6 +144,9 @@
   "name": "t:sections.featured-collection.name",
   "tag": "section",
   "class": "section",
+  "disabled_on": {
+    "groups": ["header", "footer"]
+  },
   "settings": [
     {
       "type": "text",

diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
@@ -443,6 +443,9 @@
   "name": "t:sections.featured-product.name",
   "tag": "section",
   "class": "section section-featured-product",
+  "disabled_on": {
+    "groups": ["header", "footer"]
+  },
   "blocks": [
     {
       "type": "@app"

diff --git a/sections/footer-group.json b/sections/footer-group.json
@@ -0,0 +1,52 @@
+{
+  "name": "t:sections.footer.name",
+  "type": "footer",
+  "sections": {
+    "footer": {
+      "type": "footer",
+      "blocks": {
+        "footer-0": {
+          "type": "link_list",
+          "settings": {
+            "heading": "Quick links",
+            "menu": "footer"
+          }
+        },
+        "footer-1": {
+          "type": "link_list",
+          "settings": {
+            "heading": "Info",
+            "menu": "footer"
+          }
+        },
+        "footer-2": {
+          "type": "text",
+          "settings": {
+            "heading": "Our mission",
+            "subtext": "<p>Share contact information, store details, and brand content with your customers.<\/p>"
+          }
+        }
+      },
+      "block_order": [
+        "footer-0",
+        "footer-1",
+        "footer-2"
+      ],
+      "settings": {
+        "color_scheme": "background-1",
+        "newsletter_enable": true,
+        "newsletter_heading": "Subscribe to our emails",
+        "show_social": true,
+        "enable_country_selector": false,
+        "enable_language_selector": false,
+        "payment_enable": true,
+        "margin_top": 48,
+        "padding_top": 36,
+        "padding_bottom": 36
+      }
+    }
+  },
+  "order": [
+    "footer"
+  ]
+}
diff --git a/sections/footer.liquid b/sections/footer.liquid
@@ -57,6 +57,8 @@
               {%- endif -%}
 
               {%- case block.type -%}
+                {%- when '@app' -%}
+                  {% render block %}
                 {%- when 'text' -%}
                   <div class="footer-block__details-content rte">
                     {{ block.settings.subtext }}
@@ -405,6 +407,9 @@
 {
   "name": "t:sections.footer.name",
   "blocks": [
+    {
+      "type": "@app"
+    },
     {
       "type": "link_list",
       "name": "t:sections.footer.blocks.link_list.name",

diff --git a/sections/header-group.json b/sections/header-group.json
@@ -0,0 +1,44 @@
+{
+  "name": "t:sections.header.name",
+  "type": "header",
+  "sections": {
+    "announcement-bar": {
+      "type": "announcement-bar",
+      "blocks": {
+        "announcement-bar-0": {
+          "type": "announcement",
+          "settings": {
+            "text": "Welcome to our store",
+            "text_alignment": "center",
+            "color_scheme": "background-1",
+            "link": ""
+          }
+        }
+      },
+      "block_order": [
+        "announcement-bar-0"
+      ]
+    },
+    "header": {
+      "type": "header",
+      "settings": {
+        "color_scheme": "background-1",
+        "logo": "{{ shop.brand.logo }}",
+        "logo_width": 90,
+        "logo_position": "middle-left",
+        "menu": "main-menu",
+        "menu_type_desktop": "dropdown",
+        "show_line_separator": true,
+        "enable_sticky_header": true,
+        "mobile_logo_position": "center",
+        "margin_bottom": 0,
+        "padding_top": 20,
+        "padding_bottom": 20
+      }
+    }
+  },
+  "order": [
+    "announcement-bar",
+    "header"
+  ]
+}
diff --git a/sections/header.liquid b/sections/header.liquid
@@ -670,7 +670,7 @@
     }
 
     connectedCallback() {
-      this.header = document.getElementById('shopify-section-header');
+      this.header = document.querySelector('.section-header');
       this.headerIsAlwaysSticky = this.getAttribute('data-sticky-type') === 'always' || this.getAttribute('data-sticky-type') === 'reduce-logo-size';
       this.headerBounds = {};
 

diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid
@@ -146,6 +146,9 @@
   "name": "t:sections.image-banner.name",
   "tag": "section",
   "class": "section",
+  "disabled_on": {
+    "groups": ["header", "footer"]
+  },
   "settings": [
     {
       "type": "image_picker",

diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid
@@ -85,6 +85,9 @@
 {
   "name": "t:sections.image-with-text.name",
   "class": "section",
+  "disabled_on": {
+    "groups": ["header", "footer"]
+  },
   "settings": [
     {
       "type": "image_picker",

diff --git a/sections/multicolumn.liquid b/sections/multicolumn.liquid
@@ -170,6 +170,9 @@
   "name": "t:sections.multicolumn.name",
   "class": "section",
   "tag": "section",
+  "disabled_on": {
+    "groups": ["header", "footer"]
+  },
   "settings": [
     {
       "type": "text",

diff --git a/sections/newsletter.liquid b/sections/newsletter.liquid
@@ -97,6 +97,9 @@
   "name": "t:sections.newsletter.name",
   "tag": "section",
   "class": "section",
+  "disabled_on": {
+    "groups": ["header"]
+  },
   "settings": [
     {
       "type": "select",