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
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
{%- style -%}
|
|
2
|
+
#shopify-section-{{ section.id }} {
|
|
3
|
+
padding-top: {{ section.settings.padding_top_mb }}px;
|
|
4
|
+
padding-bottom: {{ section.settings.padding_bottom_mb }}px;
|
|
5
|
+
background: {{ section.settings.bg_color }};
|
|
6
|
+
}
|
|
7
|
+
#shopify-section-{{ section.id }} .zz-faq-list {
|
|
8
|
+
background: {{ section.settings.content_bg_color }};
|
|
9
|
+
}
|
|
10
|
+
#shopify-section-{{ section.id }} .collapse-arrow > .tw-daisy-collapse-title::after {
|
|
11
|
+
position: absolute;
|
|
12
|
+
right: 0;
|
|
13
|
+
top: 50%;
|
|
14
|
+
transform: translateY(-50%);
|
|
15
|
+
width: 24px;
|
|
16
|
+
height: 24px;
|
|
17
|
+
transition: all 0.3s;
|
|
18
|
+
content: '';
|
|
19
|
+
width: 20px;
|
|
20
|
+
height: 20px;
|
|
21
|
+
{% if section.settings.collapsible_arrow_style == 'light' %}
|
|
22
|
+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.34375 8.11816L10.0006 13.775L15.6575 8.11816' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
23
|
+
{% else %}
|
|
24
|
+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.34375 8.11816L10.0006 13.775L15.6575 8.11816' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
25
|
+
{% endif %}
|
|
26
|
+
}
|
|
27
|
+
#shopify-section-{{ section.id }} .collapse-arrow input[type="radio"]:checked ~ .tw-daisy-collapse-title::after {
|
|
28
|
+
transform: translateY(-50%) rotate(180deg);
|
|
29
|
+
}
|
|
30
|
+
#shopify-section-{{ section.id }} .tw-daisy-collapse:last-child {
|
|
31
|
+
border-bottom: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media screen and (min-width: 1024px) {
|
|
35
|
+
#shopify-section-{{ section.id }} {
|
|
36
|
+
padding-top: {{ section.settings.padding_top }}px;
|
|
37
|
+
padding-bottom: {{ section.settings.padding_bottom }}px;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
{%- endstyle -%}
|
|
41
|
+
|
|
42
|
+
<div class="faq-custom max-lg:tw-px-[20px] lg:tw-mx-auto lg:tw-w-[95.3125vw] xl:tw-w-[1220px] fade-in-box">
|
|
43
|
+
{% render 'content-h2',
|
|
44
|
+
title_color: section.settings.title_color,
|
|
45
|
+
title: section.settings.title,
|
|
46
|
+
title_mb: section.settings.title_mb,
|
|
47
|
+
class_name: 'tw-text-center lg:tw-text-[60px] xl:tw-text-[60px]'
|
|
48
|
+
%}
|
|
49
|
+
<div class="zz-faq-list tw-mt-[30px] lg:tw-mt-[5vw] xl:tw-mt-[64px] tw-px-[16px] tw-pb-[20px] lg:tw-px-[3.75vw] lg:tw-py-[4.6875vw] xl:tw-px-[48px] xl:tw-py-[60px] tw-rounded-[10px] lg:tw-rounded-[16px]">
|
|
50
|
+
<div class="tw-daisy-join tw-daisy-join-vertical tw-w-full ">
|
|
51
|
+
{% for block in section.blocks %}
|
|
52
|
+
<div class="tw-daisy-collapse collapse-arrow tw-daisy-join-item tw-border-b tw-border-[#170B01]/15">
|
|
53
|
+
<input type="radio" name="my-accordion-{{ section.id }}" value="{{ forloop.index }}" {% if forloop.first %}checked data-last-checked="true"{% endif %} style="cursor: pointer;" />
|
|
54
|
+
<div class="tw-daisy-collapse-title tw-py-[20px] tw-pl-0 tw-pr-[40px] tw-text-[13px] lg:tw-text-[16px] tw-font-medium tw-leading-[1.5] lg:tw-leading-[30px]"
|
|
55
|
+
style="color:{{ section.settings.collapsible_title_color }}">
|
|
56
|
+
{{ block.settings.heading }}
|
|
57
|
+
</div>
|
|
58
|
+
<div class="tw-p-0 tw-pr-[40px] tw-daisy-collapse-content">
|
|
59
|
+
<div class="tw-pb-[1rem] tw-text-[13px] lg:tw-text-[16px] tw-leading-[1.5] lg:tw-leading-[30px]"
|
|
60
|
+
style="color:{{ section.settings.collapsible_content_color }}">
|
|
61
|
+
{{ block.settings.row_content }}
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
{% endfor %}
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<script>
|
|
71
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
72
|
+
const sectionEl = document.getElementById('shopify-section-{{ section.id }}');
|
|
73
|
+
if (!sectionEl) return;
|
|
74
|
+
|
|
75
|
+
// 事件委托：在 section 外层监听 click，处理内部的 radio 点击
|
|
76
|
+
const accordionName = 'my-accordion-{{ section.id }}';
|
|
77
|
+
|
|
78
|
+
// 初始化 data-last-checked（保留模板里已标注的 checked）
|
|
79
|
+
const radiosInit = sectionEl.querySelectorAll(`input[type="radio"][name="${accordionName}"]`);
|
|
80
|
+
radiosInit.forEach(r => {
|
|
81
|
+
if (r.checked) r.setAttribute('data-last-checked', 'true');
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
sectionEl.addEventListener('click', (e) => {
|
|
85
|
+
const radio = e.target.closest(`input[type="radio"][name="${accordionName}"]`);
|
|
86
|
+
if (!radio || !sectionEl.contains(radio)) return;
|
|
87
|
+
|
|
88
|
+
// 使用 click 而不是 change，以便捕获对已选中 radio 的二次点击
|
|
89
|
+
if (radio.checked && radio.getAttribute('data-last-checked') === 'true') {
|
|
90
|
+
// 二次点击收起
|
|
91
|
+
radio.checked = false;
|
|
92
|
+
radio.setAttribute('data-last-checked', 'false');
|
|
93
|
+
} else {
|
|
94
|
+
// 标记其他为未选中
|
|
95
|
+
const radios = sectionEl.querySelectorAll(`input[type="radio"][name="${accordionName}"]`);
|
|
96
|
+
radios.forEach(r => r.setAttribute('data-last-checked', 'false'));
|
|
97
|
+
radio.setAttribute('data-last-checked', 'true');
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
});
|
|
101
|
+
</script>
|
|
102
|
+
|
|
103
|
+
{% schema %}
|
|
104
|
+
{
|
|
105
|
+
"name": "ZZ FAQ",
|
|
106
|
+
"tag": "section",
|
|
107
|
+
"class": "zz-faq-section",
|
|
108
|
+
"disabled_on": {
|
|
109
|
+
"groups": ["header", "footer"]
|
|
110
|
+
},
|
|
111
|
+
"settings": [
|
|
112
|
+
{
|
|
113
|
+
"type": "color",
|
|
114
|
+
"id": "bg_color",
|
|
115
|
+
"default": "#000000",
|
|
116
|
+
"label": "背景色"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"type": "color",
|
|
120
|
+
"id": "content_bg_color",
|
|
121
|
+
"default": "#001630",
|
|
122
|
+
"label": "内容背景色"
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"type": "richtext",
|
|
126
|
+
"id": "title",
|
|
127
|
+
"label": "标题",
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"type": "richtext",
|
|
131
|
+
"id": "title_mb",
|
|
132
|
+
"label": "标题(Mobile)",
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"type": "color",
|
|
136
|
+
"id": "title_color",
|
|
137
|
+
"default": "#FFFFFF",
|
|
138
|
+
"label": "标题颜色"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"type": "select",
|
|
142
|
+
"id": "collapsible_arrow_style",
|
|
143
|
+
"label": "折叠行箭头样式",
|
|
144
|
+
"options": [
|
|
145
|
+
{ "value": "light", "label": "浅色" },
|
|
146
|
+
{ "value": "dark", "label": "深色" }
|
|
147
|
+
],
|
|
148
|
+
"default": "light"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"type": "color",
|
|
152
|
+
"id": "collapsible_title_color",
|
|
153
|
+
"label": "折叠行标题颜色",
|
|
154
|
+
"default": "#FFFFFF",
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"type": "color",
|
|
158
|
+
"id": "collapsible_content_color",
|
|
159
|
+
"label": "折叠行内容颜色",
|
|
160
|
+
"default": "#666666",
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"type": "header",
|
|
164
|
+
"content": "t:sections.all.padding.section_padding_heading"
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"type": "range",
|
|
168
|
+
"id": "padding_top",
|
|
169
|
+
"min": 0,
|
|
170
|
+
"max": 100,
|
|
171
|
+
"step": 4,
|
|
172
|
+
"unit": "px",
|
|
173
|
+
"label": "顶部填充（PC）",
|
|
174
|
+
"default": 80
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"type": "range",
|
|
178
|
+
"id": "padding_bottom",
|
|
179
|
+
"min": 0,
|
|
180
|
+
"max": 100,
|
|
181
|
+
"step": 4,
|
|
182
|
+
"unit": "px",
|
|
183
|
+
"label": "底部填充（PC）",
|
|
184
|
+
"default": 80
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"type": "range",
|
|
188
|
+
"id": "padding_top_mb",
|
|
189
|
+
"min": 0,
|
|
190
|
+
"max": 100,
|
|
191
|
+
"step": 4,
|
|
192
|
+
"unit": "px",
|
|
193
|
+
"label": "顶部填充（Mobile）",
|
|
194
|
+
"default": 24
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"type": "range",
|
|
198
|
+
"id": "padding_bottom_mb",
|
|
199
|
+
"min": 0,
|
|
200
|
+
"max": 100,
|
|
201
|
+
"step": 4,
|
|
202
|
+
"unit": "px",
|
|
203
|
+
"label": "底部填充（Mobile）",
|
|
204
|
+
"default": 48
|
|
205
|
+
}
|
|
206
|
+
],
|
|
207
|
+
"blocks": [
|
|
208
|
+
{
|
|
209
|
+
"type": "collapsible_row",
|
|
210
|
+
"name": "t:sections.collapsible_content.blocks.collapsible_row.name",
|
|
211
|
+
"settings": [
|
|
212
|
+
{
|
|
213
|
+
"type": "text",
|
|
214
|
+
"id": "heading",
|
|
215
|
+
"default": "Collapsible row",
|
|
216
|
+
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.label",
|
|
217
|
+
"info": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.info"
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
"type": "richtext",
|
|
221
|
+
"id": "row_content",
|
|
222
|
+
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.row_content.label"
|
|
223
|
+
}
|
|
224
|
+
]
|
|
225
|
+
}
|
|
226
|
+
],
|
|
227
|
+
"presets": [
|
|
228
|
+
{
|
|
229
|
+
"name": "ZZ FAQ",
|
|
230
|
+
"blocks": [
|
|
231
|
+
{
|
|
232
|
+
"type": "collapsible_row"
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
"type": "collapsible_row"
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"type": "collapsible_row"
|
|
239
|
+
}
|
|
240
|
+
]
|
|
241
|
+
}
|
|
242
|
+
]
|
|
243
|
+
}
|
|
244
|
+
{% endschema %}
|
|
@@ -282,6 +282,8 @@
|
|
|
282
282
|
});
|
|
283
283
|
}
|
|
284
284
|
|
|
285
|
+
|
|
286
|
+
|
|
285
287
|
// 初始化 Swiper
|
|
286
288
|
function initSwiper() {
|
|
287
289
|
|
|
@@ -338,6 +340,54 @@
|
|
|
338
340
|
swiper.slideToLoop(index);
|
|
339
341
|
});
|
|
340
342
|
});
|
|
343
|
+
|
|
344
|
+
const observer = new IntersectionObserver(
|
|
345
|
+
(entries) => {
|
|
346
|
+
entries.forEach((entry) => {
|
|
347
|
+
if (entry.isIntersecting) {
|
|
348
|
+
// 当 swiper-wrapper 第一次出现在视口中时执行
|
|
349
|
+
setTimeout(() => {
|
|
350
|
+
handleVideoOnSlideChange();
|
|
351
|
+
}, 200);
|
|
352
|
+
// 执行一次后取消观察
|
|
353
|
+
observer.unobserve(entry.target);
|
|
354
|
+
}
|
|
355
|
+
});
|
|
356
|
+
},
|
|
357
|
+
{
|
|
358
|
+
threshold: 0.2, // 当 20% 的元素可见时触发
|
|
359
|
+
}
|
|
360
|
+
);
|
|
361
|
+
|
|
362
|
+
if (section) {
|
|
363
|
+
observer.observe(section);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
|
|
367
|
+
function handleVideoOnSlideChange() {
|
|
368
|
+
// 暂停所有视频
|
|
369
|
+
const section = document.getElementById('shopify-section-{{section.id}}');
|
|
370
|
+
const allvideo = section.querySelectorAll('video');
|
|
371
|
+
// 播放当前 active slide 中的视频
|
|
372
|
+
const activeSlide = section.querySelector('.swiper-slide-active');
|
|
373
|
+
const media = getVisibleDisplayMedias(activeSlide);
|
|
374
|
+
if (media.type === 'video') {
|
|
375
|
+
allvideo.forEach((item) => {
|
|
376
|
+
if (item === media.video) {
|
|
377
|
+
if (media.video.paused) {
|
|
378
|
+
media.video.play();
|
|
379
|
+
}
|
|
380
|
+
} else {
|
|
381
|
+
item.pause();
|
|
382
|
+
}
|
|
383
|
+
});
|
|
384
|
+
} else if (media.type === 'image') {
|
|
385
|
+
allvideo.forEach((item) => {
|
|
386
|
+
item.pause();
|
|
387
|
+
});
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
|
|
341
391
|
}
|
|
342
392
|
|
|
343
393
|
initSwiper();
|