API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 21st, 2018
70
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.33 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. {% if page.url=='/pages/head2/' or page.url=='/pages/lookbook/' %}
  3.  
  4.  
  5. <header>
  6. <div class="grid grid--no-gutters grid--table site-header__mobile-nav">
  7.  
  8. <div class="grid__item small--one-half {{ logo_classes }}">
  9.  
  10.  
  11. {% if section.settings.logo %}
  12. {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  13. <div class="site-header__logo-image">
  14.  
  15. {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
  16. <a href="\">
  17. <img class="lazyload js"
  18. src="{{ section.settings.logo | img_url: '300x300' }}"
  19. data-src="{{ img_url }}"
  20. data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
  21. data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
  22. data-sizes="auto"
  23. alt="{{ logo_alt | escape }}"
  24. style="max-width: {{ section.settings.logo_max_width }}px">
  25. <noscript>
  26. {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
  27. <img src="{{ section.settings.logo | img_url: image_size }}"
  28. srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
  29. alt="{{ section.settings.logo.alt | default: shop.name }}"
  30. style="max-width: {{ section.settings.logo_max_width }}px;">
  31. </noscript>
  32. </a>
  33. </div>
  34. {% else %}
  35. <a class="site-header__logo-link" href="/">{{ shop.name }}</a>
  36. {% endif %}
  37.  
  38. </div>
  39.  
  40.  
  41.  
  42. <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
  43. {% include 'site-nav' %}
  44. </nav>
  45.  
  46. <div class="grid__item small--one-half medium-up--one-third text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
  47. <div class="site-header__icons-wrapper">
  48. <div class="site-header__search small--hide">
  49. {% include 'search-form' %}
  50. </div>
  51.  
  52.  
  53. <button type="button" class="btn--link site-header__search-toggle js-drawer-open-top medium-up--hide">
  54. {% include 'icon-search' %}
  55. <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
  56. </button>
  57.  
  58.  
  59. {% if customer %}
  60. <a href="/account" class="site-header__account">
  61. {% include 'icon-login' %}
  62. <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
  63. </a>
  64. {% else %}
  65. <a href="/account/login" class="site-header__account">
  66. {% include 'icon-login' %}
  67. <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
  68. </a>
  69. {% endif %}
  70.  
  71. <a href="/cart" class="site-header__cart">
  72. {% include 'icon-cart' %}
  73. <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
  74.  
  75. {% if cart.item_count > 0 %}
  76. <div id="CartCount" class="site-header__cart-count">
  77. <span>{{ cart.item_count }}</span>
  78. <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
  79. </div>
  80. {% endif %}
  81. </a>
  82.  
  83. {% unless linklists[section.settings.main_linklist] == blank %}
  84. <button type="button" class="btn--link site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="navigation" aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
  85. {% include 'icon-hamburger' %}
  86. {% include 'icon-close' %}
  87. </button>
  88. {% endunless %}
  89. </div>
  90.  
  91. </div>
  92. </div>
  93.  
  94. <nav class="mobile-nav-wrapper medium-up--hide" role="navigation">
  95. <ul id="MobileNav" class="mobile-nav">
  96. {% for link in linklists[section.settings.main_linklist].links %}
  97. {%- assign outerLoopIndex = forloop.index -%}
  98.  
  99. <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
  100. {% if link.links != blank %}
  101. {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %}
  102. <button type="button" class="btn--link js-toggle-submenu mobile-nav__link" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false">
  103. {{ link.title }}
  104. <div class="mobile-nav__icon">
  105. {% include 'icon-chevron-right' %}
  106. </div>
  107. </button>
  108. <ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2">
  109. <li class="mobile-nav__item border-bottom">
  110. <div class="mobile-nav__table">
  111. <div class="mobile-nav__table-cell mobile-nav__return">
  112. <button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button" aria-expanded="true" aria-label="{{ link.title }}">
  113. {% include 'icon-chevron-left' %}
  114. </button>
  115. </div>
  116. <a href="{{ link.url }}" class="mobile-nav__sublist-link mobile-nav__sublist-header"{% if link.active %} aria-current="page"{% endif %}>
  117. {{ link.title }}
  118. </a>
  119. </div>
  120. </li>
  121.  
  122. {% for childlink in link.links %}
  123. <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
  124. {% if childlink.links != blank %}
  125. {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %}
  126. <button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grandchild_list_handle }}" aria-expanded="false">
  127. {{ childlink.title }}
  128. <div class="mobile-nav__icon">
  129. {% include 'icon-chevron-right' %}
  130. </div>
  131. </button>
  132. <ul class="mobile-nav__dropdown" data-parent="{{ grandchild_list_handle }}" data-level="3">
  133. <li class="mobile-nav__item border-bottom">
  134. <div class="mobile-nav__table">
  135. <div class="mobile-nav__table-cell mobile-nav__return">
  136. <button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}">
  137. {% include 'icon-chevron-left' %}
  138. </button>
  139. </div>
  140. <a href="{{ childlink.url }}" class="mobile-nav__sublist-link mobile-nav__sublist-header"{% if childlink.active %} aria-current="page"{% endif %}>
  141. {{ childlink.title }}
  142. </a>
  143. </div>
  144. </li>
  145. {% for grandchildlink in childlink.links %}
  146. <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
  147. <a href="{{ grandchildlink.url }}" class="mobile-nav__sublist-link"{% if grandchildlink.active %} aria-current="page"{% endif %}>
  148. {{ grandchildlink.title | escape }}
  149. </a>
  150. </li>
  151. {% endfor %}
  152. </ul>
  153. {% else %}
  154. <a href="{{ childlink.url }}" class="mobile-nav__sublist-link"{% if childlink.active %} aria-current="page"{% endif %}>
  155. {{ childlink.title | escape }}
  156. </a>
  157. {% endif %}
  158. </li>
  159. {% endfor %}
  160. </ul>
  161. {% else %}
  162. <a href="{{ link.url }}" class="mobile-nav__link"{% if link.active %} aria-current="page"{% endif %}>
  163. {{ link.title }}
  164. </a>
  165. {% endif %}
  166. </li>
  167. {% endfor %}
  168. </ul>
  169. </nav>
  170. </header>
  171.  
  172.  
  173. {% else %}
  174.  
  175.  
  176.  
  177. <div data-section-id="{{ section.id }}" data-section-type="header-section">
  178. {% if section.settings.message %}
  179. {% if section.settings.home_page_only == false or template.name == 'index' %}
  180. <style>
  181. .announcement-bar {
  182. background-color: {{ section.settings.color_bg }};
  183. }
  184.  
  185. .announcement-bar--link:hover {
  186. {% assign brightness = section.settings.color_bg | color_brightness %}
  187.  
  188. {% if brightness <= 192 %}
  189. {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
  190. background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
  191. {% else %}
  192. {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
  193. background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
  194. {% endif %}
  195. }
  196.  
  197. .announcement-bar__message {
  198. color: {{ section.settings.color_text }};
  199. }
  200. </style>
  201.  
  202. {% if section.settings.message_link == blank %}
  203. <div class="announcement-bar">
  204. {% else %}
  205. <a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
  206. {% endif %}
  207.  
  208. <p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>
  209.  
  210. {% if section.settings.message_link == blank %}
  211. </div>
  212. {% else %}
  213. </a>
  214. {% endif %}
  215.  
  216. {% endif %}
  217. {% endif %}
  218.  
  219. <header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner" >
  220. <div class="grid grid--no-gutters grid--table site-header__mobile-nav">
  221. {% if section.settings.align_logo == 'center' %}
  222. <div class="grid__item small--hide medium-up--one-third">
  223. <div class="site-header__search">
  224. {% include 'search-form' %}
  225. </div>
  226. </div>
  227. {% endif %}
  228.  
  229. {% if section.settings.align_logo == 'center' %}
  230. {%- assign logo_classes = 'medium-up--one-third logo-align--center' -%}
  231. {% else %}
  232. {%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
  233. {% endif %}
  234.  
  235. <div class="grid__item small--one-half {{ logo_classes }}">
  236. {% comment %}
  237. Use the uploaded logo from theme settings if enabled.
  238. Site name gets precedence with H1 tag on homepage, div on other pages.
  239. {% endcomment %}
  240. {% if template.name == 'index' %}
  241. <h1 class="h2 site-header__logo">
  242. {% else %}
  243. <div class="h2 site-header__logo">
  244. {% endif %}
  245. {% if section.settings.logo %}
  246. {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  247. <div class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
  248.  
  249. {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
  250. <a href="\">
  251. <img class="lazyload js"
  252. src="{{ section.settings.logo | img_url: '300x300' }}"
  253. data-src="{{ img_url }}"
  254. data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
  255. data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
  256. data-sizes="auto"
  257. alt="{{ logo_alt | escape }}"
  258. style="max-width: {{ section.settings.logo_max_width }}px">
  259. <noscript>
  260. {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
  261. <img src="{{ section.settings.logo | img_url: image_size }}"
  262. srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
  263. alt="{{ section.settings.logo.alt | default: shop.name }}"
  264. style="max-width: {{ section.settings.logo_max_width }}px;">
  265. </noscript>
  266. </a>
  267. </div>
  268. {% else %}
  269. <a class="site-header__logo-link" href="/">{{ shop.name }}</a>
  270. {% endif %}
  271.  
  272. </div>
  273.  
  274. {% if section.settings.align_logo == 'left' %}
  275. <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
  276. {% include 'site-nav' %}
  277. </nav>
  278. {% endif %}
  279.  
  280. <div class="grid__item small--one-half {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
  281. <div class="site-header__icons-wrapper">
  282. {% if section.settings.align_logo == 'left' %}
  283. <div class="site-header__search small--hide">
  284. {% include 'search-form' %}
  285. </div>
  286. {% endif %}
  287.  
  288. <button type="button" class="btn--link site-header__search-toggle js-drawer-open-top medium-up--hide">
  289. {% include 'icon-search' %}
  290. <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
  291. </button>
  292.  
  293. {% if shop.customer_accounts_enabled %}
  294. {% if customer %}
  295. <a href="/account" class="site-header__account">
  296. {% include 'icon-login' %}
  297. <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
  298. </a>
  299. {% else %}
  300. <a href="/account/login" class="site-header__account">
  301. {% include 'icon-login' %}
  302. <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
  303. </a>
  304. {% endif %}
  305. {% endif %}
  306.  
  307. <a href="/cart" class="site-header__cart">
  308. {% include 'icon-cart' %}
  309. <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
  310.  
  311. {% if cart.item_count > 0 %}
  312. <div id="CartCount" class="site-header__cart-count">
  313. <span>{{ cart.item_count }}</span>
  314. <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
  315. </div>
  316. {% endif %}
  317. </a>
  318.  
  319. {% unless linklists[section.settings.main_linklist] == blank %}
  320. <button type="button" class="btn--link site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="navigation" aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
  321. {% include 'icon-hamburger' %}
  322. {% include 'icon-close' %}
  323. </button>
  324. {% endunless %}
  325. </div>
  326.  
  327. </div>
  328. </div>
  329.  
  330. <nav class="mobile-nav-wrapper medium-up--hide" role="navigation">
  331. <ul id="MobileNav" class="mobile-nav">
  332. {% for link in linklists[section.settings.main_linklist].links %}
  333. {%- assign outerLoopIndex = forloop.index -%}
  334.  
  335. <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
  336. {% if link.links != blank %}
  337. {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %}
  338. <button type="button" class="btn--link js-toggle-submenu mobile-nav__link" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false">
  339. {{ link.title }}
  340. <div class="mobile-nav__icon">
  341. {% include 'icon-chevron-right' %}
  342. </div>
  343. </button>
  344. <ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2">
  345. <li class="mobile-nav__item border-bottom">
  346. <div class="mobile-nav__table">
  347. <div class="mobile-nav__table-cell mobile-nav__return">
  348. <button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button" aria-expanded="true" aria-label="{{ link.title }}">
  349. {% include 'icon-chevron-left' %}
  350. </button>
  351. </div>
  352. <a href="{{ link.url }}" class="mobile-nav__sublist-link mobile-nav__sublist-header"{% if link.active %} aria-current="page"{% endif %}>
  353. {{ link.title }}
  354. </a>
  355. </div>
  356. </li>
  357.  
  358. {% for childlink in link.links %}
  359. <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
  360. {% if childlink.links != blank %}
  361. {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %}
  362. <button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grandchild_list_handle }}" aria-expanded="false">
  363. {{ childlink.title }}
  364. <div class="mobile-nav__icon">
  365. {% include 'icon-chevron-right' %}
  366. </div>
  367. </button>
  368. <ul class="mobile-nav__dropdown" data-parent="{{ grandchild_list_handle }}" data-level="3">
  369. <li class="mobile-nav__item border-bottom">
  370. <div class="mobile-nav__table">
  371. <div class="mobile-nav__table-cell mobile-nav__return">
  372. <button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}">
  373. {% include 'icon-chevron-left' %}
  374. </button>
  375. </div>
  376. <a href="{{ childlink.url }}" class="mobile-nav__sublist-link mobile-nav__sublist-header"{% if childlink.active %} aria-current="page"{% endif %}>
  377. {{ childlink.title }}
  378. </a>
  379. </div>
  380. </li>
  381. {% for grandchildlink in childlink.links %}
  382. <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
  383. <a href="{{ grandchildlink.url }}" class="mobile-nav__sublist-link"{% if grandchildlink.active %} aria-current="page"{% endif %}>
  384. {{ grandchildlink.title | escape }}
  385. </a>
  386. </li>
  387. {% endfor %}
  388. </ul>
  389. {% else %}
  390. <a href="{{ childlink.url }}" class="mobile-nav__sublist-link"{% if childlink.active %} aria-current="page"{% endif %}>
  391. {{ childlink.title | escape }}
  392. </a>
  393. {% endif %}
  394. </li>
  395. {% endfor %}
  396. </ul>
  397. {% else %}
  398. <a href="{{ link.url }}" class="mobile-nav__link"{% if link.active %} aria-current="page"{% endif %}>
  399. {{ link.title }}
  400. </a>
  401. {% endif %}
  402. </li>
  403. {% endfor %}
  404. </ul>
  405. </nav>
  406. <div style="padding-bottom:3vw;"></div>
  407. </div>
  408. </div>
  409. </header>
  410.  
  411.  
  412.  
  413. {% if section.settings.align_logo == 'center' %}
  414. <nav class="small--hide border-bottom" id="AccessibleNav" role="navigation">
  415. {% include 'site-nav', nav_alignment: 'site-nav--centered' %}
  416. </nav>
  417. {% endif %}
  418.  
  419.  
  420.  
  421. {% endif %}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!