Skip to content

Commit

Permalink
Merge pull request #28 from TrellisCommerce/feature/SHOPBASE-16
Browse files Browse the repository at this point in the history 
Feature/shopbase 16
  • Loading branch information
@cmegalo
cmegalo authored Aug 8, 2024
2 parents ee75f0f + 702471e commit 9b0306d
Show file tree
Hide file tree
Showing 4 changed files with 249 additions and 39 deletions.
35 changes: 34 additions & 1 deletion assets/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
! tailwindcss v3.4.8 | MIT License | https://tailwindcss.com
! tailwindcss v3.4.9 | MIT License | https://tailwindcss.com
*/

/*
Expand Down Expand Up @@ -587,10 +587,43 @@ video {
display: flex;
}

.twcss-aspect-square {
aspect-ratio: 1 / 1;
}

.twcss-w-full {
width: 100%;
}

.twcss-max-w-64 {
max-width: 16rem;
}

.twcss-flex-1 {
flex: 1 1 0%;
}

.twcss-flex-col {
flex-direction: column;
}

.twcss-gap-3 {
gap: 0.75rem;
}

.twcss-gap-4 {
gap: 1rem;
}

.twcss-gap-5 {
gap: 1.25rem;
}

.twcss-text-base {
font-size: 1rem;
line-height: 1.5rem;
}

.twcss-capitalize {
text-transform: capitalize;
}
Expand Down
91 changes: 90 additions & 1 deletion sections/header-group.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1,90 @@
{"name":"t:sections.header.name","type":"header","sections":{"announcement-bar":{"type":"announcement-bar","blocks":{"announcement-bar-0":{"type":"announcement","settings":{"text":"Welcome to our store","link":""}}},"block_order":["announcement-bar-0"],"settings":{"color_scheme":"scheme-5","show_line_separator":false,"show_social":false,"auto_rotate":false,"change_slides_speed":5,"enable_country_selector":false,"enable_language_selector":false}},"header":{"type":"header","settings":{"logo_position":"middle-left","menu":"main-menu","menu_type_desktop":"mega","sticky_header_type":"reduce-logo-size","show_line_separator":true,"color_scheme":"scheme-4","menu_color_scheme":"","enable_country_selector":true,"enable_language_selector":true,"enable_customer_avatar":true,"mobile_logo_position":"center","margin_bottom":0,"padding_top":8,"padding_bottom":8}}},"order":["announcement-bar","header"]}
/*
* ------------------------------------------------------------
* IMPORTANT: The contents of this file are auto-generated.
*
* This file may be updated by the Shopify admin theme editor
* or related systems. Please exercise caution as any changes
* made to this file may be overwritten.
* ------------------------------------------------------------
*/
{
"name": "t:sections.header.name",
"type": "header",
"sections": {
"announcement-bar": {
"type": "announcement-bar",
"blocks": {
"announcement-bar-0": {
"type": "announcement",
"settings": {
"text": "Welcome to our store",
"link": ""
}
}
},
"block_order": [
"announcement-bar-0"
],
"settings": {
"color_scheme": "scheme-5",
"show_line_separator": false,
"show_social": false,
"auto_rotate": false,
"change_slides_speed": 5,
"enable_country_selector": false,
"enable_language_selector": false
}
},
"header": {
"type": "header",
"blocks": {
"promotional_kh6iNC": {
"type": "promotional",
"settings": {
"promotional_index": 1,
"promotional_image": "shopify:\/\/shop_images\/Main_d624f226-0a89-4fe1-b333-0d1548b43c06.jpg",
"promotional_headline": "Snowboards on sale!",
"promotional_description": "Grab your snowboard while they're on sale! Promotion only valid while inventory lasts.",
"promotional_button_text": "Shop",
"promotional_button_url": "shopify:\/\/products\/the-collection-snowboard-oxygen"
}
},
"promotional_bBzBQr": {
"type": "promotional",
"settings": {
"promotional_index": 1,
"promotional_image": "shopify:\/\/shop_images\/sample-normal-wax.png",
"promotional_headline": "Sample Wax",
"promotional_description": "Available with each snowboard purchase.",
"promotional_button_text": "",
"promotional_button_url": ""
}
}
},
"block_order": [
"promotional_kh6iNC",
"promotional_bBzBQr"
],
"settings": {
"logo_position": "middle-left",
"menu": "main-menu",
"menu_type_desktop": "mega",
"sticky_header_type": "reduce-logo-size",
"show_line_separator": true,
"color_scheme": "scheme-4",
"menu_color_scheme": "",
"enable_country_selector": true,
"enable_language_selector": true,
"enable_customer_avatar": true,
"mobile_logo_position": "center",
"margin_bottom": 0,
"padding_top": 8,
"padding_bottom": 8
}
}
},
"order": [
"announcement-bar",
"header"
]
}
44 changes: 42 additions & 2 deletions sections/header.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@
if section.settings.menu_type_desktop == 'dropdown'
render 'header-dropdown-menu'
elsif section.settings.menu_type_desktop != 'drawer'
render 'header-mega-menu'
render 'header-mega-menu' blocks: section.blocks
endif
endif
%}
Expand Down Expand Up @@ -655,7 +655,47 @@
],
"blocks": [
{
"type": "@app"
"type": "@app",
},
{
"type": "promotional",
"name": "Promotional Items",
"settings": [
{
"type": "number",
"id": "promotional_index",
"default": 1,
"label": "Nav Position"
},
{
"type": "image_picker",
"id": "promotional_image",
"label": "Image"
},
{
"type": "text",
"id": "promotional_headline",
"default": "Headline",
"label": "Headline"
},
{
"type": "text",
"id": "promotional_description",
"default": "Description",
"label": "Description"
},
{
"type": "text",
"id": "promotional_button_text",
"default": "Button Text",
"label": "Button Text"
},
{
"type": "url",
"id": "promotional_button_url",
"label": "Button Url"
}
]
}
]
}
Expand Down
118 changes: 83 additions & 35 deletions snippets/header-mega-menu.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<nav class="header__inline-menu">
<ul class="list-menu list-menu--inline" role="list">
{%- for link in section.settings.menu.links -%}
{% assign parent_index = forloop.index %}
<li>
{%- if link.links != blank -%}
<header-menu>
Expand All @@ -30,43 +31,90 @@
class="mega-menu__content color-{{ section.settings.menu_color_scheme }} gradient motion-reduce global-settings-popup twcss-z-10"
tabindex="-1"
>
<ul
class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
role="list"
>
{%- for childlink in link.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- if childlink.links != blank -%}
<ul class="list-unstyled" role="list">
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
<div class="page-width twcss-flex twcss-gap-5">
<ul
class="mega-menu__list twcss-flex-1 {% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
role="list"
>
{%- for childlink in link.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- if childlink.links != blank -%}
<ul class="list-unstyled" role="list">
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- if grandchildlink.links != blank -%}
<ul class="list-unstyled" role="list">
{%- for greatgrandchildlink in grandchildlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ grandchildlink.handle }}-{{ greatgrandchildlink.handle }}"
href="{{ greatgrandchildlink.url }}"
class="mega-menu__link link{% if greatgrandchildlink.current %} mega-menu__link--active{% endif %}"
{% if greatgrandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ greatgrandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{%- for block in blocks -%}
{% case block.type %}
{%- when 'promotional' -%}
{%- if block.settings.promotional_index == parent_index -%}
<div class="twcss-w-full twcss-max-w-64 twcss-flex twcss-flex-col twcss-gap-4">
{%- if block.settings.promotional_headline -%}
<img class="twcss-aspect-square" src="{{ block.settings.promotional_image | image_url }}" alt="{{ block.settings.promotional_image.alt | escape }}">

Check failure on line 96 in snippets/header-mega-menu.liquid

View workflow job for this annotation

GitHub Actions / Theme Check Report

snippets/header-mega-menu.liquid#L96 

[ImgWidthAndHeight] Missing width and height attributes

Check warning on line 96 in snippets/header-mega-menu.liquid

View workflow job for this annotation

GitHub Actions / Theme Check Report

snippets/header-mega-menu.liquid#L96 

[ImgLazyLoading] Use loading="eager" for images visible in the viewport on load and loading="lazy" for others
{%- endif -%}
{%- if block.settings.promotional_headline -%}
<div class="twcss-text-large">
{{ block.settings.promotional_headline }}
</div>
{%- endif -%}
{%- if block.settings.promotional_description -%}
<p class="twcss-text-base">
{{ block.settings.promotional_description }}
</p>
{%- endif -%}
{%- if block.settings.promotional_button_text and block.settings.promotional_button_url -%}
<a href="{{ block.settings.promotional_button_url }}" class="button button--secondary twcss-text-base">
{{ block.settings.promotional_button_text }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endif -%}
</div>
{%- endif -%}
{% endcase %}
{%- endfor -%}
</ul>
</div>
</div>
</details>
</header-menu>
Expand Down

0 comments on commit 9b0306d

Please sign in to comment.