zz-shopify-components 0.17.0 → 0.17.1-beta.1
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.
|
@@ -207,6 +207,10 @@
|
|
|
207
207
|
],
|
|
208
208
|
"default": "none-animation"
|
|
209
209
|
},
|
|
210
|
+
{
|
|
211
|
+
"type": "header",
|
|
212
|
+
"content": "特殊设置"
|
|
213
|
+
},
|
|
210
214
|
{
|
|
211
215
|
"type": "select",
|
|
212
216
|
"id": "pc_mobile_show",
|
|
@@ -223,7 +227,27 @@
|
|
|
223
227
|
"id": "overflow_x_hidden",
|
|
224
228
|
"label": "是否禁止横轴移动",
|
|
225
229
|
"default": true
|
|
226
|
-
}
|
|
230
|
+
},
|
|
231
|
+
|
|
232
|
+
{
|
|
233
|
+
"type": "text",
|
|
234
|
+
"id": "custom_class",
|
|
235
|
+
"label": "自定义class",
|
|
236
|
+
"info": "自定义外层class，自定义样式"
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"type": "number",
|
|
240
|
+
"label": "PC端向上偏移量",
|
|
241
|
+
"id": "offset_top_pc",
|
|
242
|
+
"info": "单位：px, 针对一些覆盖到上面组件的情况"
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
"type": "number",
|
|
246
|
+
"label": "移动端向上偏移量",
|
|
247
|
+
"id": "offset_top_mobile",
|
|
248
|
+
"info": "单位：px, 针对一些覆盖到上面组件的情况"
|
|
249
|
+
},
|
|
250
|
+
|
|
227
251
|
|
|
228
252
|
],
|
|
229
253
|
"blocks": [
|
|
@@ -508,6 +532,12 @@
|
|
|
508
532
|
{% if block.settings.overflow_x_hidden %}
|
|
509
533
|
overflow-x: hidden;
|
|
510
534
|
{% endif %}
|
|
535
|
+
{% if block.settings.offset_top_mobile != blank %}
|
|
536
|
+
position: relative;
|
|
537
|
+
top: -{{ block.settings.offset_top_mobile }}px;
|
|
538
|
+
|
|
539
|
+
{% endif %}
|
|
540
|
+
|
|
511
541
|
}
|
|
512
542
|
{% if block.settings.pc_mobile_show == "pc_only" %}
|
|
513
543
|
@media (max-width: 1023px) {
|
|
@@ -543,6 +573,12 @@
|
|
|
543
573
|
}
|
|
544
574
|
|
|
545
575
|
@media (min-width: 1024px) {
|
|
576
|
+
{% if block.settings.offset_top_pc != blank %}
|
|
577
|
+
#shopify-block-{{ block.id }} {
|
|
578
|
+
position: relative;
|
|
579
|
+
top: -{{ block.settings.offset_top_pc }}px;
|
|
580
|
+
}
|
|
581
|
+
{% endif %}
|
|
546
582
|
#shopify-block-{{ block.id }} .flex-layout-block-container {
|
|
547
583
|
flex-direction: {{ block.settings.pc_direction }};
|
|
548
584
|
justify-content: {{ block.settings.pc_justify }};
|
|
@@ -575,6 +611,6 @@
|
|
|
575
611
|
}
|
|
576
612
|
</style>
|
|
577
613
|
|
|
578
|
-
<div class="flex-layout-block-container {{ block.settings.self_animation }} {{ block.settings.child_animation }}">
|
|
614
|
+
<div class="flex-layout-block-container {{ block.settings.self_animation }} {{ block.settings.child_animation }} {{ block.settings.custom_class }}">
|
|
579
615
|
{% content_for 'blocks' %}
|
|
580
616
|
</div>
|
|
@@ -224,6 +224,12 @@
|
|
|
224
224
|
],
|
|
225
225
|
"default": "none-animation"
|
|
226
226
|
},
|
|
227
|
+
{
|
|
228
|
+
"type": "text",
|
|
229
|
+
"id": "custom_class",
|
|
230
|
+
"label": "自定义class",
|
|
231
|
+
"info": "自定义外层class，自定义样式"
|
|
232
|
+
}
|
|
227
233
|
],
|
|
228
234
|
"blocks": [
|
|
229
235
|
{
|
|
@@ -334,7 +340,7 @@
|
|
|
334
340
|
</style>
|
|
335
341
|
|
|
336
342
|
|
|
337
|
-
<div class="flex-layout-widget-container {{ block.settings.self_animation }} {{ block.settings.child_animation }}">
|
|
343
|
+
<div class="flex-layout-widget-container {{ block.settings.self_animation }} {{ block.settings.child_animation }} {{ block.settings.custom_class }}">
|
|
338
344
|
|
|
339
345
|
{% content_for 'blocks' %}
|
|
340
346
|
</div>
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
zz-modal:not(:defined) { display: none !important; }
|
|
3
|
+
/* Responsive modal variables from section settings */
|
|
4
|
+
#{{ block.settings.modal_id }} {
|
|
5
|
+
--zz-modal-radius: {{ block.settings.radius_mobile }}px;
|
|
6
|
+
--zz-modal-padding: {{ block.settings.padding_mobile }}px;
|
|
7
|
+
--zz-modal-width: {{ block.settings.width_mobile }};
|
|
8
|
+
}
|
|
9
|
+
@media (min-width: 1024px) {
|
|
10
|
+
#{{ block.settings.modal_id }} {
|
|
11
|
+
--zz-modal-radius: {{ block.settings.radius_pc }}px;
|
|
12
|
+
--zz-modal-padding: {{ block.settings.padding_pc }}px;
|
|
13
|
+
--zz-modal-width: {{ block.settings.width_pc }};
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
@media (min-width: 1280px) {
|
|
17
|
+
#{{ block.settings.modal_id }} {
|
|
18
|
+
--zz-modal-width: {{ block.settings.width_xl_pc }};
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
</style>
|
|
22
|
+
|
|
23
|
+
<zz-modal close-btn-color="close-btn-{{ block.settings.close_btn_color }}" {% if block.settings.sheet_on_mobile %} sheet-on-mobile {% endif %} {% if block.settings.no_backdrop_close %} no-backdrop-close {% endif %} id="{{ block.settings.modal_id }}"{% unless block.settings.show_header %} no-header{% endunless %}{% unless block.settings.show_footer %} no-footer{% endunless %}>
|
|
24
|
+
{% if block.settings.show_header %}
|
|
25
|
+
<div slot="header" class="tw-text-[24px] tw-font-semibold">{{ block.settings.header_text }}</div>
|
|
26
|
+
{% endif %}
|
|
27
|
+
{% content_for 'blocks' %}
|
|
28
|
+
{% if block.settings.show_footer %}
|
|
29
|
+
<div slot="footer" class="tw-flex tw-justify-end tw-gap-2 tw-pt-8">
|
|
30
|
+
<button class=" tw-text-[16px] " data-zz-modal-close>{{ block.settings.footer_text }}</button>
|
|
31
|
+
</div>
|
|
32
|
+
{% endif %}
|
|
33
|
+
</zz-modal>
|
|
34
|
+
|
|
35
|
+
<script>
|
|
36
|
+
(function(){
|
|
37
|
+
var id = 'zz-modal-js';
|
|
38
|
+
if (!document.getElementById(id)) {
|
|
39
|
+
var s = document.createElement('script');
|
|
40
|
+
s.id = id;
|
|
41
|
+
s.src = '{{ 'zz-modal.js' | asset_url }}';
|
|
42
|
+
s.defer = true;
|
|
43
|
+
document.head.appendChild(s);
|
|
44
|
+
}
|
|
45
|
+
})();
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
{% schema %}
|
|
49
|
+
{
|
|
50
|
+
"name": "ZZ Modal Block",
|
|
51
|
+
"settings": [
|
|
52
|
+
{
|
|
53
|
+
"type": "text",
|
|
54
|
+
"id": "modal_id",
|
|
55
|
+
"label": "弹窗id （必填）",
|
|
56
|
+
"default": "demo-modal"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"type": "select",
|
|
60
|
+
"id": "close_btn_color",
|
|
61
|
+
"label": "关闭按钮颜色",
|
|
62
|
+
"default": "white",
|
|
63
|
+
"options": [
|
|
64
|
+
{ "value": "white", "label": "白色" },
|
|
65
|
+
{ "value": "black", "label": "黑色" }
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"type": "checkbox",
|
|
70
|
+
"id": "show_header",
|
|
71
|
+
"label": "显示 Header",
|
|
72
|
+
"default": false
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"type": "text",
|
|
76
|
+
"id": "header_text",
|
|
77
|
+
"label": "弹窗标题",
|
|
78
|
+
"visible_if": "{{ block.settings.show_header }}",
|
|
79
|
+
"default": "弹窗标题"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"type": "checkbox",
|
|
83
|
+
"id": "sheet_on_mobile",
|
|
84
|
+
"label": "移动端变为底部抽屉模式",
|
|
85
|
+
"default": true
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"type": "checkbox",
|
|
89
|
+
"id": "show_footer",
|
|
90
|
+
"label": "显示 Footer",
|
|
91
|
+
"default": false
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"type": "text",
|
|
95
|
+
"id": "footer_text",
|
|
96
|
+
"label": "弹窗底部按钮文案",
|
|
97
|
+
"visible_if": "{{ block.settings.show_footer }}",
|
|
98
|
+
"default": "Close"
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"type": "checkbox",
|
|
102
|
+
"id": "no_backdrop_close",
|
|
103
|
+
"label": "是否禁用遮罩点击关闭",
|
|
104
|
+
"default": false
|
|
105
|
+
},
|
|
106
|
+
|
|
107
|
+
{
|
|
108
|
+
"type": "text",
|
|
109
|
+
"id": "width_mobile",
|
|
110
|
+
"label": "移动端宽度（如 92vw 或 360px）",
|
|
111
|
+
"default": "92vw"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"type": "text",
|
|
115
|
+
"id": "width_pc",
|
|
116
|
+
"label": "PC LG宽度（如 720px 或 60vw）",
|
|
117
|
+
"default": "90vw"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"type": "text",
|
|
121
|
+
"id": "width_xl_pc",
|
|
122
|
+
"label": "PC XL宽度（如 720px 或 60vw）",
|
|
123
|
+
"default": "1200px"
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"type": "range",
|
|
127
|
+
"id": "radius_mobile",
|
|
128
|
+
"label": "移动端圆角(px)",
|
|
129
|
+
"min": 0,
|
|
130
|
+
"max": 40,
|
|
131
|
+
"step": 1,
|
|
132
|
+
"default": 12
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"type": "range",
|
|
136
|
+
"id": "radius_pc",
|
|
137
|
+
"label": "PC 端圆角(px)",
|
|
138
|
+
"min": 0,
|
|
139
|
+
"max": 40,
|
|
140
|
+
"step": 1,
|
|
141
|
+
"default": 12
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"type": "range",
|
|
145
|
+
"id": "padding_mobile",
|
|
146
|
+
"label": "移动端内边距(px)",
|
|
147
|
+
"min": 0,
|
|
148
|
+
"max": 48,
|
|
149
|
+
"step": 2,
|
|
150
|
+
"default": 16
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"type": "range",
|
|
154
|
+
"id": "padding_pc",
|
|
155
|
+
"label": "PC 端内边距(px)",
|
|
156
|
+
"min": 0,
|
|
157
|
+
"max": 64,
|
|
158
|
+
"step": 2,
|
|
159
|
+
"default": 20
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
],
|
|
163
|
+
"blocks": [
|
|
164
|
+
{
|
|
165
|
+
"type": "@theme",
|
|
166
|
+
}
|
|
167
|
+
],
|
|
168
|
+
"presets": [
|
|
169
|
+
{
|
|
170
|
+
"name": "ZZ Modal Block",
|
|
171
|
+
"category": "ZZ Components"
|
|
172
|
+
}
|
|
173
|
+
]
|
|
174
|
+
}
|
|
175
|
+
{% endschema %}
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
package/package.json
CHANGED
|
@@ -0,0 +1,451 @@
|
|
|
1
|
+
{% assign block_size = section.blocks.size %}
|
|
2
|
+
{% schema %}
|
|
3
|
+
{
|
|
4
|
+
"name": "Swiper Gallery",
|
|
5
|
+
"settings": [
|
|
6
|
+
{
|
|
7
|
+
"type": "color",
|
|
8
|
+
"id": "bg_color",
|
|
9
|
+
"default": "#ffffff",
|
|
10
|
+
"label": "背景色"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"type": "checkbox",
|
|
14
|
+
"id": "has_mobile_nav",
|
|
15
|
+
"label": "移动端是否显示画廊导航",
|
|
16
|
+
"default": true
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"type": "number",
|
|
20
|
+
"id": "pc_padding_top",
|
|
21
|
+
"label": "PC上内边距 (Padding Top)",
|
|
22
|
+
"default": 80
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"type": "number",
|
|
26
|
+
"id": "pc_padding_bottom",
|
|
27
|
+
"label": "PC下内边距 (Padding Bottom)",
|
|
28
|
+
"default": 80
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"type": "number",
|
|
32
|
+
"id": "mobile_padding_top",
|
|
33
|
+
"label": "移动上内边距 (Padding Top)",
|
|
34
|
+
|
|
35
|
+
"default": 40
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"type": "number",
|
|
39
|
+
"id": "mobile_padding_bottom",
|
|
40
|
+
"label": "移动下内边距 (Padding Bottom)",
|
|
41
|
+
"default": 40
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"type": "text",
|
|
45
|
+
"id": "module_name",
|
|
46
|
+
"label": "模块id",
|
|
47
|
+
"info": "用于定位到本模块"
|
|
48
|
+
},
|
|
49
|
+
|
|
50
|
+
],
|
|
51
|
+
"blocks": [
|
|
52
|
+
{
|
|
53
|
+
"name": "Video",
|
|
54
|
+
"type": "video",
|
|
55
|
+
"settings": [
|
|
56
|
+
{
|
|
57
|
+
"type": "text",
|
|
58
|
+
"id": "slide_title",
|
|
59
|
+
"label": "标题"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"type": "text",
|
|
63
|
+
"id": "video_url_pc",
|
|
64
|
+
"label": "Video url PC",
|
|
65
|
+
"info": "使用cdn视频时，填写视频url。防止视频模糊"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"type": "video",
|
|
69
|
+
"id": "video_pc",
|
|
70
|
+
"label": "Video"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"type": "image_picker",
|
|
74
|
+
"id": "poster_pc",
|
|
75
|
+
"label": "视频封面 PC 没有视频时显示封面"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"type": "video",
|
|
79
|
+
"id": "video_mb",
|
|
80
|
+
"label": "Video Mobile"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"type": "image_picker",
|
|
84
|
+
"id": "poster_mb",
|
|
85
|
+
"label": "视频封面 Mobile 没有视频时显示封面"
|
|
86
|
+
},
|
|
87
|
+
|
|
88
|
+
{
|
|
89
|
+
"type": "text",
|
|
90
|
+
"id": "btn_text",
|
|
91
|
+
"label": "按钮文字",
|
|
92
|
+
"default": "Learn More"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"type": "select",
|
|
96
|
+
"id": "btn_type",
|
|
97
|
+
"label": "按钮类型",
|
|
98
|
+
"options": [
|
|
99
|
+
{ "value": "link", "label": "链接" },
|
|
100
|
+
{ "value": "modal", "label": "弹窗" },
|
|
101
|
+
],
|
|
102
|
+
"default": "link"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"type": "text",
|
|
106
|
+
"id": "modal_id",
|
|
107
|
+
"label": "弹窗ID",
|
|
108
|
+
"visible_if": "{{ block.settings.btn_type == 'modal' }}"
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"type": "url",
|
|
112
|
+
"id": "btn_link",
|
|
113
|
+
"label": "按钮链接",
|
|
114
|
+
"visible_if": "{{ block.settings.btn_type == 'link' }}"
|
|
115
|
+
}
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
],
|
|
119
|
+
"presets": [
|
|
120
|
+
{
|
|
121
|
+
"name": "Swiper Gallery",
|
|
122
|
+
},
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
{% endschema %}
|
|
126
|
+
|
|
127
|
+
<div class="zz-swiper-gallery tw-overflow-hidden zz-swiper-gallery-{{ section.id }}">
|
|
128
|
+
|
|
129
|
+
<div class="swiper-wrapper tw-w-full">
|
|
130
|
+
{% for banner in section.blocks %}
|
|
131
|
+
<div class='swiper-slide'>
|
|
132
|
+
<div class='media-box tw-relative tw-w-full tw-h-full tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden tw-bg-white'>
|
|
133
|
+
{% if banner.settings.video_pc != blank or banner.settings.video_url_pc != blank %}
|
|
134
|
+
{% if banner.settings.video_url_pc != blank %}
|
|
135
|
+
{% assign pc_video = banner.settings.video_url_pc %}
|
|
136
|
+
{% else %}
|
|
137
|
+
{% assign pc_video = banner.settings.video_pc %}
|
|
138
|
+
{% endif %}
|
|
139
|
+
{% render 'zz-video',
|
|
140
|
+
pc_video: pc_video,
|
|
141
|
+
pc_poster: banner.settings.poster_pc,
|
|
142
|
+
mb_video: banner.settings.video_mb,
|
|
143
|
+
mb_poster: banner.settings.poster_mb,
|
|
144
|
+
lazy: true,
|
|
145
|
+
class: 'width-height-full tw-object-cover',
|
|
146
|
+
autoplay: true,
|
|
147
|
+
loop: true,
|
|
148
|
+
muted: true
|
|
149
|
+
%}
|
|
150
|
+
{% else %}
|
|
151
|
+
{%- if banner.settings.poster_pc != blank -%}
|
|
152
|
+
{%
|
|
153
|
+
render 'zz-img',
|
|
154
|
+
pc_image: banner.settings.poster_pc,
|
|
155
|
+
mb_image: banner.settings.poster_mb | default: banner.settings.poster_pc,
|
|
156
|
+
image_alt: banner.settings.slide_title | escape,
|
|
157
|
+
class_name: 'width-height-full tw-object-cover'
|
|
158
|
+
%}
|
|
159
|
+
{% endif %}
|
|
160
|
+
{% endif %}
|
|
161
|
+
|
|
162
|
+
{% if banner.settings.btn_type == 'modal' and banner.settings.modal_id != blank %}
|
|
163
|
+
<div class='learn-more-button tw-absolute tw-font-medium tw-cursor-pointer max-lg:tw-bottom-[24px] lg:tw-bottom-[40px] tw-left-1/2 tw--translate-x-1/2 tw-text-white tw-rounded-[100px]
|
|
164
|
+
tw-text-[13px] lg:tw-text-[16px] tw-px-[20px] tw-py-[6px] lg:tw-px-[24px] lg:tw-py-[10px]'
|
|
165
|
+
data-zz-modal-target="#{{ banner.settings.modal_id }}"
|
|
166
|
+
>
|
|
167
|
+
<span>{{ banner.settings.btn_text }}</span>
|
|
168
|
+
</div>
|
|
169
|
+
{% elsif banner.settings.btn_type == 'link' and banner.settings.btn_link != blank %}
|
|
170
|
+
<a class='learn-more-button tw-absolute tw-font-medium tw-cursor-pointer max-lg:tw-bottom-[24px] lg:tw-bottom-[40px] tw-left-1/2 tw--translate-x-1/2 tw-text-white tw-rounded-[100px]
|
|
171
|
+
tw-text-[13px] lg:tw-text-[16px] tw-px-[20px] tw-py-[6px] lg:tw-px-[24px] lg:tw-py-[10px]'
|
|
172
|
+
href='{{ banner.settings.btn_link }}'>
|
|
173
|
+
<span>{{ banner.settings.btn_text }}</span>
|
|
174
|
+
</a>
|
|
175
|
+
{% endif %}
|
|
176
|
+
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
</div>
|
|
180
|
+
{% endfor %}
|
|
181
|
+
{% if block_size <= 3 %}
|
|
182
|
+
{% for banner in section.blocks %}
|
|
183
|
+
<div class='swiper-slide'>
|
|
184
|
+
<div class='media-box tw-relative tw-w-full tw-h-full tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden'>
|
|
185
|
+
{% if banner.settings.video_pc != blank or banner.settings.video_url_pc != blank %}
|
|
186
|
+
{% if banner.settings.video_url_pc != blank %}
|
|
187
|
+
{% assign pc_video = banner.settings.video_url_pc %}
|
|
188
|
+
{% else %}
|
|
189
|
+
{% assign pc_video = banner.settings.video_pc %}
|
|
190
|
+
{% endif %}
|
|
191
|
+
{% render 'zz-video',
|
|
192
|
+
pc_video: pc_video,
|
|
193
|
+
pc_poster: banner.settings.poster_pc,
|
|
194
|
+
mb_video: banner.settings.video_mb,
|
|
195
|
+
mb_poster: banner.settings.poster_mb,
|
|
196
|
+
lazy: true,
|
|
197
|
+
class: 'width-height-full tw-object-cover',
|
|
198
|
+
autoplay: true,
|
|
199
|
+
loop: true,
|
|
200
|
+
muted: true
|
|
201
|
+
%}
|
|
202
|
+
{% else %}
|
|
203
|
+
{%- if banner.settings.poster_pc != blank -%}
|
|
204
|
+
{%
|
|
205
|
+
render 'zz-img',
|
|
206
|
+
pc_image: banner.settings.poster_pc,
|
|
207
|
+
mb_image: banner.settings.poster_mb | default: banner.settings.poster_pc,
|
|
208
|
+
image_alt: banner.settings.slide_title | escape,
|
|
209
|
+
class_name: 'width-height-full tw-object-cover'
|
|
210
|
+
%}
|
|
211
|
+
{% endif %}
|
|
212
|
+
{% endif %}
|
|
213
|
+
|
|
214
|
+
{% if banner.settings.btn_type == 'modal' and banner.settings.modal_id != blank %}
|
|
215
|
+
<div class='learn-more-button tw-absolute tw-font-medium tw-cursor-pointer max-lg:tw-bottom-[24px] lg:tw-bottom-[40px] tw-left-1/2 tw--translate-x-1/2 tw-text-white tw-rounded-[100px]
|
|
216
|
+
tw-text-[13px] lg:tw-text-[16px] tw-px-[20px] tw-py-[6px] lg:tw-px-[24px] lg:tw-py-[10px]'
|
|
217
|
+
data-zz-modal-target="#{{ banner.settings.modal_id }}"
|
|
218
|
+
>
|
|
219
|
+
<span>{{ banner.settings.btn_text }}</span>
|
|
220
|
+
</div>
|
|
221
|
+
{% elsif banner.settings.btn_type == 'link' and banner.settings.btn_link != blank %}
|
|
222
|
+
<a class='learn-more-button tw-absolute tw-font-medium tw-cursor-pointer max-lg:tw-bottom-[24px] lg:tw-bottom-[40px] tw-left-1/2 tw--translate-x-1/2 tw-text-white tw-rounded-[100px]
|
|
223
|
+
tw-text-[13px] lg:tw-text-[16px] tw-px-[20px] tw-py-[6px] lg:tw-px-[24px] lg:tw-py-[10px]'
|
|
224
|
+
href='{{ banner.settings.btn_link }}'>
|
|
225
|
+
<span>{{ banner.settings.btn_text }}</span>
|
|
226
|
+
</a>
|
|
227
|
+
{% endif %}
|
|
228
|
+
|
|
229
|
+
</div>
|
|
230
|
+
|
|
231
|
+
</div>
|
|
232
|
+
{% endfor %}
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
{% endif %}
|
|
236
|
+
</div>
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
<!-- 导航箭头 -->
|
|
240
|
+
<div class="swiper-button-prev">
|
|
241
|
+
{% render 'zz-prev-next-blur-icon', type: 'prev', color_type: 'light' %}
|
|
242
|
+
</div>
|
|
243
|
+
<div class="swiper-button-next">
|
|
244
|
+
{% render 'zz-prev-next-blur-icon', type: 'next', color_type: 'light' %}
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
<div class="gallery-nav tw-w-full tw-flex tw-justify-center tw-items-end max-lg:tw-mt-[20px] lg:tw-mt-[40px] lg:w-gap-[18px] tw-gap-[8px]">
|
|
250
|
+
{% for banner in section.blocks %}
|
|
251
|
+
<div class='gallery-item tw-cursor-pointer lg:tw-w-[120px] lg:tw-h-[68px] max-lg:tw-w-[48px] max-lg:tw-h-[64px] tw-rounded-[4px] tw-overflow-hidden'>
|
|
252
|
+
{%
|
|
253
|
+
render 'zz-img',
|
|
254
|
+
pc_image: banner.settings.poster_pc,
|
|
255
|
+
mb_image: banner.settings.poster_mb | default: banner.settings.poster_pc,
|
|
256
|
+
image_alt: banner.settings.slide_title | escape,
|
|
257
|
+
class_name: 'width-height-full tw-object-cover'
|
|
258
|
+
%}
|
|
259
|
+
|
|
260
|
+
</div>
|
|
261
|
+
{% endfor %}
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
<script defer>
|
|
266
|
+
|
|
267
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
268
|
+
const section = document.getElementById('shopify-section-{{section.id}}');
|
|
269
|
+
const screenWidth = window.innerWidth;
|
|
270
|
+
let isDesktop = screenWidth > 1023;
|
|
271
|
+
// 获取所有gallery-item 监听点击事件，点击后swiper切换到对应的slide
|
|
272
|
+
const galleryItems = section.querySelectorAll('.gallery-item');
|
|
273
|
+
|
|
274
|
+
// 更新当前高亮的导航
|
|
275
|
+
function updateNavActive(activeIndex) {
|
|
276
|
+
const blockSize = {{ block_size }};
|
|
277
|
+
if (blockSize <= 3) {
|
|
278
|
+
activeIndex = activeIndex % blockSize;
|
|
279
|
+
}
|
|
280
|
+
galleryItems.forEach((item, i) => {
|
|
281
|
+
item.classList.toggle('gallery-item-active', i === activeIndex);
|
|
282
|
+
});
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
// 初始化 Swiper
|
|
286
|
+
function initSwiper() {
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
const swiperClassName = '.zz-swiper-gallery-{{ section.id }}';
|
|
290
|
+
let stretch = 0;
|
|
291
|
+
if (isDesktop) {
|
|
292
|
+
// 获取 swiperClassName 的 width
|
|
293
|
+
const swiperWidth = section.querySelector(swiperClassName).clientWidth;
|
|
294
|
+
console.log('swiperWidth:', swiperWidth);
|
|
295
|
+
const slideWidth = swiperWidth * 0.58;
|
|
296
|
+
// 计算 stretch
|
|
297
|
+
const bianWidth = (swiperWidth - slideWidth) / 2;
|
|
298
|
+
const offset = bianWidth - (0.1 * slideWidth);
|
|
299
|
+
stretch = (slideWidth * 0.8) - offset;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
const swiper = new Swiper(swiperClassName, {
|
|
303
|
+
effect: "coverflow",
|
|
304
|
+
grabCursor: true,
|
|
305
|
+
slidesPerView: "auto",
|
|
306
|
+
centeredSlides: true,
|
|
307
|
+
loop: true,
|
|
308
|
+
coverflowEffect: {
|
|
309
|
+
rotate: 0, // 左右卡片旋转角度
|
|
310
|
+
stretch: stretch, // 间距拉伸
|
|
311
|
+
depth: 0, // 景深
|
|
312
|
+
scale: isDesktop ? 0.8 : 0.9, // 缩放比例
|
|
313
|
+
modifier: 1, // 效果强度
|
|
314
|
+
slideShadows: false // 去掉阴影，可选 true
|
|
315
|
+
},
|
|
316
|
+
navigation: {
|
|
317
|
+
nextEl: ".swiper-button-next",
|
|
318
|
+
prevEl: ".swiper-button-prev",
|
|
319
|
+
},
|
|
320
|
+
on: {
|
|
321
|
+
init: function () {
|
|
322
|
+
console.log('初始化 realIndex:', this.realIndex);
|
|
323
|
+
},
|
|
324
|
+
slideChange: function () {
|
|
325
|
+
updateNavActive(this.realIndex);
|
|
326
|
+
console.log('activeIndex:', this.activeIndex);
|
|
327
|
+
console.log('realIndex:', this.realIndex); // ✅ 建议使用
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
});
|
|
331
|
+
|
|
332
|
+
|
|
333
|
+
|
|
334
|
+
galleryItems.forEach((item, index) => {
|
|
335
|
+
item.addEventListener('click', () => {
|
|
336
|
+
console.log('点击了第', index, '个缩略图');
|
|
337
|
+
|
|
338
|
+
swiper.slideToLoop(index);
|
|
339
|
+
});
|
|
340
|
+
});
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
initSwiper();
|
|
344
|
+
});
|
|
345
|
+
</script>
|
|
346
|
+
|
|
347
|
+
|
|
348
|
+
<style>
|
|
349
|
+
#shopify-section-{{section.id}} {
|
|
350
|
+
background: {{ section.settings.bg_color }};
|
|
351
|
+
display: flex;
|
|
352
|
+
flex-direction: column;
|
|
353
|
+
align-items: center;
|
|
354
|
+
}
|
|
355
|
+
#shopify-section-{{section.id}} .width-height-full {
|
|
356
|
+
width: 100% !important;
|
|
357
|
+
height: 100% !important;
|
|
358
|
+
}
|
|
359
|
+
#shopify-section-{{section.id}} .learn-more-button {
|
|
360
|
+
backdrop-filter: blur(10px);
|
|
361
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
362
|
+
cursor: pointer;
|
|
363
|
+
display: none;
|
|
364
|
+
}
|
|
365
|
+
#shopify-section-{{section.id}} .swiper-slide-active .learn-more-button {
|
|
366
|
+
display: block;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
#shopify-section-{{section.id}} .swiper-button-next:after,
|
|
370
|
+
#shopify-section-{{section.id}} .swiper-button-prev:after {
|
|
371
|
+
display: none;
|
|
372
|
+
}
|
|
373
|
+
@media screen and (max-width: 1024px) {
|
|
374
|
+
#shopify-section-{{ section.id }} {
|
|
375
|
+
|
|
376
|
+
padding-top: {{ section.settings.mobile_padding_top }}px;
|
|
377
|
+
padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
|
|
378
|
+
}
|
|
379
|
+
#shopify-section-{{ section.id }} .gallery-nav {
|
|
380
|
+
{% unless section.settings.has_mobile_nav %}
|
|
381
|
+
display: none;
|
|
382
|
+
{% endunless %}
|
|
383
|
+
}
|
|
384
|
+
#shopify-section-{{section.id}} .zz-swiper-gallery {
|
|
385
|
+
width: 100%;
|
|
386
|
+
}
|
|
387
|
+
#shopify-section-{{section.id}} .zz-swiper-gallery .swiper-slide {
|
|
388
|
+
width: calc(100% - 75px);
|
|
389
|
+
aspect-ratio: 3 / 4;
|
|
390
|
+
}
|
|
391
|
+
#shopify-section-{{section.id}} .gallery-item-active {
|
|
392
|
+
width: 60px !important;
|
|
393
|
+
height: 80px !important;
|
|
394
|
+
}
|
|
395
|
+
#shopify-section-{{section.id}} .swiper-button-next,
|
|
396
|
+
#shopify-section-{{section.id}} .swiper-button-prev {
|
|
397
|
+
display: none;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
|
|
401
|
+
}
|
|
402
|
+
@media screen and (min-width: 1024px) {
|
|
403
|
+
|
|
404
|
+
#shopify-section-{{ section.id }} {
|
|
405
|
+
|
|
406
|
+
padding-top: {{ section.settings.pc_padding_top }}px;
|
|
407
|
+
padding-bottom: {{ section.settings.pc_padding_bottom }}px;
|
|
408
|
+
}
|
|
409
|
+
#shopify-section-{{section.id}} .zz-swiper-gallery {
|
|
410
|
+
width: 80%;
|
|
411
|
+
|
|
412
|
+
}
|
|
413
|
+
#shopify-section-{{section.id}} .zz-swiper-gallery .swiper-slide {
|
|
414
|
+
width: 58%;
|
|
415
|
+
aspect-ratio: 16 / 9;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
#shopify-section-{{section.id}} .gallery-item-active {
|
|
419
|
+
width: 160px !important;
|
|
420
|
+
height: 90px !important;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
#shopify-section-{{section.id}} .swiper-button-next,
|
|
424
|
+
#shopify-section-{{section.id}} .swiper-button-prev {
|
|
425
|
+
width: 48px;
|
|
426
|
+
height: 48px;
|
|
427
|
+
}
|
|
428
|
+
#shopify-section-{{section.id}} .swiper-button-prev {
|
|
429
|
+
left: 20%;
|
|
430
|
+
top: 50%;
|
|
431
|
+
right: unset;
|
|
432
|
+
transform:translate(-88px, -4px);
|
|
433
|
+
}
|
|
434
|
+
#shopify-section-{{section.id}} .swiper-button-next {
|
|
435
|
+
right: 20%;
|
|
436
|
+
left: unset;
|
|
437
|
+
top: 50%;
|
|
438
|
+
transform:translate(88px, -4px);
|
|
439
|
+
}
|
|
440
|
+
#shopify-section-{{section.id}} .swiper-button-next.swiper-button-disabled, #shopify-section-{{section.id}} .swiper-button-prev.swiper-button-disabled {
|
|
441
|
+
display: none;
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
@media screen and (min-width: 1540px) {
|
|
445
|
+
#shopify-section-{{section.id}} .zz-swiper-gallery {
|
|
446
|
+
width: 1400px;
|
|
447
|
+
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
</style>
|