Guest User

Code header Debut

a guest
Jun 4th, 2021
108
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="grid grid--no-gutters grid--table site-header__mobile-nav">
  2.       {% if section.settings.align_logo == 'center' %}
  3.         {%- assign logo_classes = 'medium-up--one-third medium-up--push-one-third logo-align--center' -%}
  4.       {% else %}
  5.         {%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
  6.       {% endif %}
  7.       <div class="medium-up--hide grid__item medium-up--one-third medium-up--push-one-third text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
  8.         <div class="site-header__icons-wrapper">
  9.  
  10.           <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top" data-predictive-search-open-drawer>
  11.             {% include 'icon-search' %}
  12.             <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
  13.           </button>
  14.  
  15.           {% if shop.customer_accounts_enabled %}
  16.             {% if customer %}
  17.               <a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
  18.                 {% include 'icon-login' %}
  19.                 <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
  20.               </a>
  21.             {% else %}
  22.               <a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
  23.                 {% include 'icon-login' %}
  24.                 <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
  25.               </a>
  26.             {% endif %}
  27.           {% endif %}
  28.         </div>
  29.  
  30.       </div>
  31.       <div class="grid__item {{ logo_classes }}">
  32.         {% comment %}
  33.           Use the uploaded logo from theme settings if enabled.
  34.           Site name gets precedence with H1 tag on homepage, div on other pages.
  35.         {% endcomment %}
  36.         {% if request.page_type == 'index' %}
  37.           <h1 class="h2 site-header__logo">
  38.         {% else %}
  39.           <div class="h2 site-header__logo">
  40.         {% endif %}
  41.           {% if section.settings.logo %}
  42.             {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  43.             <a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}" data-image-loading-animation>
  44.               {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
  45.               <img class="lazyload js"
  46.                   src="{{ section.settings.logo | img_url: '300x300' }}"
  47.                   data-src="{{ img_url }}"
  48.                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
  49.                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
  50.                   data-sizes="auto"
  51.                   alt="{{ logo_alt | escape }}"
  52.                   style="max-width: {{ section.settings.logo_max_width }}px">
  53.               <noscript>
  54.                 {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
  55.                 <img src="{{ section.settings.logo | img_url: image_size }}"
  56.                     srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
  57.                     alt="{{ section.settings.logo.alt | default: shop.name }}"
  58.                     style="max-width: {{ section.settings.logo_max_width }}px;">
  59.               </noscript>
  60.             </a>
  61.           {% else %}
  62.             <a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
  63.           {% endif %}
  64.         {% if request.page_type == 'index' %}
  65.           </h1>
  66.         {% else %}
  67.           </div>
  68.         {% endif %}
  69.       </div>
  70.  
  71.       {% if section.settings.align_logo == 'left' %}
  72.         <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
  73.           {% include 'site-nav', linklist: section.settings.main_linklist %}
  74.         </nav>
  75.       {% endif %}
  76.  
  77.       <div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
  78.         <div class="site-header__icons-wrapper">
  79.  
  80.           <button type="button" class="small--hide btn--link site-header__icon site-header__search-toggle js-drawer-open-top" data-predictive-search-open-drawer>
  81.             {% include 'icon-search' %}
  82.             <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
  83.           </button>
  84.  
  85.           {% if shop.customer_accounts_enabled %}
  86.             {% if customer %}
  87.               <a href="{{ routes.account_url }}" class="small--hide site-header__icon site-header__account">
  88.                 {% include 'icon-login' %}
  89.                 <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
  90.               </a>
  91.             {% else %}
  92.               <a href="{{ routes.account_login_url }}" class="small--hide site-header__icon site-header__account">
  93.                 {% include 'icon-login' %}
  94.                 <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
  95.               </a>
  96.             {% endif %}
  97.           {% endif %}
  98.  
  99.           <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
  100.             {% include 'icon-cart' %}
  101.             <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
  102.             <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %} critical-hidden" data-cart-count-bubble>
  103.               <span data-cart-count>{{ cart.item_count }}</span>
  104.               <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
  105.             </div>
  106.           </a>
  107.  
  108.           {% unless linklists[section.settings.main_linklist] == blank %}
  109.             <button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav"  aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
  110.               {% include 'icon-hamburger' %}
  111.               {% include 'icon-close' %}
  112.             </button>
  113.           {% endunless %}
  114.         </div>
  115.  
  116.       </div>
  117.     </div>
RAW Paste Data