zz-shopify-components 0.17.1-beta.2 → 0.18.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-components.js +29 -1
- package/blocks/zz-bundle-box.liquid +149 -0
- package/blocks/zz-content-description.liquid +42 -15
- package/blocks/zz-flex-layout-bg-block.liquid +50 -3
- package/blocks/zz-flex-layout-block.liquid +1 -1
- package/blocks/zz-title-comment-item.liquid +44 -0
- package/blocks/zz-title-comment.liquid +480 -0
- package/package.json +1 -1
- package/sections/zz-FAQ.liquid +244 -0
- package/sections/zz-swiper-gallery.liquid +50 -0
- package/sections/zz-video-collapse-swiper.liquid +235 -189
package/assets/zz-components.js
CHANGED
|
@@ -418,4 +418,32 @@ if (!customElements.get('zz-video-popup')) {
|
|
|
418
418
|
}
|
|
419
419
|
window.zzLockBodyScroll = lockBodyScroll;
|
|
420
420
|
window.zzUnlockBodyScroll = unlockBodyScroll;
|
|
421
|
-
})();
|
|
421
|
+
})();
|
|
422
|
+
|
|
423
|
+
/**获取当前显示的媒体元素 */
|
|
424
|
+
function getVisibleDisplayMedias(container) {
|
|
425
|
+
const videos = container.querySelectorAll('video');
|
|
426
|
+
const video = Array.from(videos).find((video) => {
|
|
427
|
+
const style = window.getComputedStyle(video);
|
|
428
|
+
return style.display !== 'none';
|
|
429
|
+
});
|
|
430
|
+
if (video) {
|
|
431
|
+
return {
|
|
432
|
+
video,
|
|
433
|
+
type: 'video',
|
|
434
|
+
};
|
|
435
|
+
} else {
|
|
436
|
+
const images = container.querySelectorAll('img');
|
|
437
|
+
const image = Array.from(images).find((image) => {
|
|
438
|
+
const style = window.getComputedStyle(image);
|
|
439
|
+
return style.display !== 'none';
|
|
440
|
+
});
|
|
441
|
+
if (image) {
|
|
442
|
+
return {
|
|
443
|
+
image,
|
|
444
|
+
type: 'image',
|
|
445
|
+
};
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
return null;
|
|
449
|
+
}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
{% schema %}
|
|
2
|
+
{
|
|
3
|
+
"name": "bundle box card",
|
|
4
|
+
"class": "zz-bundle-box-card",
|
|
5
|
+
"settings": [
|
|
6
|
+
{
|
|
7
|
+
"type": "color",
|
|
8
|
+
"id": "bg_color",
|
|
9
|
+
"label": "背景颜色",
|
|
10
|
+
"default": "#000000"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"type": "text",
|
|
14
|
+
"id": "heading",
|
|
15
|
+
"label": "小卡片标题"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"type": "text",
|
|
19
|
+
"id": "cardDesc",
|
|
20
|
+
"label": "小卡片描述"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"type": "color",
|
|
24
|
+
"id": "text_color",
|
|
25
|
+
"label": "Text Color",
|
|
26
|
+
"default": "#ffffff"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"type": "image_picker",
|
|
30
|
+
"id": "bgImage",
|
|
31
|
+
"label": "小卡片顶部背景图"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"type": "image_picker",
|
|
35
|
+
"id": "smallcardImage",
|
|
36
|
+
"label": "产品描述图片"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"type": "richtext",
|
|
40
|
+
"id": "smallcardDesc",
|
|
41
|
+
"label": "产品描述"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"type": "range",
|
|
45
|
+
"id": "pc_width",
|
|
46
|
+
"min": 0,
|
|
47
|
+
"max": 100,
|
|
48
|
+
"step": 1,
|
|
49
|
+
"unit": "%",
|
|
50
|
+
"label": "PC端占父容器的百分比，单位%",
|
|
51
|
+
"info": "0 默认flex-1",
|
|
52
|
+
"default": 50
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"type": "range",
|
|
56
|
+
"id": "mobile_width",
|
|
57
|
+
"min": 0,
|
|
58
|
+
"max": 100,
|
|
59
|
+
"step": 1,
|
|
60
|
+
"unit": "%",
|
|
61
|
+
"label": "移动端占父容器的百分比，单位%",
|
|
62
|
+
"info": "0 默认flex-1",
|
|
63
|
+
"default": 100
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
|
|
67
|
+
"presets": [
|
|
68
|
+
{
|
|
69
|
+
"name": "bundle box card"
|
|
70
|
+
}
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
{% endschema %}
|
|
74
|
+
|
|
75
|
+
{% assign content_color = block.settings.text_color
|
|
76
|
+
| color_modify: 'alpha', 0.7
|
|
77
|
+
%}
|
|
78
|
+
<div class='bundle-card-item lg:tw-rounded-[16px]
|
|
79
|
+
tw-w-full tw-h-auto max-lg:tw-rounded-[10px]'
|
|
80
|
+
style="background-color: {{ block.settings.bg_color }};">
|
|
81
|
+
<div
|
|
82
|
+
class='bundle-card-top tw-w-full tw-bg-cover tw-bg-center tw-flex tw-flex-col tw-items-center lg:tw-pt-[8.3%] lg:tw-rounded-t-[16px]
|
|
83
|
+
max-lg:tw-rounded-t-[10px] max-lg:tw-pt-[7.2%]'
|
|
84
|
+
style='background-image: url({{ block.settings.bgImage | image_url }})'
|
|
85
|
+
>
|
|
86
|
+
<h3 class='tw-font-bold tw-text-[3.2rem] max-md:tw-text-[2rem] tw-mb-1' style="color:{{ block.settings.text_color }};">
|
|
87
|
+
{{ block.settings.heading }}
|
|
88
|
+
</h3>
|
|
89
|
+
<p class='tw-font-medium tw-text-[1.6rem] tw-mt-0 max-md:tw-text-[1.1rem]' style="color:{{ block.settings.text_color }};">
|
|
90
|
+
{{ block.settings.cardDesc }}
|
|
91
|
+
</p>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div class='bundle-card-bottom tw-w-full lg:tw-h-[282px] tw-flex tw-items-center lg:tw-px-[30px] max-lg:tw-py-[12px] max-lg:tw-px-[16px]'>
|
|
95
|
+
|
|
96
|
+
<div class='tw-w-[40.6%] tw-h-auto lg:tw-mr-[30px] max-lg:tw-mr-[16px]'>
|
|
97
|
+
{{
|
|
98
|
+
block.settings.smallcardImage
|
|
99
|
+
| image_url: width: 500
|
|
100
|
+
| image_tag:
|
|
101
|
+
class: 'tw-w-full tw-aspect-[1/1]'
|
|
102
|
+
}}
|
|
103
|
+
</div>
|
|
104
|
+
{% assign text = block.settings.smallcardDesc %}
|
|
105
|
+
<div class='lg:tw-text-[12px] max-lg:tw-text-[10px] tw-font-normal tw-text-left tw-whitespace-pre-wrap tw-leading-[1.8] max-lg:tw-leading-[1.5]'
|
|
106
|
+
style="color:{{ content_color }};">
|
|
107
|
+
{{- text | strip -}}
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<style>
|
|
114
|
+
#shopify-block-{{block.id}} .bundle-card-top {
|
|
115
|
+
width: 100%;
|
|
116
|
+
aspect-ratio: 23 / 10;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
#shopify-block-{{block.id}} .bundle-card-bottom {
|
|
120
|
+
width: 100%;
|
|
121
|
+
margin-top: -16.3%;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
@media screen and (max-width: 1024px) {
|
|
126
|
+
#shopify-block-{{block.id}} {
|
|
127
|
+
{% if block.settings.mobile_width == 0 %}
|
|
128
|
+
width: 100%;
|
|
129
|
+
flex: 1;
|
|
130
|
+
{% else %}
|
|
131
|
+
width: {{ block.settings.mobile_width }}%;
|
|
132
|
+
{% endif %}
|
|
133
|
+
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
}
|
|
137
|
+
@media screen and (min-width: 1024px) {
|
|
138
|
+
#shopify-block-{{block.id}} {
|
|
139
|
+
{% if block.settings.pc_width == 0 %}
|
|
140
|
+
flex: 1;
|
|
141
|
+
{% else %}
|
|
142
|
+
width: {{ block.settings.pc_width }}%;
|
|
143
|
+
{% endif %}
|
|
144
|
+
}
|
|
145
|
+
#shopify-block-{{block.id}} .bundle-card-bottom {
|
|
146
|
+
height: 282px
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
</style>
|
|
@@ -8,6 +8,30 @@
|
|
|
8
8
|
"id": "text_color",
|
|
9
9
|
"label": "Text Color",
|
|
10
10
|
"default": "#000000"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"type": "select",
|
|
14
|
+
"id": "font_weight",
|
|
15
|
+
"label": "Font Weight",
|
|
16
|
+
"options": [
|
|
17
|
+
{
|
|
18
|
+
"value": "400",
|
|
19
|
+
"label": "Regular"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"value": "500",
|
|
23
|
+
"label": "Medium"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"value": "600",
|
|
27
|
+
"label": "Semi Bold"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"value": "700",
|
|
31
|
+
"label": "Bold"
|
|
32
|
+
}
|
|
33
|
+
],
|
|
34
|
+
"default": "400"
|
|
11
35
|
},
|
|
12
36
|
{
|
|
13
37
|
"type": "header",
|
|
@@ -109,6 +133,12 @@
|
|
|
109
133
|
],
|
|
110
134
|
"default": "left"
|
|
111
135
|
},
|
|
136
|
+
{
|
|
137
|
+
"type": "text",
|
|
138
|
+
"id": "alpha_value",
|
|
139
|
+
"label": "文字透明度 (%)",
|
|
140
|
+
"info": "0.1~1"
|
|
141
|
+
},
|
|
112
142
|
{
|
|
113
143
|
"type": "color",
|
|
114
144
|
"id": "blod_text_color",
|
|
@@ -125,19 +155,6 @@
|
|
|
125
155
|
|
|
126
156
|
},
|
|
127
157
|
|
|
128
|
-
{
|
|
129
|
-
"type": "select",
|
|
130
|
-
"id": "animation",
|
|
131
|
-
"label": "动画",
|
|
132
|
-
"options": [
|
|
133
|
-
{ "value": "none-animation", "label": "无动画" },
|
|
134
|
-
{ "value": "fade-in-content", "label": "从下往上显示" },
|
|
135
|
-
{ "value": "fade-in-from-left-content", "label": "从左往右显示" },
|
|
136
|
-
{ "value": "fade-in-from-right-content", "label": "从右往左显示" },
|
|
137
|
-
{ "value": "slow-reveal-content", "label": "跟随页面滚动缓慢显示" }
|
|
138
|
-
],
|
|
139
|
-
"default": "none-animation"
|
|
140
|
-
},
|
|
141
158
|
{
|
|
142
159
|
"type": "checkbox",
|
|
143
160
|
"id": "use_margin",
|
|
@@ -199,11 +216,11 @@
|
|
|
199
216
|
text_color: block.settings.text_color,
|
|
200
217
|
pc_font_size: block.settings.pc_font_size,
|
|
201
218
|
mobile_font_size: block.settings.mobile_font_size,
|
|
219
|
+
font_weight: block.settings.font_weight,
|
|
202
220
|
pc_text_align: block.settings.pc_text_align,
|
|
203
221
|
mobile_text_align: block.settings.mobile_text_align,
|
|
204
222
|
pc_font_line_height: block.settings.pc_font_line_height,
|
|
205
223
|
mobile_font_line_height: block.settings.mobile_font_line_height,
|
|
206
|
-
class_name: block.settings.animation
|
|
207
224
|
%}
|
|
208
225
|
|
|
209
226
|
|
|
@@ -224,6 +241,16 @@
|
|
|
224
241
|
font-weight: bold !important;
|
|
225
242
|
{% endif %}
|
|
226
243
|
}
|
|
227
|
-
|
|
244
|
+
{% if block.settings.alpha_value != blank %}
|
|
245
|
+
{% assign alpha = block.settings.alpha_value | plus: 0 %}
|
|
246
|
+
{% assign content_color = block.settings.text_color
|
|
247
|
+
| color_modify: 'alpha', alpha
|
|
248
|
+
%}
|
|
249
|
+
|
|
250
|
+
#shopify-block-{{ block.id }} .content-text {
|
|
251
|
+
color: {{ content_color }} !important;
|
|
252
|
+
}
|
|
253
|
+
{% endif %}
|
|
254
|
+
|
|
228
255
|
</style>
|
|
229
256
|
|
|
@@ -159,6 +159,13 @@
|
|
|
159
159
|
"info": "非全屏展示时有效",
|
|
160
160
|
"visible_if": "{{ block.settings.pc_full_width == false }}"
|
|
161
161
|
},
|
|
162
|
+
{
|
|
163
|
+
"type": "number",
|
|
164
|
+
"id": "pc_padding_x",
|
|
165
|
+
"label": "PC端左右内边距",
|
|
166
|
+
"default": 0,
|
|
167
|
+
"info": "单位：px"
|
|
168
|
+
},
|
|
162
169
|
{
|
|
163
170
|
"type": "number",
|
|
164
171
|
"id": "pc_fixed_height",
|
|
@@ -173,6 +180,16 @@
|
|
|
173
180
|
"default": 0,
|
|
174
181
|
"info": "默认自适应高度，单位：px",
|
|
175
182
|
},
|
|
183
|
+
{
|
|
184
|
+
"type": "range",
|
|
185
|
+
"id": "pc_border_radius",
|
|
186
|
+
"min": 0,
|
|
187
|
+
"max": 50,
|
|
188
|
+
"step": 1,
|
|
189
|
+
"unit": "px",
|
|
190
|
+
"label": "PC端圆角大小",
|
|
191
|
+
"default": 0
|
|
192
|
+
},
|
|
176
193
|
{
|
|
177
194
|
"type": "header",
|
|
178
195
|
"content": "📱 移动端布局设置"
|
|
@@ -239,6 +256,16 @@
|
|
|
239
256
|
"label": "移动端底部内边距 (px)",
|
|
240
257
|
"default": 0
|
|
241
258
|
},
|
|
259
|
+
{
|
|
260
|
+
"type": "range",
|
|
261
|
+
"id": "mobile_border_radius",
|
|
262
|
+
"min": 0,
|
|
263
|
+
"max": 50,
|
|
264
|
+
"step": 1,
|
|
265
|
+
"unit": "px",
|
|
266
|
+
"label": "移动端圆角大小",
|
|
267
|
+
"default": 0
|
|
268
|
+
},
|
|
242
269
|
{
|
|
243
270
|
"type": "header",
|
|
244
271
|
"content": "动画设置"
|
|
@@ -448,11 +475,22 @@
|
|
|
448
475
|
padding-bottom: {{ block.settings.mobile_padding_bottom }}px;
|
|
449
476
|
padding-left: {{ block.settings.mobile_padding_x }}px;
|
|
450
477
|
padding-right: {{ block.settings.mobile_padding_x }}px;
|
|
478
|
+
border-radius: {{ block.settings.mobile_border_radius }}px;
|
|
451
479
|
{% if block.settings.has_link %}
|
|
452
480
|
cursor: pointer;
|
|
453
481
|
{% endif %}
|
|
454
482
|
}
|
|
455
483
|
|
|
484
|
+
{% if block.settings.mobile_border_radius != 0 %}
|
|
485
|
+
#shopify-block-{{ block.id }} .flex-layout-image {
|
|
486
|
+
border-radius: {{ block.settings.mobile_border_radius }}px;
|
|
487
|
+
}
|
|
488
|
+
#shopify-block-{{ block.id }} .flex-layout-video {
|
|
489
|
+
border-radius: {{ block.settings.mobile_border_radius }}px;
|
|
490
|
+
}
|
|
491
|
+
{% endif %}
|
|
492
|
+
|
|
493
|
+
|
|
456
494
|
@media (min-width: 1024px) {
|
|
457
495
|
#shopify-block-{{ block.id }} .bg-responsive-block-layout {
|
|
458
496
|
flex-direction: {{ block.settings.pc_direction }};
|
|
@@ -461,9 +499,9 @@
|
|
|
461
499
|
gap: {{ block.settings.pc_gap }}px;
|
|
462
500
|
padding-top: {{ block.settings.pc_padding_top }}px;
|
|
463
501
|
padding-bottom: {{ block.settings.pc_padding_bottom }}px;
|
|
464
|
-
padding-left:
|
|
465
|
-
padding-right:
|
|
466
|
-
|
|
502
|
+
padding-left: {{ block.settings.pc_padding_x }}px;
|
|
503
|
+
padding-right: {{ block.settings.pc_padding_x }}px;
|
|
504
|
+
border-radius: {{ block.settings.pc_border_radius }}px;
|
|
467
505
|
{% if block.settings.pc_full_width %}
|
|
468
506
|
width: 100%;
|
|
469
507
|
{% else %}
|
|
@@ -481,6 +519,15 @@
|
|
|
481
519
|
object-fit: cover;
|
|
482
520
|
}
|
|
483
521
|
{% endif %}
|
|
522
|
+
|
|
523
|
+
{% if block.settings.pc_border_radius != 0 %}
|
|
524
|
+
#shopify-block-{{ block.id }} .flex-layout-image {
|
|
525
|
+
border-radius: {{ block.settings.pc_border_radius }}px;
|
|
526
|
+
}
|
|
527
|
+
#shopify-block-{{ block.id }} .flex-layout-video {
|
|
528
|
+
border-radius: {{ block.settings.pc_border_radius }}px;
|
|
529
|
+
}
|
|
530
|
+
{% endif %}
|
|
484
531
|
}
|
|
485
532
|
|
|
486
533
|
@media (min-width: 1280px) {
|
|
@@ -576,7 +576,7 @@
|
|
|
576
576
|
{% if block.settings.offset_top_pc != blank %}
|
|
577
577
|
#shopify-block-{{ block.id }} {
|
|
578
578
|
position: relative;
|
|
579
|
-
top: -{{ block.settings.offset_top_pc }}px;
|
|
579
|
+
margin-top: -{{ block.settings.offset_top_pc }}px;
|
|
580
580
|
}
|
|
581
581
|
{% endif %}
|
|
582
582
|
#shopify-block-{{ block.id }} .flex-layout-block-container {
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{% schema %}
|
|
2
|
+
{
|
|
3
|
+
"name": "Title Comment Item",
|
|
4
|
+
"class": "zz-title-comment-item-block",
|
|
5
|
+
"settings": [
|
|
6
|
+
{
|
|
7
|
+
"type": "text",
|
|
8
|
+
"id": "name",
|
|
9
|
+
"label": "评论人姓名",
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"type": "image_picker",
|
|
13
|
+
"id": "avatar_image",
|
|
14
|
+
"label": "评论人头像",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"type": "textarea",
|
|
18
|
+
"id": "content",
|
|
19
|
+
"label": "评论内容",
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"type": "color",
|
|
23
|
+
"id": "text_color",
|
|
24
|
+
"label": "Text Color",
|
|
25
|
+
"default": "#ffffff"
|
|
26
|
+
},
|
|
27
|
+
|
|
28
|
+
],
|
|
29
|
+
"presets": [
|
|
30
|
+
{
|
|
31
|
+
"name": "Title Comment Item",
|
|
32
|
+
},
|
|
33
|
+
]
|
|
34
|
+
}
|
|
35
|
+
{% endschema %}
|
|
36
|
+
|
|
37
|
+
<div class="zz-title-comment-item-top tw-flex tw-items-center tw-mb-[4px]">
|
|
38
|
+
<img src="{{ block.settings.avatar_image | image_url }}" width="48" height="48" alt="Avatar" class="zz-title-comment-item-avatar tw-w-[24px] tw-h-[24px] tw-rounded-[50px]" />
|
|
39
|
+
<p class="zz-title-comment-item-name tw-text-[12px] tw-ml-[12px] tw-font-semibold" style="color: {{ block.settings.text_color }};">{{ block.settings.name }}</p>
|
|
40
|
+
</div>
|
|
41
|
+
{% assign content_color = block.settings.text_color
|
|
42
|
+
| color_modify: 'alpha', 0.6
|
|
43
|
+
%}
|
|
44
|
+
<p class="zz-title-comment-item-content tw-text-[12px] tw-pl-[36px] tw-mb-[16px] tw-leading-[1.3]" style="color: {{ content_color }};">{{ block.settings.content }}</p>
|