API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 7th, 2017
938
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.32 KB | None | 0 0
raw download clone embed print report
  1. {% if section.settings.message %}
  2. <style>
  3. div#PageContainer { padding-top: 45px; }
  4. .site-header { top: 45px; }
  5. .notification-bar {
  6. top: 0;
  7. z-index:110;
  8. background-color: {{ section.settings.color_bg }};
  9. }
  10.  
  11. .notification-bar__message {
  12. color: {{ section.settings.color_text }};
  13. }
  14. </style>
  15. {% else %}
  16. <style>
  17. .site-header { top: 0px; }
  18. </style>
  19. {% endif %}
  20.  
  21.  
  22.  
  23. {% if section.settings.message %}
  24. <style>
  25. .notification-bar {
  26. background-color: {{ section.settings.color_bg }};
  27. }
  28.  
  29. .notification-bar__message {
  30. color: {{ section.settings.color_text }};
  31. }
  32.  
  33. {% if section.settings.logo != blank %}
  34. .site-header__logo-image {
  35. max-width: {{ section.settings.logo_max_width | escape }}px;
  36. }
  37. {% endif %}
  38.  
  39. {% if section.settings.align_logo == 'left' %}
  40. .site-header__logo-image {
  41. margin: 0;
  42. }
  43. {% endif %}
  44. </style>
  45. {% endif %}
  46.  
  47. <div data-section-id="{{ section.id }}" data-section-type="header-section">
  48. <nav class="mobile-nav-wrapper medium-up--hide" role="navigation">
  49. <ul id="MobileNav" class="mobile-nav">
  50. {% for link in linklists[section.settings.main_linklist].links %}
  51. {%- assign child_list_handle = link.title | handleize -%}
  52.  
  53. <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
  54. {% if linklists[child_list_handle].links != blank %}
  55. <button type="button" class="btn--link js-toggle-submenu mobile-nav__link" data-target="{{ child_list_handle }}" data-level="1">
  56. {{ link.title }}
  57. <div class="mobile-nav__icon">
  58. {% include 'icon-chevron-right' %}
  59. <span class="icon__fallback-text">{{ 'layout.navigation.expand' | t }}</span>
  60. </div>
  61. </button>
  62. <ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2">
  63. <li class="mobile-nav__item border-bottom">
  64. <div class="mobile-nav__table">
  65. <div class="mobile-nav__table-cell mobile-nav__return">
  66. <button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button">
  67. {% include 'icon-chevron-left' %}
  68. <span class="icon__fallback-text">{{ 'layout.navigation.collapse' | t }}</span>
  69. </button>
  70. </div>
  71. <a href="{{ link.url }}" class="mobile-nav__sublist-link mobile-nav__sublist-header">
  72. {{ link.title }}
  73. </a>
  74. </div>
  75. </li>
  76.  
  77. {% for childlink in linklists[child_list_handle].links %}
  78. {% assign grand_child_list_handle = childlink.title | handle %}
  79.  
  80. <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
  81. {% if linklists[grand_child_list_handle].links != blank %}
  82. <button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grand_child_list_handle }}">
  83. {{ childlink.title }}
  84. <div class="mobile-nav__icon">
  85. {% include 'icon-chevron-right' %}
  86. <span class="icon__fallback-text">{{ 'layout.navigation.expand' | t }}</span>
  87. </div>
  88. </button>
  89. <ul class="mobile-nav__dropdown" data-parent="{{ grand_child_list_handle }}" data-level="3">
  90. <li class="mobile-nav__item border-bottom">
  91. <div class="mobile-nav__table">
  92. <div class="mobile-nav__table-cell mobile-nav__return">
  93. <button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}">
  94. {% include 'icon-chevron-left' %}
  95. <span class="icon__fallback-text">{{ 'layout.navigation.collapse' | t }}</span>
  96. </button>
  97. </div>
  98. <a href="{{ childlink.url }}" class="mobile-nav__sublist-link mobile-nav__sublist-header">
  99. {{ childlink.title }}
  100. </a>
  101. </div>
  102. </li>
  103. {% for grandchildlink in linklists[grand_child_list_handle].links %}
  104. <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
  105. <a href="{{ grandchildlink.url }}" class="mobile-nav__sublist-link">
  106. {{ grandchildlink.title | escape }}
  107. </a>
  108. </li>
  109. {% endfor %}
  110. </ul>
  111. {% else %}
  112. <a href="{{ childlink.url }}" class="mobile-nav__sublist-link">
  113. {{ childlink.title | escape }}
  114. </a>
  115. {% endif %}
  116. </li>
  117. {% endfor %}
  118. </ul>
  119. {% else %}
  120. <a href="{{ link.url }}" class="mobile-nav__link">
  121. {{ link.title }}
  122. </a>
  123. {% endif %}
  124. </li>
  125. {% endfor %}
  126. </ul>
  127. </nav>
  128.  
  129. {% if section.settings.message %}
  130. {% if section.settings.home_page_only == false or template.name == 'index' %}
  131. <style>
  132. .announcement-bar {
  133. background-color: {{ section.settings.color_bg }};
  134. }
  135.  
  136. .announcement-bar--link:hover {
  137. {% assign brightness = section.settings.color_bg | color_brightness %}
  138.  
  139. {% if brightness <= 192 %}
  140. {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
  141. background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
  142. {% else %}
  143. {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
  144. background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
  145. {% endif %}
  146. }
  147.  
  148. .announcement-bar__message {
  149. color: {{ section.settings.color_text }};
  150. }
  151. </style>
  152.  
  153. {% if section.settings.message_link == blank %}
  154. <div class="announcement-bar">
  155. {% else %}
  156. <a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
  157. {% endif %}
  158.  
  159. <p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>
  160.  
  161. {% if section.settings.message_link == blank %}
  162. </div>
  163. {% else %}
  164. </a>
  165. {% endif %}
  166.  
  167. {% endif %}
  168. {% endif %}
  169.  
  170. <header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner">
  171. <div class="grid grid--no-gutters grid--table">
  172. {% if section.settings.align_logo == 'center' %}
  173. <div class="grid__item small--hide medium-up--one-third">
  174. <div class="site-header__search">
  175. {% include 'search-form' %}
  176. </div>
  177. </div>
  178. {% endif %}
  179.  
  180. {% if section.settings.align_logo == 'center' %}
  181. {%- assign logo_classes = 'medium-up--one-third logo-align--center' -%}
  182. {% else %}
  183. {%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
  184. {% endif %}
  185.  
  186. <div class="grid__item small--one-half {{ logo_classes }}">
  187. {% comment %}
  188. Use the uploaded logo from theme settings if enabled.
  189. Site name gets precedence with H1 tag on homepage, div on other pages.
  190. {% endcomment %}
  191. {% if template.name == 'index' %}
  192. <h1 class="h2 site-header__logo" itemscope itemtype="http://schema.org/Organization">
  193. {% else %}
  194. <div class="h2 site-header__logo" itemscope itemtype="http://schema.org/Organization">
  195. {% endif %}
  196. {% if section.settings.logo %}
  197. {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  198. <a href="/" itemprop="url" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
  199. {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
  200. <img class="lazyload js"
  201. src="{{ section.settings.logo | img_url: '300x300' }}"
  202. data-src="{{ img_url }}"
  203. data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
  204. data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
  205. data-sizes="auto"
  206. alt="{{ logo_alt | escape }}"
  207. style="max-width: {{ section.settings.logo_max_width }}px">
  208. <noscript>
  209. {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
  210. <img src="{{ section.settings.logo | img_url: image_size }}"
  211. srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
  212. alt="{{ section.settings.logo.alt | default: shop.name }}"
  213. itemprop="logo"
  214. style="max-width: {{ section.settings.logo_max_width }}px;">
  215. </noscript>
  216. </a>
  217. {% else %}
  218. <a class="site-header__logo-link" href="/" itemprop="url">{{ shop.name }}</a>
  219. {% endif %}
  220. {% if template.name == 'index' %}
  221. </h1>
  222. {% else %}
  223. </div>
  224. {% endif %}
  225. </div>
  226.  
  227. {% if section.settings.align_logo == 'left' %}
  228. <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
  229. {% include 'site-nav' %}
  230. </nav>
  231. {% endif %}
  232.  
  233. <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 %}">
  234. <div class="site-header__icons-wrapper">
  235. {% if section.settings.align_logo == 'left' %}
  236. <div class="site-header__search small--hide">
  237. {% include 'search-form' %}
  238. </div>
  239. {% endif %}
  240.  
  241. <button type="button" class="btn--link site-header__search-toggle js-drawer-open-top medium-up--hide">
  242. {% include 'icon-search' %}
  243. <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
  244. </button>
  245.  
  246. {% if shop.customer_accounts_enabled %}
  247. {% if customer %}
  248. <a href="/account" class="site-header__account">
  249. {% include 'icon-login' %}
  250. <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
  251. </a>
  252. {% else %}
  253. <a href="/account/login" class="site-header__account">
  254. {% include 'icon-login' %}
  255. <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
  256. </a>
  257. {% endif %}
  258. {% endif %}
  259.  
  260. <a href="/cart" class="site-header__cart">
  261. {% include 'icon-cart' %}
  262. <span class="visually-hidden">{{ 'layout.cart.title' | t }}</span>
  263. <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
  264. {% if cart.item_count > 0 %}
  265. <div id="CartCount" class="site-header__cart-count">
  266. <span>{{ cart.item_count }}</span>
  267. <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
  268. </div>
  269. {% endif %}
  270. </a>
  271.  
  272. {% unless linklists[section.settings.main_linklist] == blank %}
  273. <button type="button" class="btn--link site-header__menu js-mobile-nav-toggle mobile-nav--open">
  274. {% include 'icon-hamburger' %}
  275. {% include 'icon-close' %}
  276. <span class="icon__fallback-text">{{ 'layout.navigation.toggle' | t }}</span>
  277. </button>
  278. {% endunless %}
  279. </div>
  280.  
  281. </div>
  282. </div>
  283. </header>
  284.  
  285. {% if section.settings.align_logo == 'center' %}
  286. <nav class="small--hide border-bottom" id="AccessibleNav" role="navigation">
  287. {% include 'site-nav', nav_alignment: 'site-nav--centered' %}
  288. </nav>
  289. {% endif %}
  290. </div>
  291.  
  292. {% schema %}
  293. {
  294. "name": "Header",
  295. "settings": [
  296. {
  297. "type": "radio",
  298. "id": "align_logo",
  299. "label": "Logo alignment",
  300. "default": "left",
  301. "options": [
  302. {"value": "left", "label": "Left"},
  303. {"value": "center", "label": "Centered"}
  304. ]
  305. },
  306. {
  307. "type": "image_picker",
  308. "id": "logo",
  309. "label": "Logo image"
  310. },
  311. {
  312. "type": "text",
  313. "id": "logo_max_width",
  314. "label": "Custom logo width (in pixels)",
  315. "default": "100"
  316. },
  317. {
  318. "type": "link_list",
  319. "id": "main_linklist",
  320. "label": "Menu",
  321. "default": "main-menu"
  322. },
  323. {
  324. "type": "header",
  325. "content": "Announcement bar"
  326. },
  327. {
  328. "type": "checkbox",
  329. "id": "message",
  330. "label": "Show announcement",
  331. "default": false
  332. },
  333. {
  334. "type": "checkbox",
  335. "id": "home_page_only",
  336. "label": "Home page only",
  337. "default": true
  338. },
  339. {
  340. "type": "text",
  341. "id": "message_text",
  342. "label": "Announcement text",
  343. "default": "Announce something here"
  344. },
  345. {
  346. "type": "url",
  347. "id": "message_link",
  348. "label": "Announcement link",
  349. "info": "Optional"
  350. },
  351. {
  352. "type": "color",
  353. "id": "color_bg",
  354. "label": "Bar",
  355. "default": "#7796a8"
  356. },
  357. {
  358. "type": "color",
  359. "id": "color_text",
  360. "label": "Text",
  361. "default": "#fff"
  362. }
  363. ]
  364. }
  365. {% endschema %}
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!