From f7562255329a9ee89f4e8f5191a5ab5fb09b9017 Mon Sep 17 00:00:00 2001 From: Kai Date: Wed, 9 Mar 2022 14:57:18 -0500 Subject: [PATCH] Add mega menu (#1316) * Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM * Rename utility class * Add mega menu content layout and styles (#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM --- assets/base.css | 177 +++++++++++++++++++++++++++++---- assets/cart-notification.js | 2 +- assets/component-mega-menu.css | 67 +++++++++++++ assets/details-disclosure.js | 14 +++ layout/theme.liquid | 1 + locales/cs.schema.json | 23 ++--- locales/da.schema.json | 23 ++--- locales/de.schema.json | 23 ++--- locales/en.default.schema.json | 10 ++ locales/es.schema.json | 23 ++--- locales/fi.schema.json | 23 ++--- locales/fr.schema.json | 23 ++--- locales/it.schema.json | 23 ++--- locales/ja.schema.json | 23 ++--- locales/ko.schema.json | 23 ++--- locales/nb.schema.json | 23 ++--- locales/nl.schema.json | 23 ++--- locales/pl.schema.json | 23 ++--- locales/pt-BR.schema.json | 23 ++--- locales/pt-PT.schema.json | 23 ++--- locales/sv.schema.json | 23 ++--- locales/th.schema.json | 23 ++--- locales/tr.schema.json | 23 ++--- locales/vi.schema.json | 23 ++--- locales/zh-CN.schema.json | 23 ++--- locales/zh-TW.schema.json | 23 ++--- sections/header.liquid | 166 ++++++++++++++++++++++--------- 27 files changed, 550 insertions(+), 347 deletions(-) create mode 100644 assets/component-mega-menu.css diff --git a/assets/base.css b/assets/base.css index 0974b6bcd04..6081232f4e9 100644 --- a/assets/base.css +++ b/assets/base.css @@ -2150,12 +2150,22 @@ details[open] > .header__icon--menu .icon-hamburger { transform: scale(1.07); } -.header__inline-menu details[open] > .header__submenu { - opacity: 1; - transform: translateY(0); +.js details > .header__submenu { + opacity: 0; + transform: translateY(-1.5rem); +} + +details[open] > .header__submenu { animation: animateMenuOpen var(--duration-default) ease; - max-height: 75vh; - overflow-y: scroll; + animation-fill-mode: forwards; + z-index: 1; +} + +@media (prefers-reduced-motion) { + details[open] > .header__submenu { + opacity: 1; + transform: translateY(0); + } } /* Header menu */ @@ -2227,6 +2237,15 @@ details[open] > .header__icon--menu .icon-hamburger { transform var(--duration-default) ease; } +.global-settings-popup, +.header__submenu.global-settings-popup { + border-radius: var(--popup-corner-radius); + border-color: rgba(var(--color-foreground), var(--popup-border-opacity)); + border-style: solid; + border-width: var(--popup-border-width); + box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); +} + .header__submenu.list-menu { padding: 2rem 0; } @@ -2257,6 +2276,7 @@ details[open] > .header__icon--menu .icon-hamburger { right: 2rem; } +header-menu > details, details-disclosure > details { position: relative; } @@ -2432,15 +2452,138 @@ details-disclosure > details { text-align: left; } - a img{ - -moz-transition-duration:0.2s; - -o-transition-duration:0.2s; - -webkit-transition-duration:0.2s; - transition-duration:0.2s; - } - a img:hover{ - opacity:0.9; - } -#gorgias-chat-container iframe#chat-button { right: 22px } -#gorgias-chat-container iframe#chat-window { right: 0 } -#gorgias-chat-container iframe#chat-campaigns { right: 0 } +.ratio::before { + content: ''; + width: 0; + height: 0; + padding-bottom: var(--ratio-percent); +} + +.content-container { + border-radius: var(--text-boxes-radius); + border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity)); + position: relative; +} + +.content-container:after { + content: ''; + position: absolute; + top: calc(var(--text-boxes-border-width) * -1); + right: calc(var(--text-boxes-border-width) * -1); + bottom: calc(var(--text-boxes-border-width) * -1); + left: calc(var(--text-boxes-border-width) * -1); + border-radius: var(--text-boxes-radius); + box-shadow: var(--text-boxes-shadow-horizontal-offset) + var(--text-boxes-shadow-vertical-offset) + var(--text-boxes-shadow-blur-radius) + rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); + z-index: -1; +} + +.content-container--full-width:after { + left: 0; + right: 0; + border-radius: 0; +} + +@media screen and (max-width: 749px) { + .content-container--full-width-mobile { + border-left: none; + border-right: none; + border-radius: 0; + } + .content-container--full-width-mobile:after { + display: none; + } +} + +.global-media-settings { + position: relative; + border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity)); + border-radius: var(--media-radius); + overflow: visible !important; + background-color: rgb(var(--color-background)); +} + +.global-media-settings:after { + content: ''; + position: absolute; + top: calc(var(--media-border-width) * -1); + right: calc(var(--media-border-width) * -1); + bottom: calc(var(--media-border-width) * -1); + left: calc(var(--media-border-width) * -1); + border-radius: var(--media-radius); + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); + z-index: -1; +} + +.global-media-settings--no-shadow { + overflow: hidden !important; +} + +.global-media-settings--no-shadow:after { + content: none; +} + +.global-media-settings img, +.global-media-settings iframe, +.global-media-settings model-viewer, +.global-media-settings video { + border-radius: calc(var(--media-radius) - var(--media-border-width)); +} + +.content-container--full-width, +.global-media-settings--full-width, +.global-media-settings--full-width img { + border-radius: 0; + border-left: none; + border-right: none; +} + +/* check for flexbox gap in older Safari versions */ +@supports not (inset: 10px) { + .grid { + margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing)); + } + + .grid__item { + padding-left: var(--grid-mobile-horizontal-spacing); + padding-bottom: var(--grid-mobile-vertical-spacing); + } + + @media screen and (min-width: 750px) { + .grid { + margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing)); + } + + .grid__item { + padding-left: var(--grid-desktop-horizontal-spacing); + padding-bottom: var(--grid-desktop-vertical-spacing); + } + } + + .grid--gapless .grid__item { + padding-left: 0; + padding-bottom: 0; + } + + @media screen and (min-width: 749px) { + .grid--peek .grid__item { + padding-left: var(--grid-mobile-horizontal-spacing); + } + } + + .product-grid .grid__item { + padding-bottom: var(--grid-mobile-vertical-spacing); + } + + @media screen and (min-width: 750px) { + .product-grid .grid__item { + padding-bottom: var(--grid-desktop-vertical-spacing); + } + } +} + +.font-body-bold { + font-weight: var(--font-body-weight-bold); +} diff --git a/assets/cart-notification.js b/assets/cart-notification.js index 1c81c9dff2d..4310354657d 100644 --- a/assets/cart-notification.js +++ b/assets/cart-notification.js @@ -69,7 +69,7 @@ class CartNotification extends HTMLElement { handleBodyClick(evt) { const target = evt.target; if (target !== this.notification && !target.closest('cart-notification')) { - const disclosure = target.closest('details-disclosure'); + const disclosure = target.closest('details-disclosure, header-menu'); this.activeElement = disclosure ? disclosure.querySelector('summary') : null; this.close(); } diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css new file mode 100644 index 00000000000..ad1b32aed2d --- /dev/null +++ b/assets/component-mega-menu.css @@ -0,0 +1,67 @@ +.mega-menu { + position: static; +} + +.mega-menu__content { + background-color: rgb(var(--color-background)); + border-left: 0; + border-radius: 0; + border-right: 0; + left: 0; + max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem); + overflow-y: auto; + padding-bottom: 2.4rem; + padding-top: 2.4rem; + position: absolute; + right: 0; + top: 100%; + z-index: -1; +} + +.header-wrapper--border-bottom .mega-menu__content { + border-top: 0; +} + +.js .mega-menu__content { + opacity: 0; + transform: translateY(-1.5rem); +} + +.mega-menu[open] .mega-menu__content { + animation: animateMenuOpen var(--duration-default) ease; + animation-fill-mode: forwards; +} + +@media (prefers-reduced-motion) { + .mega-menu[open] .mega-menu__content { + opacity: 1; + transform: translateY(0); + } +} + +.mega-menu__list { + display: grid; + gap: 2.4rem 4rem; + grid-template-columns: repeat(6, minmax(0, 1fr)); + list-style: none; +} + +.mega-menu__link { + color: rgba(var(--color-foreground), 0.75); + display: block; + line-height: calc(1 + 0.3 / var(--font-body-scale)); + padding-bottom: 0.8rem; + padding-top: 0.8rem; + text-decoration: none; + transition: text-decoration var(--duration-short) ease; +} + +.mega-menu__link:hover, +.mega-menu__link--active { + color: rgb(var(--color-foreground)); + text-decoration: underline; +} + +.mega-menu__link--active:hover { + text-decoration-thickness: 0.2rem; +} diff --git a/assets/details-disclosure.js b/assets/details-disclosure.js index 4bf581c0303..cf3cc87c269 100644 --- a/assets/details-disclosure.js +++ b/assets/details-disclosure.js @@ -19,3 +19,17 @@ class DetailsDisclosure extends HTMLElement { } customElements.define('details-disclosure', DetailsDisclosure); + +class HeaderMenu extends DetailsDisclosure { + constructor() { + super(); + this.header = document.querySelector('header'); + } + + onToggle() { + if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return; + if (this.header) document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`); + } +} + +customElements.define('header-menu', HeaderMenu); diff --git a/layout/theme.liquid b/layout/theme.liquid index c1c9ce72c0c..abd150463bc 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -92,6 +92,7 @@ --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }}; --font-body-style: {{ settings.type_body_font.style }}; --font-body-weight: {{ settings.type_body_font.weight }}; + --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }}; --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }}; --font-heading-style: {{ settings.type_header_font.style }}; diff --git a/locales/cs.schema.json b/locales/cs.schema.json index 28228c9f6d9..0e240b59563 100644 --- a/locales/cs.schema.json +++ b/locales/cs.schema.json @@ -687,23 +687,18 @@ "label": "Zobrazit plovoucí záhlaví", "info": "Záhlaví zůstane zobrazené na obrazovce, přestože zákazníci skrolují dál." }, - "color_scheme": { + "margin_bottom": { + "label": "Dolní okraj" + }, + "menu_type_desktop": { + "label": "Typ desktopové nabídky", + "info": "Typ nabídky se automaticky optimalizuje pro mobilní prostředí.", "options__1": { - "label": "Zvýraznění 1" + "label": "Rozevírací nabídka" }, "options__2": { - "label": "Zvýraznění 2" - }, - "options__3": { - "label": "Pozadí 1" - }, - "options__4": { - "label": "Pozadí 2" - }, - "options__5": { - "label": "Inverze" - }, - "label": "Barevné schéma" + "label": "Mega nabídka" + } } } }, diff --git a/locales/da.schema.json b/locales/da.schema.json index fbfa190985d..09753304433 100644 --- a/locales/da.schema.json +++ b/locales/da.schema.json @@ -687,23 +687,18 @@ "label": "Aktivér fastgjort sidehoved", "info": "Sidehovedet vises på skærmen, når kunderne ruller op." }, - "color_scheme": { + "margin_bottom": { + "label": "Nederste margen" + }, + "menu_type_desktop": { + "label": "Computermenutype", + "info": "Menutypen optimeres automatisk til mobil.", "options__1": { - "label": "Markering 1" + "label": "Rullemenu" }, "options__2": { - "label": "Markering 2" - }, - "options__3": { - "label": "Baggrund 1" - }, - "options__4": { - "label": "Baggrund 2" - }, - "options__5": { - "label": "Omvendt" - }, - "label": "Farveskema" + "label": "Megamenu" + } } } }, diff --git a/locales/de.schema.json b/locales/de.schema.json index 6bfa71a6158..66cd32e9dcd 100644 --- a/locales/de.schema.json +++ b/locales/de.schema.json @@ -687,23 +687,18 @@ "label": "Fixierten Header aktivieren", "info": "Der Header wird auf dem Bildschirm angezeigt, wenn der Kunde nach oben scrollt." }, - "color_scheme": { + "margin_bottom": { + "label": "Unterer Rand" + }, + "menu_type_desktop": { + "label": "Desktop-Menütyp", + "info": "Der Menütyp wird automatisch für die mobile Nutzung optimiert.", "options__1": { - "label": "Akzent 1" + "label": "Dropdown" }, "options__2": { - "label": "Akzent 2" - }, - "options__3": { - "label": "Hintergrund 1" - }, - "options__4": { - "label": "Hintergrund 2" - }, - "options__5": { - "label": "Invertiert" - }, - "label": "Farbschema" + "label": "Mega-Menü" + } } } }, diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index 0a76415ea07..398da0c5abb 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -804,6 +804,16 @@ "menu": { "label": "Menu" }, + "menu_type_desktop": { + "label": "Desktop menu type", + "info": "Menu type is automatically optimized for mobile.", + "options__1": { + "label": "Dropdown" + }, + "options__2": { + "label": "Mega menu" + } + }, "show_line_separator": { "label": "Show separator line" }, diff --git a/locales/es.schema.json b/locales/es.schema.json index 0571370e107..1b930546771 100644 --- a/locales/es.schema.json +++ b/locales/es.schema.json @@ -687,23 +687,18 @@ "label": "Activar encabezado fijo", "info": "El encabezado se muestra en la pantalla mientras los clientes se desplazan hacia arriba." }, - "color_scheme": { + "margin_bottom": { + "label": "Margen inferior" + }, + "menu_type_desktop": { + "label": "Tipo de menú de escritorio", + "info": "El tipo de menú se optimiza automáticamente para celular.", "options__1": { - "label": "Resaltado 1" + "label": "Desplegable" }, "options__2": { - "label": "Resaltado 2" - }, - "options__3": { - "label": "Fondo 1" - }, - "options__4": { - "label": "Fondo 2" - }, - "options__5": { - "label": "Invertir" - }, - "label": "Esquema de colores" + "label": "Mega menú" + } } } }, diff --git a/locales/fi.schema.json b/locales/fi.schema.json index 4fd8be10ca8..9742098d592 100644 --- a/locales/fi.schema.json +++ b/locales/fi.schema.json @@ -687,23 +687,18 @@ "label": "Ota paikallaan pysyvä ylätunniste käyttöön", "info": "Ylätunniste näkyy näytöllä, kun asiakkaat vierittävät ylöspäin." }, - "color_scheme": { + "margin_bottom": { + "label": "Alareunus" + }, + "menu_type_desktop": { + "label": "Pöytäkoneen valikkotyyppi", + "info": "Valikkotyyppi optimoidaan automaattisesti mobiililaitteilla.", "options__1": { - "label": "Korostus 1" + "label": "Pudotusvalikko" }, "options__2": { - "label": "Korostus 2" - }, - "options__3": { - "label": "Tausta 1" - }, - "options__4": { - "label": "Tausta 2" - }, - "options__5": { - "label": "Käänteinen" - }, - "label": "Värimalli" + "label": "Mega-valikko" + } } } }, diff --git a/locales/fr.schema.json b/locales/fr.schema.json index 224bbb4ff99..ad2583b8c12 100644 --- a/locales/fr.schema.json +++ b/locales/fr.schema.json @@ -687,23 +687,18 @@ "label": "Activer l'en-tête collé", "info": "L'en-tête s'affiche à l'écran lorsque les clients font défiler vers le haut." }, - "color_scheme": { + "margin_bottom": { + "label": "Marge inférieure" + }, + "menu_type_desktop": { + "label": "Type de menu sur ordinateur", + "info": "Le type de menu est automatiquement optimisé pour les mobiles.", "options__1": { - "label": "Accentuation 1" + "label": "Menu déroulant" }, "options__2": { - "label": "Accentuation 2" - }, - "options__3": { - "label": "Arrière-plan 1" - }, - "options__4": { - "label": "Arrière-plan 2" - }, - "options__5": { - "label": "Inverser" - }, - "label": "Combinaison de couleurs" + "label": "Méga menu" + } } } }, diff --git a/locales/it.schema.json b/locales/it.schema.json index 7b134f94df3..d49af43ac46 100644 --- a/locales/it.schema.json +++ b/locales/it.schema.json @@ -687,23 +687,18 @@ "label": "Abilita header fisso", "info": "L'header viene mostrato sullo schermo quando i clienti scorrono verso l'alto." }, - "color_scheme": { + "margin_bottom": { + "label": "Margine inferiore" + }, + "menu_type_desktop": { + "label": "Tipo menu desktop", + "info": "Tipo menu automaticamente ottimizzato per dispositivi mobili.", "options__1": { - "label": "Elemento in risalto 1" + "label": "Menu a discesa" }, "options__2": { - "label": "Elemento in risalto 2" - }, - "options__3": { - "label": "Sfondo 1" - }, - "options__4": { - "label": "Sfondo 2" - }, - "options__5": { - "label": "Inverso" - }, - "label": "Schema di colori" + "label": "Mega menu" + } } } }, diff --git a/locales/ja.schema.json b/locales/ja.schema.json index 730914d555b..21244608332 100644 --- a/locales/ja.schema.json +++ b/locales/ja.schema.json @@ -693,23 +693,18 @@ "label": "常時表示のヘッダーを有効にする", "info": "お客様が上にスクロールするとヘッダーが画面に表示されます。" }, - "color_scheme": { + "margin_bottom": { + "label": "下マージン" + }, + "menu_type_desktop": { + "label": "デスクトップのメニュータイプ", + "info": "メニュータイプはモバイル用に自動で最適化されます。", "options__1": { - "label": "アクセント1" + "label": "ドロップダウン" }, "options__2": { - "label": "アクセント2" - }, - "options__3": { - "label": "背景1" - }, - "options__4": { - "label": "背景2" - }, - "options__5": { - "label": "反転" - }, - "label": "配色" + "label": "メガメニュー" + } } } }, diff --git a/locales/ko.schema.json b/locales/ko.schema.json index d68a198bf9b..547570e1920 100644 --- a/locales/ko.schema.json +++ b/locales/ko.schema.json @@ -693,23 +693,18 @@ "label": "고정 머리글 사용", "info": "고객이 위쪽으로 스크롤하면 화면에 표시되는 머리글입니다." }, - "color_scheme": { + "margin_bottom": { + "label": "하단 마진" + }, + "menu_type_desktop": { + "label": "데스크톱 메뉴 유형", + "info": "메뉴 유형은 자동으로 모바일에 최적화됩니다.", "options__1": { - "label": "강조 1" + "label": "드롭다운" }, "options__2": { - "label": "강조 2" - }, - "options__3": { - "label": "배경 1" - }, - "options__4": { - "label": "배경 2" - }, - "options__5": { - "label": "서로 바꾸기" - }, - "label": "색상 배합" + "label": "메가 메뉴" + } } } }, diff --git a/locales/nb.schema.json b/locales/nb.schema.json index bf9eb2454e0..40c05ba80ff 100644 --- a/locales/nb.schema.json +++ b/locales/nb.schema.json @@ -690,23 +690,18 @@ "label": "Aktiver festet overskrift", "info": "Overskriften vises på skjermen når kunden blar opp." }, - "color_scheme": { + "margin_bottom": { + "label": "Bunnmarg" + }, + "menu_type_desktop": { + "label": "Menytype på datamaskiner", + "info": "Menytypen optimaliseres automatisk for mobil.", "options__1": { - "label": "Aksent 1" + "label": "Rullegardin" }, "options__2": { - "label": "Aksent 2" - }, - "options__3": { - "label": "Bakgrunn 1" - }, - "options__4": { - "label": "Bakgrunn 2" - }, - "options__5": { - "label": "Omvendt" - }, - "label": "Fargepalett" + "label": "Megameny" + } } } }, diff --git a/locales/nl.schema.json b/locales/nl.schema.json index 6a2645e5dd1..a870e67e6a7 100644 --- a/locales/nl.schema.json +++ b/locales/nl.schema.json @@ -687,23 +687,18 @@ "label": "Sticky header inschakelen", "info": "De kop verschijnt op het scherm als de klanten omhoog scrollen." }, - "color_scheme": { + "margin_bottom": { + "label": "Ondermarge" + }, + "menu_type_desktop": { + "label": "Menutype voor desktop", + "info": "Menutype wordt automatisch aangepast voor mobiele apparaten.", "options__1": { - "label": "Accent 1" + "label": "Vervolgkeuzemenu" }, "options__2": { - "label": "Accent 2" - }, - "options__3": { - "label": "Achtergrond 1" - }, - "options__4": { - "label": "Achtergrond 2" - }, - "options__5": { - "label": "Omkeren" - }, - "label": "Kleurschema" + "label": "Megamenu" + } } } }, diff --git a/locales/pl.schema.json b/locales/pl.schema.json index 6766c9c5b3c..93b7660411b 100644 --- a/locales/pl.schema.json +++ b/locales/pl.schema.json @@ -687,23 +687,18 @@ "label": "Włącz przypięty nagłówek", "info": "Nagłówek pojawia się na ekranie, gdy klienci przewijają w górę." }, - "color_scheme": { + "margin_bottom": { + "label": "Dolna granica" + }, + "menu_type_desktop": { + "label": "Typ menu pulpitu", + "info": "Typ menu jest automatycznie optymalizowany pod kątem urządzeń mobilnych.", "options__1": { - "label": "Akcent 1" + "label": "Lista rozwijana" }, "options__2": { - "label": "Akcent 2" - }, - "options__3": { - "label": "Tło 1" - }, - "options__4": { - "label": "Tło 2" - }, - "options__5": { - "label": "Odwrócone" - }, - "label": "Kolorystyka" + "label": "Mega menu" + } } } }, diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json index 6b92d87187a..a24af52d47a 100644 --- a/locales/pt-BR.schema.json +++ b/locales/pt-BR.schema.json @@ -687,23 +687,18 @@ "label": "Habilitar cabeçalho fixo", "info": "O cabeçalho fica na tela quando o cliente rola para cima." }, - "color_scheme": { + "margin_bottom": { + "label": "Margem inferior" + }, + "menu_type_desktop": { + "label": "Tipo de menu para desktop", + "info": "O tipo de menu é otimizado automaticamente para dispositivos móveis.", "options__1": { - "label": "Destaque 1" + "label": "Menu suspenso" }, "options__2": { - "label": "Destaque 2" - }, - "options__3": { - "label": "Plano de fundo 1" - }, - "options__4": { - "label": "Plano de fundo 2" - }, - "options__5": { - "label": "Inverso" - }, - "label": "Esquema de cores" + "label": "Megamenu" + } } } }, diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json index 5f4fdd53d5a..2d2f0ba860c 100644 --- a/locales/pt-PT.schema.json +++ b/locales/pt-PT.schema.json @@ -693,23 +693,18 @@ "label": "Ativar cabeçalho fixo", "info": "O cabeçalho é apresentado no ecrã enquanto os clientes deslocam para cima." }, - "color_scheme": { + "margin_bottom": { + "label": "Margem inferior" + }, + "menu_type_desktop": { + "label": "Tipo de menu do ambiente de trabalho", + "info": "O tipo de menu é automaticamente otimizado para dispositivos móveis.", "options__1": { - "label": "Destaque 1" + "label": "Menu pendente" }, "options__2": { - "label": "Destaque 2" - }, - "options__3": { - "label": "Fundo 1" - }, - "options__4": { - "label": "Fundo 2" - }, - "options__5": { - "label": "Inverter" - }, - "label": "Esquema de cores" + "label": "Mega menu" + } } } }, diff --git a/locales/sv.schema.json b/locales/sv.schema.json index f24165256cc..cc66fb8edb5 100644 --- a/locales/sv.schema.json +++ b/locales/sv.schema.json @@ -693,23 +693,18 @@ "label": "Aktivera fast rubrik", "info": "Rubrik visas på skärmen när kunder skrollar upp." }, - "color_scheme": { + "margin_bottom": { + "label": "Nedre marginal" + }, + "menu_type_desktop": { + "label": "Typ av skrivbordsmeny", + "info": "Menytyp optimeras automatiskt för mobila enheter.", "options__1": { - "label": "Accent 1" + "label": "Rullgardinsmeny" }, "options__2": { - "label": "Accent 2" - }, - "options__3": { - "label": "Bakgrund 1" - }, - "options__4": { - "label": "Bakgrund 2" - }, - "options__5": { - "label": "Omvänd" - }, - "label": "Färgschema" + "label": "Megameny" + } } } }, diff --git a/locales/th.schema.json b/locales/th.schema.json index 0714e9e0de8..5517895af3c 100644 --- a/locales/th.schema.json +++ b/locales/th.schema.json @@ -693,23 +693,18 @@ "label": "เปิดใช้งานส่วนหัวแบบยึดตำแหน่ง", "info": "แสดงส่วนหัวบนหน้าจอเมื่อลูกค้าเลื่อนหน้าจอขึ้น" }, - "color_scheme": { + "margin_bottom": { + "label": "ย่อหน้าล่าง" + }, + "menu_type_desktop": { + "label": "ประเภทเมนูสำหรับเดสก์ท็อป", + "info": "ระบบจะปรับประเภทเมนูให้เหมาะสมกับมือถือโดยอัตโนมัติ", "options__1": { - "label": "การเน้น 1" + "label": "ดรอปดาวน์" }, "options__2": { - "label": "การเน้น 2" - }, - "options__3": { - "label": "พื้นหลัง 1" - }, - "options__4": { - "label": "พื้นหลัง 2" - }, - "options__5": { - "label": "ตรงกันข้าม" - }, - "label": "รูปแบบสี" + "label": "เมกะเมนู" + } } } }, diff --git a/locales/tr.schema.json b/locales/tr.schema.json index 9bcf018c781..4009e347cb5 100644 --- a/locales/tr.schema.json +++ b/locales/tr.schema.json @@ -687,23 +687,18 @@ "label": "Yapışkanlı üstbilgiyi etkinleştir", "info": "Müşteriler yukarı doğru kaydırırken üstbilgi ekranda görünür." }, - "color_scheme": { + "margin_bottom": { + "label": "Alt kenar boşluğu" + }, + "menu_type_desktop": { + "label": "Masaüstü menü türü", + "info": "Menü türü, mobil cihazlar için otomatik olarak optimize edilir.", "options__1": { - "label": "1. Vurgu" + "label": "Açılır menü" }, "options__2": { - "label": "2. Vurgu" - }, - "options__3": { - "label": "1. Arka plan" - }, - "options__4": { - "label": "2. Arka plan" - }, - "options__5": { - "label": "Ters" - }, - "label": "Renk şeması" + "label": "Mega menü" + } } } }, diff --git a/locales/vi.schema.json b/locales/vi.schema.json index 0f9401e0ce1..aa8222ab680 100644 --- a/locales/vi.schema.json +++ b/locales/vi.schema.json @@ -687,23 +687,18 @@ "label": "Bật đầu trang dính", "info": "Đầu trang hiển thị trên màn hình khi khách hàng cuộn lên." }, - "color_scheme": { + "margin_bottom": { + "label": "Lề dưới" + }, + "menu_type_desktop": { + "label": "Loại menu trên màn hình máy tính", + "info": "Loại menu được tự động tối ưu hóa cho thiết bị di động.", "options__1": { - "label": "Điểm nhấn 1" + "label": "Menu thả xuống" }, "options__2": { - "label": "Điểm nhấn 2" - }, - "options__3": { - "label": "Nền 1" - }, - "options__4": { - "label": "Nền 2" - }, - "options__5": { - "label": "Nghịch đảo" - }, - "label": "Bảng màu" + "label": "Menu lớn" + } } } }, diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json index db586868f43..efee59b6cf2 100644 --- a/locales/zh-CN.schema.json +++ b/locales/zh-CN.schema.json @@ -693,23 +693,18 @@ "label": "启用粘性标头", "info": "在客户向上滑动时，屏幕上会显示标头。" }, - "color_scheme": { + "margin_bottom": { + "label": "下边距" + }, + "menu_type_desktop": { + "label": "桌面菜单类型", + "info": "菜单类型会针对移动设备进行自动优化。", "options__1": { - "label": "强调色 1" + "label": "下拉菜单" }, "options__2": { - "label": "强调色 2" - }, - "options__3": { - "label": "背景 1" - }, - "options__4": { - "label": "背景 2" - }, - "options__5": { - "label": "反转" - }, - "label": "配色方案" + "label": "超级菜单" + } } } }, diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json index 19df2d86e15..8f6a5ac45c4 100644 --- a/locales/zh-TW.schema.json +++ b/locales/zh-TW.schema.json @@ -693,23 +693,18 @@ "label": "啟用固定式頁首", "info": "頁首會在顧客往上滑時顯示在螢幕上。" }, - "color_scheme": { + "margin_bottom": { + "label": "下方邊界" + }, + "menu_type_desktop": { + "label": "桌面版選單類型", + "info": "行動版的選單類型會自動調整大小。", "options__1": { - "label": "色調 1" + "label": "下拉式選單" }, "options__2": { - "label": "色調 2" - }, - "options__3": { - "label": "背景 1" - }, - "options__4": { - "label": "背景 2" - }, - "options__5": { - "label": "反轉" - }, - "label": "顏色配置" + "label": "大型選單" + } } } }, diff --git a/sections/header.liquid b/sections/header.liquid index 054f7799225..a5bd0c965c9 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -6,6 +6,10 @@ {%- endif -%} +{%- if section.settings.menu_type_desktop == 'mega' -%} + + +{%- endif -%} @@ -347,55 +351,102 @@ {%- endif -%} {%- if section.settings.menu != blank -%} - + + {%- else -%} +
+ + {{ childlink.title | escape }} + {% render 'icon-caret' %} + + +
+ {%- endif -%} + + {%- endfor -%} + + + + {%- else -%} + + {{ link.title | escape }} + + {%- endif -%} + + {%- endfor -%} + + + {%- else -%} + + {%- endif -%} {%- endif -%}
@@ -595,7 +646,7 @@ } closeMenuDisclosure() { - this.disclosures = this.disclosures || this.header.querySelectorAll('details-disclosure'); + this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu'); this.disclosures.forEach(disclosure => disclosure.close()); } @@ -726,6 +777,23 @@ "default": "main-menu", "label": "t:sections.header.settings.menu.label" }, + { + "type": "select", + "id": "menu_type_desktop", + "options": [ + { + "value": "dropdown", + "label": "t:sections.header.settings.menu_type_desktop.options__1.label" + }, + { + "value": "mega", + "label": "t:sections.header.settings.menu_type_desktop.options__2.label" + } + ], + "default": "dropdown", + "label": "t:sections.header.settings.menu_type_desktop.label", + "info": "t:sections.header.settings.menu_type_desktop.info" + }, { "type": "checkbox", "id": "show_line_separator",