SHOPBASE-16 Add more navigation tiers, start of the addition of the p…

…romotional section
TrellisCommerce · Aug 7, 2024 · 29c9259 · 29c9259
1 parent 8742faf
commit 29c9259
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 2 deletions.
diff --git a/sections/header.liquid b/sections/header.liquid
@@ -181,7 +181,7 @@
         if section.settings.menu_type_desktop == 'dropdown'
           render 'header-dropdown-menu'
         elsif section.settings.menu_type_desktop != 'drawer'
-          render 'header-mega-menu'
+          render 'header-mega-menu' blocks: section.blocks
         endif
       endif
     %}
@@ -651,7 +651,47 @@
   ],
   "blocks": [
     {
-      "type": "@app"
+      "type": "@app",
+    },
+    {
+      "type": "promotional",
+      "name": "Promotional Items",
+      "settings": [
+        {
+          "type": "number",
+          "id": "promotional_index",
+          "default": 1,
+          "label": "Nav Position"
+        },
+        {
+          "type": "image_picker",
+          "id": "promotional_image",
+          "label": "Image"
+        },
+        {
+          "type": "text",
+          "id": "promotional_headline",
+          "default": "Headline",
+          "label": "Headline"
+        },
+        {
+          "type": "text",
+          "id": "promotional_description",
+          "default": "Description",
+          "label": "Description"
+        },
+        {
+          "type": "text",
+          "id": "promotional_button_text",
+          "default": "Button Text",
+          "label": "Button Text"
+        },
+        {
+          "type": "url",
+          "id": "promotional_button_url",
+          "label": "Button Url"
+        }
+      ]
     }
   ]
 }

diff --git a/snippets/header-mega-menu.liquid b/snippets/header-mega-menu.liquid
@@ -8,6 +8,7 @@
 <nav class="header__inline-menu">
   <ul class="list-menu list-menu--inline" role="list">
     {%- for link in section.settings.menu.links -%}
+      {% assign parent_index = forloop.index %}
       <li>
         {%- if link.links != blank -%}
           <header-menu>
@@ -61,9 +62,53 @@
                                 {{ grandchildlink.title | escape }}
                               </a>
                             </li>
+                            {%- if grandchildlink.links != blank -%}
+                              <ul class="list-unstyled" role="list">
+                                {%- for greatgrandchildlink in grandchildlink.links -%}
+                                  <li>
+                                    <a
+                                      id="HeaderMenu-{{ link.handle }}-{{ grandchildlink.handle }}-{{ greatgrandchildlink.handle }}"
+                                      href="{{ greatgrandchildlink.url }}"
+                                      class="mega-menu__link link{% if greatgrandchildlink.current %} mega-menu__link--active{% endif %}"
+                                      {% if greatgrandchildlink.current %}
+                                        aria-current="page"
+                                      {% endif %}
+                                    >
+                                      {{ greatgrandchildlink.title | escape }}
+                                    </a>
+                                  </li>
+                                  {%- if greatgrandchildlink.links != blank -%}
+                                    <ul class="list-unstyled" role="list">
+                                      {%- for greatgreatgrandchildlink in greatgrandchildlink.links -%}
+                                        <li>
+                                          <a
+                                            id="HeaderMenu-{{ link.handle }}-{{ greatgrandchildlink.handle }}-{{ greatgreatgrandchildlink.handle }}"
+                                            href="{{ greatgreatgrandchildlink.url }}"
+                                            class="mega-menu__link link{% if greatgreatgrandchildlink.current %} mega-menu__link--active{% endif %}"
+                                            {% if greatgreatgrandchildlink.current %}
+                                              aria-current="page"
+                                            {% endif %}
+                                          >
+                                            {{ greatgreatgrandchildlink.title | escape }}
+                                          </a>
+                                        </li>
+                                      {%- endfor -%}
+                                    </ul>
+                                    {%- endif -%}
+                                {%- endfor -%}
+                              </ul>
+                            {%- endif -%}
                           {%- endfor -%}
                         </ul>
                       {%- endif -%}
+                      {%- for block in blocks -%}
+                        {% case block.type %}
+                          {%- when 'promotional' -%}
+                            {%- if block.settings.promotional_index == parent_index -%}
+                              {{ block.settings.promotional_headline }}
+                            {%- endif -%}
+                        {% endcase %}
+                      {%- endfor -%}
                     </li>
                   {%- endfor -%}
                 </ul>