zz-shopify-components 0.5.0 → 0.6.1-beta.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/assets/zz-modal.js
CHANGED
|
@@ -107,15 +107,25 @@
|
|
|
107
107
|
all: unset;
|
|
108
108
|
cursor: pointer;
|
|
109
109
|
position: absolute;
|
|
110
|
-
top:
|
|
111
|
-
right:
|
|
110
|
+
top: 20px;
|
|
111
|
+
right: 20px;
|
|
112
112
|
width: 32px;
|
|
113
113
|
height: 32px;
|
|
114
114
|
border-radius: 9999px;
|
|
115
115
|
display: grid;
|
|
116
116
|
place-items: center;
|
|
117
117
|
}
|
|
118
|
-
.close-btn
|
|
118
|
+
.close-btn-white {
|
|
119
|
+
color: white;
|
|
120
|
+
background-color: rgba(0,0,0,0.08);
|
|
121
|
+
backdrop-filter: blur(10px);
|
|
122
|
+
}
|
|
123
|
+
.close-btn-black {
|
|
124
|
+
color: white;
|
|
125
|
+
background-color: #333333;
|
|
126
|
+
/* backdrop-filter: blur(10px); */
|
|
127
|
+
}
|
|
128
|
+
.close-btn:focus-visible { outline: none; }
|
|
119
129
|
`;
|
|
120
130
|
|
|
121
131
|
const TEMPLATE = document.createElement('template');
|
|
@@ -151,6 +161,11 @@
|
|
|
151
161
|
style.textContent = STYLE_TEXT;
|
|
152
162
|
shadow.appendChild(style);
|
|
153
163
|
shadow.appendChild(TEMPLATE.content.cloneNode(true));
|
|
164
|
+
const closeBtnColor = this.getAttribute('close-btn-color');
|
|
165
|
+
if (closeBtnColor) {
|
|
166
|
+
const closeBtn = shadow.querySelector('.close-btn');
|
|
167
|
+
closeBtn.classList.add(closeBtnColor);
|
|
168
|
+
}
|
|
154
169
|
|
|
155
170
|
this._dialog = shadow.querySelector('dialog');
|
|
156
171
|
this._panel = shadow.querySelector('.panel-inner');
|
|
@@ -100,17 +100,6 @@
|
|
|
100
100
|
"default": "#000000",
|
|
101
101
|
"label": "标题颜色"
|
|
102
102
|
},
|
|
103
|
-
{
|
|
104
|
-
"type": "richtext",
|
|
105
|
-
"id": "slide_content",
|
|
106
|
-
"label": "内容"
|
|
107
|
-
},
|
|
108
|
-
{
|
|
109
|
-
"type": "color",
|
|
110
|
-
"id": "slide_content_color",
|
|
111
|
-
"default": "#170B01",
|
|
112
|
-
"label": "内容颜色"
|
|
113
|
-
},
|
|
114
103
|
{
|
|
115
104
|
"type": "text",
|
|
116
105
|
"id": "btn_text",
|
|
@@ -320,7 +320,13 @@
|
|
|
320
320
|
isValid = false;
|
|
321
321
|
} else {
|
|
322
322
|
fileInput.classList.remove('error');
|
|
323
|
+
if(!identityDocumentUrl) {
|
|
324
|
+
// 文件还在上传中，请等待文件上传成功
|
|
325
|
+
zzShowToast('File is still uploading, please wait for the file to be uploaded successfully')
|
|
326
|
+
return
|
|
327
|
+
}
|
|
323
328
|
}
|
|
329
|
+
|
|
324
330
|
}
|
|
325
331
|
|
|
326
332
|
|
|
@@ -456,7 +462,8 @@
|
|
|
456
462
|
// 显示文件预览
|
|
457
463
|
showFilePreview(file);
|
|
458
464
|
const fileName = await getFileMD5Name(file);
|
|
459
|
-
|
|
465
|
+
const fileUploadLoading = block.querySelector('.zz-edu-form-file-upload-loading')
|
|
466
|
+
fileUploadLoading.classList.remove('tw-hidden')
|
|
460
467
|
|
|
461
468
|
httpRequest
|
|
462
469
|
.get(
|
|
@@ -477,26 +484,31 @@
|
|
|
477
484
|
stsToken: data.SecurityToken,
|
|
478
485
|
});
|
|
479
486
|
const result = await client.put(fileName || file.name, file);
|
|
480
|
-
console.log('result---------', result)
|
|
487
|
+
console.log('upload result---------', result)
|
|
481
488
|
if(result.url) {
|
|
482
489
|
identityDocumentUrl = result.url
|
|
490
|
+
fileUploadLoading.classList.add('tw-hidden')
|
|
483
491
|
} else {
|
|
484
492
|
removeEduVerifyFile()
|
|
493
|
+
fileUploadLoading.classList.add('tw-hidden')
|
|
485
494
|
zzShowToast('File upload failed, please try again.')
|
|
486
495
|
}
|
|
487
496
|
|
|
488
497
|
} catch (error) {
|
|
489
498
|
removeEduVerifyFile()
|
|
499
|
+
fileUploadLoading.classList.add('tw-hidden')
|
|
490
500
|
zzShowToast('File upload failed, please try again.')
|
|
491
501
|
}
|
|
492
502
|
|
|
493
503
|
} else {
|
|
494
504
|
removeEduVerifyFile()
|
|
505
|
+
fileUploadLoading.classList.add('tw-hidden')
|
|
495
506
|
zzShowToast('File upload failed, please try again.')
|
|
496
507
|
}
|
|
497
508
|
|
|
498
509
|
}).catch((err) => {
|
|
499
510
|
zzShowToast(EduErrorCodeConf[500].en)
|
|
511
|
+
fileUploadLoading.classList.add('tw-hidden')
|
|
500
512
|
removeEduVerifyFile()
|
|
501
513
|
});
|
|
502
514
|
}
|
|
@@ -534,6 +546,7 @@
|
|
|
534
546
|
<span class="zz-edu-form-file-name">${fileName}</span>
|
|
535
547
|
<span class="zz-edu-form-file-size">${fileSize} MB</span>
|
|
536
548
|
</div>
|
|
549
|
+
<span class='zz-edu-form-file-upload-loading tw-hidden tw-daisy-loading tw-daisy-loading-spinner ' ></span>
|
|
537
550
|
<div class="zz-edu-form-file-remove-btn" onclick="removeEduVerifyFile{{ block.id }}()">
|
|
538
551
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
539
552
|
<circle cx="12" cy="12" r="12" fill="#DD3B46"/>
|
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 %}
|
package/sections/zz-modal.liquid
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
}
|
|
16
16
|
</style>
|
|
17
17
|
|
|
18
|
-
<zz-modal {% if section.settings.sheet_on_mobile %} sheet-on-mobile {% endif %} {% if section.settings.no_backdrop_close %} no-backdrop-close {% endif %} id="{{ section.settings.modal_id }}"{% unless section.settings.show_header %} no-header{% endunless %}{% unless section.settings.show_footer %} no-footer{% endunless %}>
|
|
18
|
+
<zz-modal close-btn-color="close-btn-{{ section.settings.close_btn_color }}" {% if section.settings.sheet_on_mobile %} sheet-on-mobile {% endif %} {% if section.settings.no_backdrop_close %} no-backdrop-close {% endif %} id="{{ section.settings.modal_id }}"{% unless section.settings.show_header %} no-header{% endunless %}{% unless section.settings.show_footer %} no-footer{% endunless %}>
|
|
19
19
|
{% if section.settings.show_header %}
|
|
20
20
|
<div slot="header" class="tw-text-[24px] tw-font-semibold">{{ section.settings.header_text }}</div>
|
|
21
21
|
{% endif %}
|
|
@@ -49,6 +49,16 @@
|
|
|
49
49
|
"id": "modal_id",
|
|
50
50
|
"label": "弹窗id （必填）",
|
|
51
51
|
"default": "demo-modal"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"type": "select",
|
|
55
|
+
"id": "close_btn_color",
|
|
56
|
+
"label": "关闭按钮颜色",
|
|
57
|
+
"default": "white",
|
|
58
|
+
"options": [
|
|
59
|
+
{ "value": "white", "label": "白色" },
|
|
60
|
+
{ "value": "black", "label": "黑色" }
|
|
61
|
+
],
|
|
52
62
|
},
|
|
53
63
|
{
|
|
54
64
|
"type": "checkbox",
|