header.liquid dawn
Fri Apr 26 2024 16:12:54 GMT+0000 (Coordinated Universal Time)
Saved by @nsmnmlgolf
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'"> <link rel="stylesheet" href="{{ 'component-search.css' | asset_url }}" media="print" onload="this.media='all'"> <link rel="stylesheet" href="{{ 'component-menu-drawer.css' | asset_url }}" media="print" onload="this.media='all'"> <link rel="stylesheet" href="{{ 'component-cart-notification.css' | asset_url }}" media="print" onload="this.media='all'"> <link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'"> {%- if settings.predictive_search_enabled -%} <link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'"> {%- endif -%} {%- if section.settings.menu_type_desktop == 'mega' -%} <link rel="stylesheet" href="{{ 'component-mega-menu.css' | asset_url }}" media="print" onload="this.media='all'"> {%- endif -%} {%- if settings.cart_type == "drawer" -%} {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }} {{ 'component-cart.css' | asset_url | stylesheet_tag }} {{ 'component-totals.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} {{ 'component-discounts.css' | asset_url | stylesheet_tag }} {%- endif -%} <style> header-drawer { justify-self: start; margin-left: -1.2rem; } {%- if section.settings.sticky_header_type == 'reduce-logo-size' -%} .scrolled-past-header .header__heading-logo-wrapper { width: 75%; } {%- endif -%} {%- if section.settings.menu_type_desktop != "drawer" -%} @media screen and (min-width: 990px) { header-drawer { display: none; } } {%- endif -%} .menu-drawer-container { display: flex; } .list-menu { list-style: none; padding: 0; margin: 0; } .list-menu--inline { display: inline-flex; flex-wrap: wrap; } summary.list-menu__item { padding-right: 2.7rem; } .list-menu__item { display: flex; align-items: center; line-height: calc(1 + 0.3 / var(--font-body-scale)); } .list-menu__item--link { text-decoration: none; padding-bottom: 1rem; padding-top: 1rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); } @media screen and (min-width: 750px) { .list-menu__item--link { padding-bottom: 0.5rem; padding-top: 0.5rem; } } </style> {%- style -%} .header { padding: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px 3rem {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px 3rem; } .section-header { position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */ margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px; } @media screen and (min-width: 750px) { .section-header { margin-bottom: {{ section.settings.margin_bottom }}px; } } @media screen and (min-width: 990px) { .header { padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px; } } {%- endstyle -%} <script src="{{ 'details-disclosure.js' | asset_url }}" defer="defer"></script> <script src="{{ 'details-modal.js' | asset_url }}" defer="defer"></script> <script src="{{ 'cart-notification.js' | asset_url }}" defer="defer"></script> <script src="{{ 'search-form.js' | asset_url }}" defer="defer"></script> {%- if settings.cart_type == "drawer" -%} <script src="{{ 'cart-drawer.js' | asset_url }}" defer="defer"></script> {%- endif -%} <svg xmlns="http://www.w3.org/2000/svg" class="hidden"> <symbol id="icon-search" viewbox="0 0 18 19" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.03 11.68A5.784 5.784 0 112.85 3.5a5.784 5.784 0 018.18 8.18zm.26 1.12a6.78 6.78 0 11.72-.7l5.4 5.4a.5.5 0 11-.71.7l-5.41-5.4z" fill="currentColor"/> </symbol> <symbol id="icon-reset" class="icon icon-close" fill="none" viewBox="0 0 18 18" stroke="currentColor"> <circle r="8.5" cy="9" cx="9" stroke-opacity="0.2"/> <path d="M6.82972 6.82915L1.17193 1.17097" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 5)"/> <path d="M1.22896 6.88502L6.77288 1.11523" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 5)"/> </symbol> <symbol id="icon-close" class="icon icon-close" fill="none" viewBox="0 0 18 17"> <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor"> </symbol> </svg> {%- liquid for block in section.blocks if block.type == '@app' assign has_app_block = true endif endfor -%} <{% if section.settings.sticky_header_type != 'none' %}sticky-header data-sticky-type="{{ section.settings.sticky_header_type }}"{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}"> {%- liquid assign social_links = false assign localization_forms = false if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_instagram_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_tiktok_link != blank or settings.social_tumblr_link != blank or settings.social_snapchat_link != blank assign social_links = true endif if localization.available_countries.size > 1 and section.settings.enable_country_selector or section.settings.enable_language_selector and localization.available_languages.size > 1 assign localization_forms = true endif -%} <header class="header header--{{ section.settings.logo_position }} header--mobile-{{ section.settings.mobile_logo_position }} page-width{% if section.settings.menu_type_desktop == 'drawer' %} drawer-menu{% endif %}{% if section.settings.menu != blank %} header--has-menu{% endif %}{% if has_app_block %} header--has-app{% endif %}{% if social_links %} header--has-social{% endif %}{% if shop.customer_accounts_enabled %} header--has-account{% endif %}{% if localization_forms %} header--has-localizations{% endif %}"> {%- liquid if section.settings.menu != blank render 'header-drawer' endif if section.settings.logo_position == 'top-center' or section.settings.menu == blank render 'header-search', input_id: 'Search-In-Modal-1' endif -%} {%- if section.settings.logo_position != 'middle-center' -%} {%- if request.page_type == 'index' -%} <h1 class="header__heading"> {%- endif -%} <a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset"> {%- if settings.logo != blank -%} <div class="header__heading-logo-wrapper"> {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%} {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%} {% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %} {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %} {{ settings.logo | image_url: width: 600 | image_tag: class: 'header__heading-logo motion-reduce', widths: widths, height: logo_height, width: settings.logo_width, alt: logo_alt, sizes: sizes, preload: true }} </div> {%- else -%} <span class="h2">{{ shop.name }}</span> {%- endif -%} </a> {%- if request.page_type == 'index' -%} </h1> {%- endif -%} {%- endif -%} {%- liquid if section.settings.menu != blank if section.settings.menu_type_desktop == 'dropdown' render 'header-dropdown-menu' elsif section.settings.menu_type_desktop != 'drawer' render 'header-mega-menu' endif endif %} {%- if section.settings.logo_position == 'middle-center' -%} {%- if request.page_type == 'index' -%} <h1 class="header__heading"> {%- endif -%} <a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset"> {%- if settings.logo != blank -%} <div class="header__heading-logo-wrapper"> {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%} {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%} {% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %} {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %} {{ settings.logo | image_url: width: 600 | image_tag: class: 'header__heading-logo', widths: widths, height: logo_height, width: settings.logo_width, alt: logo_alt, sizes: sizes, preload: true }} </div> {%- else -%} <span class="h2">{{ shop.name }}</span> {%- endif -%} </a> {%- if request.page_type == 'index' -%} </h1> {%- endif -%} {%- endif -%} <div class="header__icons{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header__icons--localization header-localization{% endif %}"> <div class="desktop-localization-wrapper"> {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%} <localization-form class="small-hide medium-hide" data-prevent-hide> {%- form 'localization', id: 'HeaderCountryForm', class: 'localization-form' -%} <div> <h2 class="visually-hidden" id="HeaderCountryLabel">{{ 'localization.country_label' | t }}</h2> {%- render 'country-localization', localPosition: 'HeaderCountry' -%} </div> {%- endform -%} </localization-form> {% endif %} {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%} <localization-form class="small-hide medium-hide" data-prevent-hide> {%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%} <div> <h2 class="visually-hidden" id="HeaderLanguageLabel">{{ 'localization.language_label' | t }}</h2> {%- render 'language-localization', localPosition: 'HeaderLanguage' -%} </div> {%- endform -%} </localization-form> {%- endif -%} </div> {% render 'header-search', input_id: 'Search-In-Modal' %} {%- if shop.customer_accounts_enabled -%} <a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}"> <account-icon> {%- if customer and customer.has_avatar? -%} {{ customer | avatar }} {%- else -%} {% render 'icon-account' %} {%- endif -%} </account-icon> <span class="visually-hidden"> {%- liquid if customer echo 'customer.account_fallback' | t else echo 'customer.log_in' | t endif -%} </span> </a> {%- endif -%} {%- for block in section.blocks -%} {%- case block.type -%} {%- when '@app' -%} {% render block %} {%- endcase -%} {%- endfor -%} {%- liquid if cart == empty render 'icon-cart-empty' else render 'icon-cart' endif -%} <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span> {%- if cart != empty -%} <div class="cart-count-bubble"> {%- if cart.item_count < 100 -%} <span aria-hidden="true">{{ cart.item_count }}</span> {%- endif -%} <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span> </div> {%- endif -%} </a> </div> </header> </{% if section.settings.sticky_header_type != 'none' %}sticky-header{% else %}div{% endif %}> {%- if settings.cart_type == "notification" -%} {%- render 'cart-notification', color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop -%} {%- endif -%} {% javascript %} class StickyHeader extends HTMLElement { constructor() { super(); } connectedCallback() { this.header = document.querySelector('.section-header'); this.headerIsAlwaysSticky = this.getAttribute('data-sticky-type') === 'always' || this.getAttribute('data-sticky-type') === 'reduce-logo-size'; this.headerBounds = {}; this.setHeaderHeight(); window.matchMedia('(max-width: 990px)').addEventListener('change', this.setHeaderHeight.bind(this)); if (this.headerIsAlwaysSticky) { this.header.classList.add('shopify-section-header-sticky'); }; this.currentScrollTop = 0; this.preventReveal = false; this.predictiveSearch = this.querySelector('predictive-search'); this.onScrollHandler = this.onScroll.bind(this); this.hideHeaderOnScrollUp = () => this.preventReveal = true; this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp); window.addEventListener('scroll', this.onScrollHandler, false); this.createObserver(); } setHeaderHeight() { document.documentElement.style.setProperty('--header-height', `${this.header.offsetHeight}px`); } disconnectedCallback() { this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp); window.removeEventListener('scroll', this.onScrollHandler); } createObserver() { let observer = new IntersectionObserver((entries, observer) => { this.headerBounds = entries[0].intersectionRect; observer.disconnect(); }); observer.observe(this.header); } onScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (this.predictiveSearch && this.predictiveSearch.isOpen) return; if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) { this.header.classList.add('scrolled-past-header'); if (this.preventHide) return; requestAnimationFrame(this.hide.bind(this)); } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) { this.header.classList.add('scrolled-past-header'); if (!this.preventReveal) { requestAnimationFrame(this.reveal.bind(this)); } else { window.clearTimeout(this.isScrolling); this.isScrolling = setTimeout(() => { this.preventReveal = false; }, 66); requestAnimationFrame(this.hide.bind(this)); } } else if (scrollTop <= this.headerBounds.top) { this.header.classList.remove('scrolled-past-header'); requestAnimationFrame(this.reset.bind(this)); } this.currentScrollTop = scrollTop; } hide() { if (this.headerIsAlwaysSticky) return; this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky'); this.closeMenuDisclosure(); this.closeSearchModal(); } reveal() { if (this.headerIsAlwaysSticky) return; this.header.classList.add('shopify-section-header-sticky', 'animate'); this.header.classList.remove('shopify-section-header-hidden'); } reset() { if (this.headerIsAlwaysSticky) return; this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate'); } closeMenuDisclosure() { this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu'); this.disclosures.forEach(disclosure => disclosure.close()); } closeSearchModal() { this.searchModal = this.searchModal || this.header.querySelector('details-modal'); this.searchModal.close(false); } } customElements.define('sticky-header', StickyHeader); {% endjavascript %} <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "name": {{ shop.name | json }}, {% if settings.logo %} "logo": {{ settings.logo | image_url: width: 500 | prepend: "https:" | json }}, {% endif %} "sameAs": [ {{ settings.social_twitter_link | json }}, {{ settings.social_facebook_link | json }}, {{ settings.social_pinterest_link | json }}, {{ settings.social_instagram_link | json }}, {{ settings.social_tiktok_link | json }}, {{ settings.social_tumblr_link | json }}, {{ settings.social_snapchat_link | json }}, {{ settings.social_youtube_link | json }}, {{ settings.social_vimeo_link | json }} ], "url": {{ request.origin | append: page.url | json }} } </script> {%- if request.page_type == 'index' -%} {% assign potential_action_target = request.origin | append: routes.search_url | append: "?q={search_term_string}" %} <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": {{ shop.name | json }}, "potentialAction": { "@type": "SearchAction", "target": {{ potential_action_target | json }}, "query-input": "required name=search_term_string" }, "url": {{ request.origin | append: page.url | json }} } </script> {%- endif -%} {% schema %} { "name": "t:sections.header.name", "class": "section-header", "max_blocks": 3, "settings": [ { "type": "select", "id": "logo_position", "options": [ { "value": "top-left", "label": "t:sections.header.settings.logo_position.options__2.label" }, { "value": "top-center", "label": "t:sections.header.settings.logo_position.options__3.label" }, { "value": "middle-left", "label": "t:sections.header.settings.logo_position.options__1.label" }, { "value": "middle-center", "label": "t:sections.header.settings.logo_position.options__4.label" } ], "default": "middle-left", "label": "t:sections.header.settings.logo_position.label", "info": "t:sections.header.settings.logo_help.content" }, { "type": "link_list", "id": "menu", "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" }, { "value": "drawer", "label": "t:sections.header.settings.menu_type_desktop.options__3.label" } ], "default": "dropdown", "label": "t:sections.header.settings.menu_type_desktop.label", "info": "t:sections.header.settings.menu_type_desktop.info" }, { "type": "select", "id": "sticky_header_type", "options": [ { "value": "none", "label": "t:sections.header.settings.sticky_header_type.options__1.label" }, { "value": "on-scroll-up", "label": "t:sections.header.settings.sticky_header_type.options__2.label" }, { "value": "always", "label": "t:sections.header.settings.sticky_header_type.options__3.label" }, { "value": "reduce-logo-size", "label": "t:sections.header.settings.sticky_header_type.options__4.label" } ], "default": "on-scroll-up", "label": "t:sections.header.settings.sticky_header_type.label" }, { "type": "checkbox", "id": "show_line_separator", "default": true, "label": "t:sections.header.settings.show_line_separator.label" }, { "type": "header", "content": "t:sections.header.settings.header__1.content" }, { "type": "color_scheme", "id": "color_scheme", "label": "t:sections.all.colors.label", "default": "scheme-1" }, { "type": "color_scheme", "id": "menu_color_scheme", "label": "t:sections.header.settings.menu_color_scheme.label", "default": "scheme-1" }, { "type": "header", "content": "t:sections.header.settings.header__3.content", "info": "t:sections.header.settings.header__4.info" }, { "type": "checkbox", "id": "enable_country_selector", "default": false, "label": "t:sections.header.settings.enable_country_selector.label" }, { "type": "header", "content": "t:sections.header.settings.header__5.content", "info": "t:sections.header.settings.header__6.info" }, { "type": "checkbox", "id": "enable_language_selector", "default": false, "label": "t:sections.header.settings.enable_language_selector.label" }, { "type": "header", "content": "t:sections.header.settings.mobile_layout.content" }, { "type": "select", "id": "mobile_logo_position", "options": [ { "value": "center", "label": "t:sections.header.settings.mobile_logo_position.options__1.label" }, { "value": "left", "label": "t:sections.header.settings.mobile_logo_position.options__2.label" } ], "default": "center", "label": "t:sections.header.settings.mobile_logo_position.label" }, { "type": "header", "content": "t:sections.all.spacing" }, { "type": "range", "id": "margin_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.header.settings.margin_bottom.label", "default": 0 }, { "type": "header", "content": "t:sections.all.padding.section_padding_heading" }, { "type": "range", "id": "padding_top", "min": 0, "max": 36, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_top", "default": 20 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 36, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_bottom", "default": 20 } ], "blocks": [ { "type": "@app" } ] } {% endschema %}
Comments