@o2vend/theme-cli 1.0.34 → 1.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/lib/dev-server.js +750 -661
- package/lib/lib/liquid-engine.js +88 -65
- package/lib/lib/liquid-filters.js +10 -29
- package/lib/lib/mock-api-server.js +58 -144
- package/lib/lib/mock-data.js +126 -78
- package/lib/lib/webstoreapi-fetcher.js +322 -0
- package/lib/lib/widget-service.js +49 -0
- package/package.json +16 -16
- package/test-theme/layout/theme.liquid +195 -195
|
@@ -1,195 +1,195 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="{{ shop.language | default: 'en' }}">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>{% if page.title %}{{ page.title }} - {% endif %}{{ shop.name }}</title>
|
|
7
|
-
|
|
8
|
-
<!-- Meta tags -->
|
|
9
|
-
<meta name="description" content="{{ page_description | default: shop.name }}">
|
|
10
|
-
<meta name="keywords" content="ecommerce, online store, {{ shop.name }}">
|
|
11
|
-
|
|
12
|
-
<!-- Favicon -->
|
|
13
|
-
<link rel="icon" href="{{ shop.favicon }}">
|
|
14
|
-
|
|
15
|
-
<!-- Resource hints for fonts -->
|
|
16
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
17
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
18
|
-
|
|
19
|
-
<!-- CSS -->
|
|
20
|
-
<link rel="stylesheet" href="/assets/theme.min.css">
|
|
21
|
-
<link rel="stylesheet" href="/assets/components.min.css">
|
|
22
|
-
<link rel="stylesheet" href="/assets/delivery-zone.min.css">
|
|
23
|
-
<!-- intl-tel-input CSS -->
|
|
24
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/css/intlTelInput.min.css">
|
|
25
|
-
|
|
26
|
-
<!-- Font Loading - Non-render-blocking -->
|
|
27
|
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
|
|
28
|
-
<noscript>
|
|
29
|
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
|
|
30
|
-
</noscript>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<!-- Additional head content -->
|
|
34
|
-
{% if additional_head %}
|
|
35
|
-
{{ additional_head }}
|
|
36
|
-
{% endif %}
|
|
37
|
-
|
|
38
|
-
<!-- Plugin hooks for theme head -->
|
|
39
|
-
{% hook 'theme_head' %}
|
|
40
|
-
|
|
41
|
-
{%- comment -%}
|
|
42
|
-
Shopify-compatible placeholder for apps and scripts injected into the <head>.
|
|
43
|
-
In our engine this may be empty, which is fine.
|
|
44
|
-
{%- endcomment -%}
|
|
45
|
-
{{ content_for_header }}
|
|
46
|
-
</head>
|
|
47
|
-
<body
|
|
48
|
-
{% comment %}Animation settings - Check with proper boolean handling{% endcomment %}
|
|
49
|
-
{% liquid
|
|
50
|
-
assign anim_val = settings.enable_animations
|
|
51
|
-
if anim_val == blank or anim_val == null
|
|
52
|
-
assign anim_val = true
|
|
53
|
-
endif
|
|
54
|
-
assign hover_val = settings.enable_hover_effects
|
|
55
|
-
if hover_val == blank or hover_val == null
|
|
56
|
-
assign hover_val = true
|
|
57
|
-
endif
|
|
58
|
-
assign parallax_val = settings.enable_parallax
|
|
59
|
-
if parallax_val == blank or parallax_val == null
|
|
60
|
-
assign parallax_val = false
|
|
61
|
-
endif
|
|
62
|
-
%}
|
|
63
|
-
class="template-{{ template | default: 'index' }} layout-{{ settings.layout_style | default: 'boxed' }}{% unless anim_val or anim_val == true or anim_val == 'true' or anim_val == 1 %} no-animations{% endunless %}{% unless hover_val or hover_val == true or hover_val == 'true' or hover_val == 1 %} no-hover-effects{% endunless %}{% if parallax_val or parallax_val == true or parallax_val == 'true' or parallax_val == 1 %} parallax-enabled{% endif %}"
|
|
64
|
-
data-shop-currency="{{ shop.currency | default: 'USD' }}"
|
|
65
|
-
data-shop-currency-symbol="{{ shop.settings.currencySymbol | default: shop.currency | default: '$' }}"
|
|
66
|
-
data-shop-locale="{{ shop.locale | default: shop.language | default: 'en-US' }}"
|
|
67
|
-
style="font-family: var(--font-primary); font-size: {{ settings.font_size_base | default: 16 }}px;"
|
|
68
|
-
>
|
|
69
|
-
<script>
|
|
70
|
-
window.__SHOP_CURRENCY__ = '{{ shop.currency | default: 'USD' }}';
|
|
71
|
-
window.__SHOP_CURRENCY_SYMBOL__ = '{{ shop.settings.currencySymbol | default: shop.currency | default: '$' }}';
|
|
72
|
-
window.__SHOP_LOCALE__ = '{{ shop.locale | default: shop.language | default: 'en-US' }}';
|
|
73
|
-
</script>
|
|
74
|
-
<!-- Plugin hooks for body begin -->
|
|
75
|
-
{% hook 'theme_body_begin' %}
|
|
76
|
-
<!-- Skip Links for Accessibility -->
|
|
77
|
-
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
78
|
-
|
|
79
|
-
<!-- Header -->
|
|
80
|
-
{% hook 'header_before' %}
|
|
81
|
-
<header class="site-header" id="site-header" role="banner">
|
|
82
|
-
{% section 'sections/header' %}
|
|
83
|
-
</header>
|
|
84
|
-
{% hook 'header_after' %}
|
|
85
|
-
|
|
86
|
-
<!-- Main content -->
|
|
87
|
-
<main class="main-content" id="main-content" role="main">
|
|
88
|
-
<div class="container" style="max-width: {{ settings.container_width | default: 1400 }}px; padding: 0 {{ settings.container_padding | default: 24 }}px;">
|
|
89
|
-
{%- comment -%}
|
|
90
|
-
Use Shopify-compatible {{ content_for_layout }} for layout content,
|
|
91
|
-
but keep support for our existing {{ content }} variable as a fallback.
|
|
92
|
-
{%- endcomment -%}
|
|
93
|
-
{% if content_for_layout %}
|
|
94
|
-
{{ content_for_layout }}
|
|
95
|
-
{% else %}
|
|
96
|
-
{{ content }}
|
|
97
|
-
{% endif %}
|
|
98
|
-
</div>
|
|
99
|
-
</main>
|
|
100
|
-
|
|
101
|
-
<!-- Footer -->
|
|
102
|
-
{% hook 'footer_before' %}
|
|
103
|
-
<footer class="site-footer" role="contentinfo">
|
|
104
|
-
{% section 'sections/footer' %}
|
|
105
|
-
</footer>
|
|
106
|
-
{% hook 'footer_after' %}
|
|
107
|
-
|
|
108
|
-
<!-- JavaScript -->
|
|
109
|
-
<script src="/assets/cart-manager.min.js" defer></script>
|
|
110
|
-
<script src="/assets/theme.min.js" defer></script>
|
|
111
|
-
<script src="/assets/cart-drawer.min.js" defer></script>
|
|
112
|
-
<script src="/assets/delivery-zone.min.js" defer></script>
|
|
113
|
-
<!-- intl-tel-input JS -->
|
|
114
|
-
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/js/intlTelInput.min.js"></script>
|
|
115
|
-
<!-- utils.js is loaded dynamically by intl-tel-input when needed, no need to load it here -->
|
|
116
|
-
|
|
117
|
-
<!-- Async Section Loader -->
|
|
118
|
-
<script src="/assets/async-sections.min.js" defer></script>
|
|
119
|
-
<script>
|
|
120
|
-
// Initialize async section loader if sections are defined
|
|
121
|
-
if (window.asyncSections && window.AsyncSectionLoader) {
|
|
122
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
123
|
-
AsyncSectionLoader.init(window.asyncSections);
|
|
124
|
-
});
|
|
125
|
-
}
|
|
126
|
-
</script>
|
|
127
|
-
|
|
128
|
-
<!-- Additional scripts -->
|
|
129
|
-
{% if additional_scripts %}
|
|
130
|
-
{{ additional_scripts }}
|
|
131
|
-
{% endif %}
|
|
132
|
-
|
|
133
|
-
{% include 'snippets/cart-drawer' %}
|
|
134
|
-
|
|
135
|
-
{% if deliveryZone.enabled %}
|
|
136
|
-
{% include 'snippets/delivery-zone-modal' %}
|
|
137
|
-
{% endif %}
|
|
138
|
-
|
|
139
|
-
<!-- Global login modal (email/password, email OTP, mobile OTP) -->
|
|
140
|
-
{% include 'snippets/login-modal' %}
|
|
141
|
-
|
|
142
|
-
<!-- Add to Cart Modal -->
|
|
143
|
-
{% include 'snippets/add-to-cart-modal' %}
|
|
144
|
-
|
|
145
|
-
<!-- Mobile Bottom Navigation -->
|
|
146
|
-
<nav class="mobile-bottom-nav" role="navigation" aria-label="Bottom navigation">
|
|
147
|
-
<a href="/" class="mobile-bottom-nav__item" data-nav-item="home" aria-label="Home">
|
|
148
|
-
<svg class="mobile-bottom-nav__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
149
|
-
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
|
150
|
-
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
|
151
|
-
</svg>
|
|
152
|
-
<span class="mobile-bottom-nav__label">Home</span>
|
|
153
|
-
</a>
|
|
154
|
-
<a href="/collections" class="mobile-bottom-nav__item" data-nav-item="categories" aria-label="Categories">
|
|
155
|
-
<svg class="mobile-bottom-nav__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
156
|
-
<rect x="3" y="3" width="7" height="7"></rect>
|
|
157
|
-
<rect x="14" y="3" width="7" height="7"></rect>
|
|
158
|
-
<rect x="14" y="14" width="7" height="7"></rect>
|
|
159
|
-
<rect x="3" y="14" width="7" height="7"></rect>
|
|
160
|
-
</svg>
|
|
161
|
-
<span class="mobile-bottom-nav__label">Categories</span>
|
|
162
|
-
</a>
|
|
163
|
-
{% if customer and customer.isAuthenticated %}
|
|
164
|
-
<a href="/account" class="mobile-bottom-nav__item" data-nav-item="account" aria-label="Account">
|
|
165
|
-
<svg class="mobile-bottom-nav__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
166
|
-
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
167
|
-
<circle cx="12" cy="7" r="4"></circle>
|
|
168
|
-
</svg>
|
|
169
|
-
<span class="mobile-bottom-nav__label">Account</span>
|
|
170
|
-
</a>
|
|
171
|
-
{% else %}
|
|
172
|
-
<button type="button" class="mobile-bottom-nav__item" data-nav-item="account" data-login-modal-trigger aria-label="Login">
|
|
173
|
-
<svg class="mobile-bottom-nav__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
174
|
-
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
175
|
-
<circle cx="12" cy="7" r="4"></circle>
|
|
176
|
-
</svg>
|
|
177
|
-
<span class="mobile-bottom-nav__label">Account</span>
|
|
178
|
-
</button>
|
|
179
|
-
{% endif %}
|
|
180
|
-
<button type="button" class="mobile-bottom-nav__item mobile-bottom-nav__item--cart" data-nav-item="cart" data-cart-toggle aria-label="Shopping cart">
|
|
181
|
-
<svg class="mobile-bottom-nav__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
182
|
-
<circle cx="9" cy="21" r="1"></circle>
|
|
183
|
-
<circle cx="20" cy="21" r="1"></circle>
|
|
184
|
-
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
|
185
|
-
</svg>
|
|
186
|
-
<span class="mobile-bottom-nav__label">Cart</span>
|
|
187
|
-
<span class="mobile-bottom-nav__badge" data-cart-count>{{ cart.itemCount | default: 0 }}</span>
|
|
188
|
-
</button>
|
|
189
|
-
</nav>
|
|
190
|
-
|
|
191
|
-
<!-- Plugin hooks for body end -->
|
|
192
|
-
{% hook 'theme_body_end' %}
|
|
193
|
-
</body>
|
|
194
|
-
</html>
|
|
195
|
-
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="{{ shop.language | default: 'en' }}">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>{% if page.title %}{{ page.title }} - {% endif %}{{ shop.name }}</title>
|
|
7
|
+
|
|
8
|
+
<!-- Meta tags -->
|
|
9
|
+
<meta name="description" content="{{ page_description | default: shop.name }}">
|
|
10
|
+
<meta name="keywords" content="ecommerce, online store, {{ shop.name }}">
|
|
11
|
+
|
|
12
|
+
<!-- Favicon -->
|
|
13
|
+
<link rel="icon" href="{{ shop.favicon }}">
|
|
14
|
+
|
|
15
|
+
<!-- Resource hints for fonts -->
|
|
16
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
17
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
18
|
+
|
|
19
|
+
<!-- CSS -->
|
|
20
|
+
<link rel="stylesheet" href="/assets/theme.min.css">
|
|
21
|
+
<link rel="stylesheet" href="/assets/components.min.css">
|
|
22
|
+
<link rel="stylesheet" href="/assets/delivery-zone.min.css">
|
|
23
|
+
<!-- intl-tel-input CSS -->
|
|
24
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/css/intlTelInput.min.css">
|
|
25
|
+
|
|
26
|
+
<!-- Font Loading - Non-render-blocking -->
|
|
27
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
|
|
28
|
+
<noscript>
|
|
29
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
|
|
30
|
+
</noscript>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
<!-- Additional head content -->
|
|
34
|
+
{% if additional_head %}
|
|
35
|
+
{{ additional_head }}
|
|
36
|
+
{% endif %}
|
|
37
|
+
|
|
38
|
+
<!-- Plugin hooks for theme head -->
|
|
39
|
+
{% hook 'theme_head' %}
|
|
40
|
+
|
|
41
|
+
{%- comment -%}
|
|
42
|
+
Shopify-compatible placeholder for apps and scripts injected into the <head>.
|
|
43
|
+
In our engine this may be empty, which is fine.
|
|
44
|
+
{%- endcomment -%}
|
|
45
|
+
{{ content_for_header }}
|
|
46
|
+
</head>
|
|
47
|
+
<body
|
|
48
|
+
{% comment %}Animation settings - Check with proper boolean handling{% endcomment %}
|
|
49
|
+
{% liquid
|
|
50
|
+
assign anim_val = settings.enable_animations
|
|
51
|
+
if anim_val == blank or anim_val == null
|
|
52
|
+
assign anim_val = true
|
|
53
|
+
endif
|
|
54
|
+
assign hover_val = settings.enable_hover_effects
|
|
55
|
+
if hover_val == blank or hover_val == null
|
|
56
|
+
assign hover_val = true
|
|
57
|
+
endif
|
|
58
|
+
assign parallax_val = settings.enable_parallax
|
|
59
|
+
if parallax_val == blank or parallax_val == null
|
|
60
|
+
assign parallax_val = false
|
|
61
|
+
endif
|
|
62
|
+
%}
|
|
63
|
+
class="template-{{ template | default: 'index' }} layout-{{ settings.layout_style | default: 'boxed' }}{% unless anim_val or anim_val == true or anim_val == 'true' or anim_val == 1 %} no-animations{% endunless %}{% unless hover_val or hover_val == true or hover_val == 'true' or hover_val == 1 %} no-hover-effects{% endunless %}{% if parallax_val or parallax_val == true or parallax_val == 'true' or parallax_val == 1 %} parallax-enabled{% endif %}"
|
|
64
|
+
data-shop-currency="{{ shop.currency | default: 'USD' }}"
|
|
65
|
+
data-shop-currency-symbol="{{ shop.settings.currencySymbol | default: shop.currency | default: '$' }}"
|
|
66
|
+
data-shop-locale="{{ shop.locale | default: shop.language | default: 'en-US' }}"
|
|
67
|
+
style="font-family: var(--font-primary); font-size: {{ settings.font_size_base | default: 16 }}px;"
|
|
68
|
+
>
|
|
69
|
+
<script>
|
|
70
|
+
window.__SHOP_CURRENCY__ = '{{ shop.currency | default: 'USD' }}';
|
|
71
|
+
window.__SHOP_CURRENCY_SYMBOL__ = '{{ shop.settings.currencySymbol | default: shop.currency | default: '$' }}';
|
|
72
|
+
window.__SHOP_LOCALE__ = '{{ shop.locale | default: shop.language | default: 'en-US' }}';
|
|
73
|
+
</script>
|
|
74
|
+
<!-- Plugin hooks for body begin -->
|
|
75
|
+
{% hook 'theme_body_begin' %}
|
|
76
|
+
<!-- Skip Links for Accessibility -->
|
|
77
|
+
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
78
|
+
|
|
79
|
+
<!-- Header -->
|
|
80
|
+
{% hook 'header_before' %}
|
|
81
|
+
<header class="site-header" id="site-header" role="banner">
|
|
82
|
+
{% section 'sections/header' %}
|
|
83
|
+
</header>
|
|
84
|
+
{% hook 'header_after' %}
|
|
85
|
+
|
|
86
|
+
<!-- Main content -->
|
|
87
|
+
<main class="main-content" id="main-content" role="main">
|
|
88
|
+
<div class="container" style="max-width: {{ settings.container_width | default: 1400 }}px; padding: 0 {{ settings.container_padding | default: 24 }}px;">
|
|
89
|
+
{%- comment -%}
|
|
90
|
+
Use Shopify-compatible {{ content_for_layout }} for layout content,
|
|
91
|
+
but keep support for our existing {{ content }} variable as a fallback.
|
|
92
|
+
{%- endcomment -%}
|
|
93
|
+
{% if content_for_layout %}
|
|
94
|
+
{{ content_for_layout }}
|
|
95
|
+
{% else %}
|
|
96
|
+
{{ content }}
|
|
97
|
+
{% endif %}
|
|
98
|
+
</div>
|
|
99
|
+
</main>
|
|
100
|
+
|
|
101
|
+
<!-- Footer -->
|
|
102
|
+
{% hook 'footer_before' %}
|
|
103
|
+
<footer class="site-footer" role="contentinfo">
|
|
104
|
+
{% section 'sections/footer' %}
|
|
105
|
+
</footer>
|
|
106
|
+
{% hook 'footer_after' %}
|
|
107
|
+
|
|
108
|
+
<!-- JavaScript -->
|
|
109
|
+
<script src="/assets/cart-manager.min.js" defer></script>
|
|
110
|
+
<script src="/assets/theme.min.js" defer></script>
|
|
111
|
+
<script src="/assets/cart-drawer.min.js" defer></script>
|
|
112
|
+
<script src="/assets/delivery-zone.min.js" defer></script>
|
|
113
|
+
<!-- intl-tel-input JS -->
|
|
114
|
+
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/js/intlTelInput.min.js"></script>
|
|
115
|
+
<!-- utils.js is loaded dynamically by intl-tel-input when needed, no need to load it here -->
|
|
116
|
+
|
|
117
|
+
<!-- Async Section Loader -->
|
|
118
|
+
<script src="/assets/async-sections.min.js" defer></script>
|
|
119
|
+
<script>
|
|
120
|
+
// Initialize async section loader if sections are defined
|
|
121
|
+
if (window.asyncSections && window.AsyncSectionLoader) {
|
|
122
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
123
|
+
AsyncSectionLoader.init(window.asyncSections);
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
</script>
|
|
127
|
+
|
|
128
|
+
<!-- Additional scripts -->
|
|
129
|
+
{% if additional_scripts %}
|
|
130
|
+
{{ additional_scripts }}
|
|
131
|
+
{% endif %}
|
|
132
|
+
|
|
133
|
+
{% include 'snippets/cart-drawer' %}
|
|
134
|
+
|
|
135
|
+
{% if deliveryZone.enabled %}
|
|
136
|
+
{% include 'snippets/delivery-zone-modal' %}
|
|
137
|
+
{% endif %}
|
|
138
|
+
|
|
139
|
+
<!-- Global login modal (email/password, email OTP, mobile OTP) -->
|
|
140
|
+
{% include 'snippets/login-modal' %}
|
|
141
|
+
|
|
142
|
+
<!-- Add to Cart Modal -->
|
|
143
|
+
{% include 'snippets/add-to-cart-modal' %}
|
|
144
|
+
|
|
145
|
+
<!-- Mobile Bottom Navigation -->
|
|
146
|
+
<nav class="mobile-bottom-nav" role="navigation" aria-label="Bottom navigation">
|
|
147
|
+
<a href="/" class="mobile-bottom-nav__item" data-nav-item="home" aria-label="Home">
|
|
148
|
+
<svg class="mobile-bottom-nav__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
149
|
+
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
|
150
|
+
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
|
151
|
+
</svg>
|
|
152
|
+
<span class="mobile-bottom-nav__label">Home</span>
|
|
153
|
+
</a>
|
|
154
|
+
<a href="/collections" class="mobile-bottom-nav__item" data-nav-item="categories" aria-label="Categories">
|
|
155
|
+
<svg class="mobile-bottom-nav__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
156
|
+
<rect x="3" y="3" width="7" height="7"></rect>
|
|
157
|
+
<rect x="14" y="3" width="7" height="7"></rect>
|
|
158
|
+
<rect x="14" y="14" width="7" height="7"></rect>
|
|
159
|
+
<rect x="3" y="14" width="7" height="7"></rect>
|
|
160
|
+
</svg>
|
|
161
|
+
<span class="mobile-bottom-nav__label">Categories</span>
|
|
162
|
+
</a>
|
|
163
|
+
{% if customer and customer.isAuthenticated %}
|
|
164
|
+
<a href="/account" class="mobile-bottom-nav__item" data-nav-item="account" aria-label="Account">
|
|
165
|
+
<svg class="mobile-bottom-nav__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
166
|
+
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
167
|
+
<circle cx="12" cy="7" r="4"></circle>
|
|
168
|
+
</svg>
|
|
169
|
+
<span class="mobile-bottom-nav__label">Account</span>
|
|
170
|
+
</a>
|
|
171
|
+
{% else %}
|
|
172
|
+
<button type="button" class="mobile-bottom-nav__item" data-nav-item="account" data-login-modal-trigger aria-label="Login">
|
|
173
|
+
<svg class="mobile-bottom-nav__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
174
|
+
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
175
|
+
<circle cx="12" cy="7" r="4"></circle>
|
|
176
|
+
</svg>
|
|
177
|
+
<span class="mobile-bottom-nav__label">Account</span>
|
|
178
|
+
</button>
|
|
179
|
+
{% endif %}
|
|
180
|
+
<button type="button" class="mobile-bottom-nav__item mobile-bottom-nav__item--cart" data-nav-item="cart" data-cart-toggle aria-label="Shopping cart">
|
|
181
|
+
<svg class="mobile-bottom-nav__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
182
|
+
<circle cx="9" cy="21" r="1"></circle>
|
|
183
|
+
<circle cx="20" cy="21" r="1"></circle>
|
|
184
|
+
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
|
185
|
+
</svg>
|
|
186
|
+
<span class="mobile-bottom-nav__label">Cart</span>
|
|
187
|
+
<span class="mobile-bottom-nav__badge" data-cart-count>{{ cart.itemCount | default: 0 }}</span>
|
|
188
|
+
</button>
|
|
189
|
+
</nav>
|
|
190
|
+
|
|
191
|
+
<!-- Plugin hooks for body end -->
|
|
192
|
+
{% hook 'theme_body_end' %}
|
|
193
|
+
</body>
|
|
194
|
+
</html>
|
|
195
|
+
|