zz-shopify-components 0.4.0 → 0.6.0
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/package.json +1 -1
- package/sections/zz-header-edu.liquid +307 -0
package/package.json
CHANGED
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
{% schema %}
|
|
2
|
+
{
|
|
3
|
+
"name": "ZZ Header Edu",
|
|
4
|
+
"limit": 1,
|
|
5
|
+
"settings": [
|
|
6
|
+
{
|
|
7
|
+
"type": "header",
|
|
8
|
+
"content": "Display Text"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"type": "text",
|
|
12
|
+
"id": "edu_header_text",
|
|
13
|
+
"label": "Edu Header Text",
|
|
14
|
+
"default": "Education Store Page"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"type": "text",
|
|
18
|
+
"id": "edu_header_exit_text",
|
|
19
|
+
"label": "Edu Header Exit Text",
|
|
20
|
+
"default": "Exit"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"type": "text",
|
|
24
|
+
"id": "edu_header_verified_text",
|
|
25
|
+
"label": "Edu Header Verified Text",
|
|
26
|
+
"default": "Verified"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"type": "text",
|
|
30
|
+
"id": "edu_header_verify_now_text",
|
|
31
|
+
"label": "Edu Header Verify Now Text",
|
|
32
|
+
"default": "Verify Now"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"type": "text",
|
|
36
|
+
"id": "edu_header_not_logged_in_text",
|
|
37
|
+
"label": "Edu Header Not Logged In Text",
|
|
38
|
+
"default": "Not Logged In"
|
|
39
|
+
}
|
|
40
|
+
],
|
|
41
|
+
"blocks": [
|
|
42
|
+
{
|
|
43
|
+
"type": "zz-edu-form"
|
|
44
|
+
}
|
|
45
|
+
],
|
|
46
|
+
"presets": [
|
|
47
|
+
{
|
|
48
|
+
"name": "ZZ Header Edu",
|
|
49
|
+
"blocks": [
|
|
50
|
+
{
|
|
51
|
+
"type": "zz-edu-form"
|
|
52
|
+
}
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
{% endschema %}
|
|
58
|
+
|
|
59
|
+
{% comment %} 判断是否需要展示教育优惠顶部条{% endcomment %}
|
|
60
|
+
{% comment %} Pages {% endcomment %}
|
|
61
|
+
{% assign is_edu_page = false %}
|
|
62
|
+
{% if shop.metafields.custom.edu_home_page != blank
|
|
63
|
+
and shop.metafields.custom.edu_home_page.value.id == page.id
|
|
64
|
+
%}
|
|
65
|
+
{% assign is_edu_page = true %}
|
|
66
|
+
{% endif %}
|
|
67
|
+
|
|
68
|
+
{% assign is_edu_collection = false %}
|
|
69
|
+
{% if shop.metafields.custom.edu_collection_page != blank
|
|
70
|
+
and collection != blank
|
|
71
|
+
%}
|
|
72
|
+
{% if shop.metafields.custom.edu_collection_page.value.id == collection.id %}
|
|
73
|
+
{% assign is_edu_collection = true %}
|
|
74
|
+
{% endif %}
|
|
75
|
+
{% endif %}
|
|
76
|
+
|
|
77
|
+
{% comment %} Products {% endcomment %}
|
|
78
|
+
{% assign is_edu_product = false %}
|
|
79
|
+
{% if product.tags contains 'edu-product' %}
|
|
80
|
+
{% assign is_edu_product = true %}
|
|
81
|
+
{% endif %}
|
|
82
|
+
|
|
83
|
+
{% assign show_header_edu = false %}
|
|
84
|
+
{% if is_edu_page or is_edu_collection or is_edu_product %}
|
|
85
|
+
{% assign show_header_edu = true %}
|
|
86
|
+
{% endif %}
|
|
87
|
+
|
|
88
|
+
{% comment %} End of 判断是否需要展示教育优惠顶部条 {% endcomment %}
|
|
89
|
+
|
|
90
|
+
{% assign is_logged_in = false %}
|
|
91
|
+
{% assign is_edu_verified = false %}
|
|
92
|
+
{% if customer %}
|
|
93
|
+
{% assign is_logged_in = true %}
|
|
94
|
+
{% if customer.tags contains 'edu-verified' %}
|
|
95
|
+
{% assign is_edu_verified = true %}
|
|
96
|
+
{% endif %}
|
|
97
|
+
{% endif %}
|
|
98
|
+
|
|
99
|
+
{% if show_header_edu %}
|
|
100
|
+
<div class=' tw-max-w-[1660px] lg:tw-px-[20px] tw-w-full tw-mx-auto tw-h-full tw-flex tw-items-center tw-justify-left'>
|
|
101
|
+
<span class='tw-cursor-default'
|
|
102
|
+
><a href='{{ shop.metafields.custom.edu_home_page.value.url }}'>
|
|
103
|
+
{{- section.settings.edu_header_text -}}
|
|
104
|
+
</a></span
|
|
105
|
+
>
|
|
106
|
+
<span class='tw-mx-[6px]'>
|
|
107
|
+
<svg
|
|
108
|
+
width='15'
|
|
109
|
+
height='15'
|
|
110
|
+
viewBox='0 0 15 15'
|
|
111
|
+
fill='none'
|
|
112
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
113
|
+
>
|
|
114
|
+
<path d="M7.5 2C7.77614 2 8 2.22386 8 2.5L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 2.5C7 2.22386 7.22386 2 7.5 2Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
|
|
115
|
+
</svg>
|
|
116
|
+
</span>
|
|
117
|
+
<div class='tw-flex tw-items-center tw-gap-4'>
|
|
118
|
+
<a href='{{ routes.root_url }}'>
|
|
119
|
+
{{- section.settings.edu_header_exit_text -}}
|
|
120
|
+
</a>
|
|
121
|
+
{% if is_logged_in %}
|
|
122
|
+
{% if is_edu_verified %}
|
|
123
|
+
<span>{{ section.settings.edu_header_verified_text }}</span>
|
|
124
|
+
{% else %}
|
|
125
|
+
<button id='edu-header-verify-now-btn'>
|
|
126
|
+
{{ section.settings.edu_header_verify_now_text }}
|
|
127
|
+
</button>
|
|
128
|
+
{% endif %}
|
|
129
|
+
{% else %}
|
|
130
|
+
<a
|
|
131
|
+
id='edu-login-link'
|
|
132
|
+
href='{{ routes.account_login_url }}?return_to={{ request.path }}'
|
|
133
|
+
>
|
|
134
|
+
{{- section.settings.edu_header_not_logged_in_text -}}
|
|
135
|
+
</a>
|
|
136
|
+
{% endif %}
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<dialog
|
|
140
|
+
id='edu-header-verify-now-dialog'
|
|
141
|
+
class='custom-modal-dialog tw-rounded-[1.6rem]'
|
|
142
|
+
data-modal-backdrop='close'
|
|
143
|
+
>
|
|
144
|
+
<button class='visually-hidden' autofocus></button>
|
|
145
|
+
<div class='tw-rounded-t-[1.6rem] tw-overflow-x-hidden lg:tw-rounded-[24px] tw-bg-white lg:tw-max-w-[780px] tw-p-0 tw-flex tw-flex-col tw-w-full tw-max-h-full'>
|
|
146
|
+
<div class='tw-w-full tw-flex tw-justify-end tw-items-center tw-p-6'>
|
|
147
|
+
<button
|
|
148
|
+
id='edu-header-verify-now-close-btn'
|
|
149
|
+
tabindex='-1'
|
|
150
|
+
class='tw-w-[36px] tw-h-[36px] tw-rounded-full tw-inline-flex tw-items-center tw-justify-center tw-bg-black/[.08] hover:tw-bg-black/15'
|
|
151
|
+
>
|
|
152
|
+
<svg
|
|
153
|
+
class='tw-w-[20px] tw-h-[20px]'
|
|
154
|
+
viewBox='0 0 20 20'
|
|
155
|
+
fill='none'
|
|
156
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
157
|
+
>
|
|
158
|
+
<path d="M5.0625 15.4997L16.0619 4.50026" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
|
|
159
|
+
<path d="M5.0625 4.50031L16.0619 15.4997" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
|
|
160
|
+
</svg>
|
|
161
|
+
</button>
|
|
162
|
+
</div>
|
|
163
|
+
<div class='tw-overflow-y-auto tw-sticky'>
|
|
164
|
+
<div class='tw-relative tw-pt-[20px] tw-mb-[30px] tw-mx-[6%] tw-flex tw-flex-col tw-items-start'>
|
|
165
|
+
{% for block in section.blocks %}
|
|
166
|
+
{% render block %}
|
|
167
|
+
{% endfor %}
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</dialog>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<script>
|
|
175
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
176
|
+
const dialog = document.getElementById('edu-header-verify-now-dialog');
|
|
177
|
+
|
|
178
|
+
const eduHeaderVerifyNowBtn = document.getElementById(
|
|
179
|
+
'edu-header-verify-now-btn'
|
|
180
|
+
);
|
|
181
|
+
const eduHeaderVerifyNowCloseBtn = document.getElementById(
|
|
182
|
+
'edu-header-verify-now-close-btn'
|
|
183
|
+
);
|
|
184
|
+
if (eduHeaderVerifyNowBtn) {
|
|
185
|
+
eduHeaderVerifyNowBtn.addEventListener('click', () => {
|
|
186
|
+
dialog.showModal();
|
|
187
|
+
dialog.addEventListener('close', () => {
|
|
188
|
+
console.log('close');
|
|
189
|
+
});
|
|
190
|
+
});
|
|
191
|
+
|
|
192
|
+
if (eduHeaderVerifyNowCloseBtn) {
|
|
193
|
+
eduHeaderVerifyNowCloseBtn.addEventListener('click', () => {
|
|
194
|
+
dialog.close();
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
// Ensure login link's return_to includes query string and hash
|
|
200
|
+
const eduLoginLink = document.getElementById('edu-login-link');
|
|
201
|
+
if (eduLoginLink) {
|
|
202
|
+
try {
|
|
203
|
+
const fullPath =
|
|
204
|
+
window.location.pathname +
|
|
205
|
+
window.location.search +
|
|
206
|
+
window.location.hash;
|
|
207
|
+
const baseLogin = '{{ routes.account_login_url }}';
|
|
208
|
+
eduLoginLink.href =
|
|
209
|
+
baseLogin + '?return_to=' + encodeURIComponent(fullPath);
|
|
210
|
+
} catch (e) {}
|
|
211
|
+
}
|
|
212
|
+
});
|
|
213
|
+
</script>
|
|
214
|
+
<style>
|
|
215
|
+
#shopify-section-{{ section.id }} {
|
|
216
|
+
position: sticky;
|
|
217
|
+
top: 0;
|
|
218
|
+
z-index: 500;
|
|
219
|
+
|
|
220
|
+
background-color: #F5F5F7;
|
|
221
|
+
height: 48px;
|
|
222
|
+
width: 100%;
|
|
223
|
+
padding: 0 16px;
|
|
224
|
+
font-size: 12px;
|
|
225
|
+
font-weight: 500;
|
|
226
|
+
color: rgba(0, 0, 0, 0.7);
|
|
227
|
+
display: flex;
|
|
228
|
+
align-items: center;
|
|
229
|
+
justify-content: start;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
#shopify-section-{{ section.id }} .edu-header {
|
|
233
|
+
display: flex;
|
|
234
|
+
align-items: center;
|
|
235
|
+
justify-content: start;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
@media (min-width: 768px) {
|
|
239
|
+
#shopify-section-{{ section.id }} {
|
|
240
|
+
height: 56px;
|
|
241
|
+
padding: 0 20px;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
#shopify-section-{{ section.id }} dialog[open] {
|
|
246
|
+
pointer-events: auto;
|
|
247
|
+
visibility: visible;
|
|
248
|
+
opacity: 1;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
#shopify-section-{{ section.id }} dialog::backdrop {
|
|
252
|
+
background-color: rgba(0, 0, 0, 0);
|
|
253
|
+
/* transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); */
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
#shopify-section-{{ section.id }} dialog[open]::backdrop {
|
|
257
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
/* Version Dialog Modal Styles */
|
|
261
|
+
@media (max-width: 768px) {
|
|
262
|
+
#shopify-section-{{ section.id }} dialog {
|
|
263
|
+
pointer-events: none;
|
|
264
|
+
position: fixed;
|
|
265
|
+
top: 0;
|
|
266
|
+
right: 0;
|
|
267
|
+
bottom: 0;
|
|
268
|
+
left: 0;
|
|
269
|
+
margin: 0;
|
|
270
|
+
display: grid;
|
|
271
|
+
height: 100%;
|
|
272
|
+
max-height: none;
|
|
273
|
+
width: 100%;
|
|
274
|
+
max-width: none;
|
|
275
|
+
justify-items: center;
|
|
276
|
+
padding: 0;
|
|
277
|
+
opacity: 0;
|
|
278
|
+
overscroll-behavior: contain;
|
|
279
|
+
z-index: 999;
|
|
280
|
+
background-color: transparent;
|
|
281
|
+
color: inherit;
|
|
282
|
+
overflow-y: hidden;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
#shopify-section-{{ section.id }} dialog {
|
|
286
|
+
top: auto;
|
|
287
|
+
margin: 0;
|
|
288
|
+
padding: 0;
|
|
289
|
+
height: calc(100vh - 10%);
|
|
290
|
+
max-height: calc(100vh - 10%);
|
|
291
|
+
width: 100vw;
|
|
292
|
+
max-width: 100vw;
|
|
293
|
+
align-items: flex-end;
|
|
294
|
+
display: flex;
|
|
295
|
+
|
|
296
|
+
border-bottom-right-radius: 0;
|
|
297
|
+
border-bottom-left-radius: 0;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
#shopify-section-{{ section.id }} dialog[open] .tw-daisy-modal-box {
|
|
301
|
+
transform: translateY(0);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
|
|
305
|
+
}
|
|
306
|
+
</style>
|
|
307
|
+
{% endif %}
|