zz-shopify-components 0.0.21 → 0.0.22

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.
Files changed (73) hide show
  1. package/CHANGELOG.md +21 -21
  2. package/README.md +56 -56
  3. package/assets/ScrollTrigger.min.js +11 -11
  4. package/assets/gsap.min.js +11 -11
  5. package/assets/jquery.js +2 -2
  6. package/assets/lazy-video.js +2 -2
  7. package/assets/lazyload.min.js +1 -1
  8. package/assets/lozad.js +10 -10
  9. package/assets/site-jump.js +52 -52
  10. package/assets/site-jumpV2.js +35 -35
  11. package/assets/swiper-bundle.min.css +12 -12
  12. package/assets/swiper-bundle.min.js +13 -13
  13. package/assets/swiper.css +330 -330
  14. package/assets/zz-components.css +322 -322
  15. package/assets/zz-components.js +166 -166
  16. package/assets/zz-fade-in-content.js +169 -169
  17. package/blocks/zz-accessories-item.liquid +188 -188
  18. package/blocks/zz-accessories-swiper.liquid +223 -223
  19. package/blocks/zz-button.liquid +216 -216
  20. package/blocks/zz-content-description-html.liquid +201 -201
  21. package/blocks/zz-content-description.liquid +209 -209
  22. package/blocks/zz-flex-layout-bg-block.liquid +524 -524
  23. package/blocks/zz-flex-layout-block.liquid +548 -548
  24. package/blocks/zz-flex-layout-widget.liquid +321 -321
  25. package/blocks/zz-full-screen-swiper.liquid +447 -447
  26. package/blocks/zz-icon.liquid +46 -46
  27. package/blocks/zz-mail.liquid +135 -135
  28. package/blocks/zz-mb-swiper-pc-flex.liquid +273 -273
  29. package/blocks/zz-price-tag-mini.liquid +100 -106
  30. package/blocks/zz-price-tag.liquid +41 -41
  31. package/blocks/zz-ratio-image.liquid +181 -181
  32. package/blocks/zz-ratio-video.liquid +115 -115
  33. package/blocks/zz-responsive-width-image.liquid +222 -222
  34. package/blocks/zz-responsive-width-video.liquid +166 -166
  35. package/blocks/zz-scroll-animate-bg-text.liquid +268 -268
  36. package/blocks/zz-scroll-cover.liquid +67 -67
  37. package/blocks/zz-tag.liquid +50 -50
  38. package/blocks/zz-text.liquid +227 -227
  39. package/blocks/zz-title.liquid +287 -287
  40. package/blocks/zz-video-button.liquid +84 -84
  41. package/blocks/zz-video-swiper-perview-item.liquid +221 -221
  42. package/blocks/zz-video-swiper-perview.liquid +585 -585
  43. package/component.config.json +7 -7
  44. package/package.json +1 -1
  45. package/scripts/postinstall-v1.js +39 -39
  46. package/scripts/postinstall-v2.js +47 -47
  47. package/scripts/postinstall-v3.js +51 -51
  48. package/scripts/publish-npm.js +43 -43
  49. package/sections/zz-flex-layout-section.liquid +269 -269
  50. package/sections/zz-navigation-tab-v3.liquid +407 -407
  51. package/sections/zz-navigation-tab.liquid +411 -411
  52. package/sections/zz-shopping-card-list.liquid +399 -399
  53. package/sections/zz-video-collapse-swiper.liquid +522 -522
  54. package/sections/zz-video-tab-swiper.liquid +748 -748
  55. package/snippets/zz-button.liquid +70 -70
  56. package/snippets/zz-content-h3.liquid +15 -15
  57. package/snippets/zz-content-text.liquid +56 -56
  58. package/snippets/zz-h2.liquid +31 -31
  59. package/snippets/zz-h3.liquid +31 -31
  60. package/snippets/zz-h4.liquid +30 -30
  61. package/snippets/zz-h5.liquid +39 -39
  62. package/snippets/zz-h6.liquid +39 -39
  63. package/snippets/zz-icon-next.liquid +17 -17
  64. package/snippets/zz-icon-prev.liquid +17 -17
  65. package/snippets/zz-icon.liquid +74 -74
  66. package/snippets/zz-img.liquid +44 -44
  67. package/snippets/zz-prev-next-btn.liquid +62 -62
  68. package/snippets/zz-price-tag.liquid +22 -22
  69. package/snippets/zz-spoke.liquid +142 -142
  70. package/snippets/zz-tag.liquid +22 -22
  71. package/snippets/zz-video-button.liquid +54 -54
  72. package/snippets/zz-video-md.liquid +117 -117
  73. package/snippets/zz-video.liquid +117 -117
@@ -1,399 +1,399 @@
1
- {% assign block_size = section.blocks.size %}
2
- {% assign bullets_width_half = block_size
3
- | minus: 1
4
- | times: 14
5
- | plus: 6
6
- | divided_by: 2.0
7
- | ceil
8
- %}
9
- {% assign btn_offset = bullets_width_half | plus: 14 | plus: 36 %}
10
- {% assign bullets_width_half_pc = block_size
11
- | minus: 1
12
- | times: 18
13
- | plus: 6
14
- | divided_by: 2.0
15
- | ceil
16
- %}
17
- {% assign btn_offset_pc = bullets_width_half | plus: 18 | plus: 48 %}
18
-
19
- <style>
20
- #shopify-section-{{section.id}} .zz-shopping-cart-list-slides {
21
- padding: 96px 0;
22
- width: 100%;
23
- height: fit-content;
24
- background: {{ section.settings.bg_color }};
25
- letter-spacing: 0;
26
- }
27
- #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper {
28
- padding: 0 2.3438vw;
29
- }
30
- @media screen and (min-width: 1280px) {
31
- #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper {
32
- padding: 0 calc((100vw - 1220px) / 2);
33
- }
34
- }
35
-
36
- #shopify-section-{{section.id}} .banner-item {
37
- height: 424px;
38
- width: 300px;
39
- }
40
-
41
- /* Mobile styles - Keep swiper functionality */
42
- @media screen and (max-width: 1023px) {
43
- #shopify-section-{{section.id}} .zz-shopping-cart-list-slides {
44
- padding: 47px 0;
45
- }
46
- #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper {
47
- padding: 0 20px;
48
- }
49
- #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-slide {
50
- width: fit-content;
51
- height: fit-content;
52
- }
53
- #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-slide .banner-item {
54
- background: {{ section.settings.banner_bg_color }};
55
- }
56
- #shopify-section-{{section.id}} .swiper-button-next,
57
- #shopify-section-{{section.id}} .swiper-button-prev {
58
- z-index: 99;
59
- top: unset;
60
- bottom: 0;
61
- width: 36px;
62
- height: 36px;
63
- }
64
- #shopify-section-{{section.id}} .swiper-button-prev {
65
- left: 50%;
66
- transform: translate(-{{ btn_offset }}px, 0px);
67
- }
68
- #shopify-section-{{section.id}} .swiper-button-next {
69
- right: 50%;
70
- transform: translate({{ btn_offset }}px, 0px);
71
- }
72
- #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-pagination-bullets {
73
- bottom: 9px;
74
- }
75
- #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
76
- margin: 0 4px;
77
- width: 6px;
78
- height: 6px;
79
- background-color: {{ section.settings.pagination_color }};
80
- opacity: 0.5;
81
- }
82
- }
83
-
84
- /* PC styles - Grid layout instead of swiper */
85
- @media screen and (min-width: 1024px) {
86
- #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-wrapper {
87
- display: grid !important;
88
- grid-template-columns: repeat(3, 1fr);
89
- gap: 24px;
90
- transform: none !important;
91
- max-width: 1200px;
92
- margin: 0 auto;
93
- }
94
- #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-slide {
95
- width: auto !important;
96
- margin: 0 !important;
97
- height: fit-content;
98
- }
99
- #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-slide .banner-item {
100
- position: relative;
101
- height: 480px;
102
- width: 380px;
103
- background: {{ section.settings.banner_bg_color }};
104
- }
105
-
106
- /* Hide navigation elements on PC */
107
- #shopify-section-{{section.id}} .swiper-button-next,
108
- #shopify-section-{{section.id}} .swiper-button-prev,
109
- #shopify-section-{{section.id}} .swiper-pagination {
110
- display: none !important;
111
- }
112
-
113
- #shopify-section-{{section.id}} .content-title-h3 {
114
- margin: 0 auto;
115
- font-size: 60px;
116
- }
117
- }
118
-
119
- /* Common styles for navigation elements */
120
- #shopify-section-{{section.id}} .swiper-button-next:after,
121
- #shopify-section-{{section.id}} .swiper-button-prev:after {
122
- display: none;
123
- }
124
- #shopify-section-{{section.id}} .swiper-button-next.swiper-button-disabled,
125
- #shopify-section-{{section.id}} .swiper-button-prev.swiper-button-disabled {
126
- opacity: 0.5;
127
- }
128
- #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
129
- opacity: 1;
130
- }
131
- </style>
132
-
133
- <div class='zz-shopping-cart-list-slides slow-reveal'>
134
- {% if section.settings.title != blank %}
135
- <div class='tw-px-[20px] tw-mb-[32px]'>
136
- {% render 'zz-content-h3',
137
- title_color: section.settings.title_color,
138
- title: section.settings.title,
139
- class_name: 'content-title-h3 lg:tw-text-center'
140
- %}
141
- </div>
142
- {% endif %}
143
- <div class='swiper zz-shopping-cart-list-swiper'>
144
- <div class='swiper-wrapper'>
145
- {% for block in section.blocks %}
146
- <div class='swiper-slide {% if block_size > 1 %} max-lg:tw-pb-[60px] {% endif %}'>
147
- <div class='banner-item tw-rounded-[10px] lg:tw-rounded-[16px] tw-flex tw-flex-col tw-justify-between'>
148
- <div class='tw-h-[168px] lg:tw-h-[214px] tw-overflow-hidden tw-rounded-t-[10px] lg:tw-rounded-t-[16px] tw-flex-shrink-0'>
149
- {%- if block.settings.image != blank -%}
150
- {{
151
- block.settings.image
152
- | image_url: width: 915
153
- | image_tag:
154
- alt: block.settings.slide_title,
155
- class: 'lg:tw-hidden tw-w-full tw-h-auto tw-object-contain'
156
- }}
157
- {% endif %}
158
- {%- if block.settings.image_pc != blank -%}
159
- {{
160
- block.settings.image_pc
161
- | image_url: width: 640
162
- | image_tag:
163
- alt: block.settings.slide_title,
164
- class: 'max-lg:tw-hidden tw-w-full tw-h-auto tw-object-contain'
165
- }}
166
- {% endif %}
167
- </div>
168
- <div class='tw-flex tw-flex-col tw-justify-between tw-px-[16px] lg:tw-px-[20px] tw-pt-[20px] lg:tw-pt-[30px] tw-pb-[20px] lg:tw-pb-[32px] tw-grow'>
169
- <div class='tw-flex tw-flex-col tw-gap-[8px]'>
170
- <p class='slide-content tw-text-[10px] lg:tw-text-[12px] tw-leading-[1.5] tw-text-left tw-text-black'>
171
- {{ block.settings.title_prefix }}
172
- </p>
173
- <p class='slide-title tw-text-[16px] lg:tw-text-[18px] tw-leading-[1.2] tw-text-left tw-font-bold tw-text-black'>
174
- {{ block.settings.slide_title }}
175
- </p>
176
- {% if block.settings.slide_content != blank %}
177
- <div class='slide-content tw-h-[45px] lg:tw-h-[72px] tw-text-[12px] lg:tw-text-[14px] tw-leading-[1.5] tw-text-left tw-text-black'>
178
- {{ block.settings.slide_content }}
179
- </div>
180
- {% endif %}
181
- </div>
182
-
183
- <div class='tw-flex tw-justify-between tw-flex-col tw-items-start max-lg:tw-gap-[12px] lg:tw-flex-row'>
184
- {% assign product = all_products[block.settings.product] %}
185
- {% assign variant_id = block.settings.variant_id | times: 1 %}
186
- {% assign variant = product.variants
187
- | where: 'id', variant_id
188
- | first
189
- %}
190
- {% render 'zz-price-tag',
191
- price: variant.price,
192
- compare_at_price: variant.compare_at_price
193
- %}
194
- {% assign product_url = shop.url
195
- | append: product.url
196
- | append: '?variant='
197
- | append: variant.id
198
- %}
199
- {% render 'zz-button',
200
- text: block.settings.btn_text,
201
- href: product_url,
202
- type: 'primary-round',
203
- color: 'black',
204
- size: 'medium',
205
- class_name: 'tw-box-border tw-w-full lg:tw-w-auto'
206
- %}
207
- </div>
208
- </div>
209
- </div>
210
- </div>
211
- {% endfor %}
212
- </div>
213
- <!-- Navigation buttons - only show on mobile -->
214
- <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
215
- {% if section.settings.prev_icon != blank %}
216
- {{
217
- section.settings.prev_icon
218
- | image_url: width: 48
219
- | image_tag:
220
- alt: 'prev',
221
- class: 'tw-w-full tw-h-full tw-object-contain'
222
- }}
223
- {% else %}
224
- {% render 'zz-icon-prev' %}
225
- {% endif %}
226
- </div>
227
- <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
228
- {% if section.settings.next_icon != blank %}
229
- {{
230
- section.settings.next_icon
231
- | image_url: width: 48
232
- | image_tag:
233
- alt: 'next',
234
- class: 'tw-w-full tw-h-full tw-object-contain'
235
- }}
236
- {% else %}
237
- {% render 'zz-icon-next' %}
238
- {% endif %}
239
- </div>
240
-
241
- <!-- Pagination indicator - only show on mobile -->
242
- <div class='swiper-pagination'></div>
243
- </div>
244
- </div>
245
-
246
- <script>
247
- document.addEventListener('DOMContentLoaded', function () {
248
- const mobileMediaQuery = window.matchMedia('(max-width: 1023px)');
249
- let swiperInstance = null;
250
-
251
- function handleResponsiveSwiper(mediaQuery) {
252
- if (mediaQuery.matches) {
253
- // Mobile: Initialize Swiper
254
- if (!swiperInstance) {
255
- const spaceBetween = 8;
256
- swiperInstance = new Swiper(
257
- '#shopify-section-{{section.id}} .zz-shopping-cart-list-swiper',
258
- {
259
- initialSlide: 0,
260
- slidesPerView: 'auto',
261
- centeredSlides: true,
262
- spaceBetween: spaceBetween,
263
- navigation: {
264
- nextEl: '#shopify-section-{{section.id}} .swiper-button-next',
265
- prevEl: '#shopify-section-{{section.id}} .swiper-button-prev',
266
- },
267
- pagination: {
268
- el: '#shopify-section-{{section.id}} .swiper-pagination',
269
- clickable: true,
270
- },
271
- effect: 'slide',
272
- }
273
- );
274
- }
275
- } else {
276
- // PC: Destroy Swiper completely
277
- if (swiperInstance) {
278
- swiperInstance.destroy(true, true);
279
- swiperInstance = null;
280
- }
281
- }
282
- }
283
-
284
- // Initial check
285
- handleResponsiveSwiper(mobileMediaQuery);
286
-
287
- // Listen for window size changes
288
- mobileMediaQuery.addEventListener('change', handleResponsiveSwiper);
289
- });
290
- </script>
291
-
292
- {% schema %}
293
- {
294
- "name": "Shopping Card List",
295
- "settings": [
296
- {
297
- "type": "color",
298
- "id": "bg_color",
299
- "default": "#001630",
300
- "label": "背景色"
301
- },
302
- {
303
- "type": "image_picker",
304
- "id": "top_flag",
305
- "label": "顶部图标"
306
- },
307
- {
308
- "type": "richtext",
309
- "id": "title",
310
- "label": "标题"
311
- },
312
- {
313
- "type": "color",
314
- "id": "title_color",
315
- "default": "#FFFFFF",
316
- "label": "标题颜色"
317
- },
318
- {
319
- "type": "color",
320
- "id": "banner_bg_color",
321
- "default": "#0A1F38",
322
- "label": "轮播卡片背景色"
323
- },
324
- {
325
- "type": "color",
326
- "id": "pagination_color",
327
- "default": "#ffffff",
328
- "label": "轮播导航圆圈颜色"
329
- },
330
- {
331
- "type": "image_picker",
332
- "id": "prev_icon",
333
- "label": "轮播上一张图标"
334
- },
335
- {
336
- "type": "image_picker",
337
- "id": "next_icon",
338
- "label": "轮播下一张图标"
339
- }
340
- ],
341
- "blocks": [
342
- {
343
- "name": "Shopping Card",
344
- "type": "zz-shopping-card-item",
345
- "settings": [
346
- {
347
- "type": "image_picker",
348
- "id": "image_pc",
349
- "label": "Image"
350
- },
351
- {
352
- "type": "image_picker",
353
- "id": "image",
354
- "label": "Image(mobile)"
355
- },
356
- {
357
- "type": "text",
358
- "id": "title_prefix",
359
- "label": "标题前缀"
360
- },
361
- {
362
- "type": "text",
363
- "id": "slide_title",
364
- "label": "标题"
365
- },
366
- {
367
- "type": "richtext",
368
- "id": "slide_content",
369
- "label": "内容"
370
- },
371
- {
372
- "type": "text",
373
- "id": "btn_text",
374
- "label": "按钮文字",
375
- "default": "Buy Now"
376
- },
377
- {
378
- "type": "product",
379
- "id": "product",
380
- "label": "Product",
381
- "info": "选择产品"
382
- },
383
- {
384
- "type": "text",
385
- "id": "variant_id",
386
- "label": "Variant ID",
387
- "placeholder": "变体ID",
388
- "info": "输入变体ID,变体ID可以在产品编辑页面查看"
389
- }
390
- ]
391
- }
392
- ],
393
- "presets": [
394
- {
395
- "name": "Shopping Card List"
396
- }
397
- ]
398
- }
399
- {% endschema %}
1
+ {% assign block_size = section.blocks.size %}
2
+ {% assign bullets_width_half = block_size
3
+ | minus: 1
4
+ | times: 14
5
+ | plus: 6
6
+ | divided_by: 2.0
7
+ | ceil
8
+ %}
9
+ {% assign btn_offset = bullets_width_half | plus: 14 | plus: 36 %}
10
+ {% assign bullets_width_half_pc = block_size
11
+ | minus: 1
12
+ | times: 18
13
+ | plus: 6
14
+ | divided_by: 2.0
15
+ | ceil
16
+ %}
17
+ {% assign btn_offset_pc = bullets_width_half | plus: 18 | plus: 48 %}
18
+
19
+ <style>
20
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-slides {
21
+ padding: 96px 0;
22
+ width: 100%;
23
+ height: fit-content;
24
+ background: {{ section.settings.bg_color }};
25
+ letter-spacing: 0;
26
+ }
27
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper {
28
+ padding: 0 2.3438vw;
29
+ }
30
+ @media screen and (min-width: 1280px) {
31
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper {
32
+ padding: 0 calc((100vw - 1220px) / 2);
33
+ }
34
+ }
35
+
36
+ #shopify-section-{{section.id}} .banner-item {
37
+ height: 424px;
38
+ width: 300px;
39
+ }
40
+
41
+ /* Mobile styles - Keep swiper functionality */
42
+ @media screen and (max-width: 1023px) {
43
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-slides {
44
+ padding: 47px 0;
45
+ }
46
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper {
47
+ padding: 0 20px;
48
+ }
49
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-slide {
50
+ width: fit-content;
51
+ height: fit-content;
52
+ }
53
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-slide .banner-item {
54
+ background: {{ section.settings.banner_bg_color }};
55
+ }
56
+ #shopify-section-{{section.id}} .swiper-button-next,
57
+ #shopify-section-{{section.id}} .swiper-button-prev {
58
+ z-index: 99;
59
+ top: unset;
60
+ bottom: 0;
61
+ width: 36px;
62
+ height: 36px;
63
+ }
64
+ #shopify-section-{{section.id}} .swiper-button-prev {
65
+ left: 50%;
66
+ transform: translate(-{{ btn_offset }}px, 0px);
67
+ }
68
+ #shopify-section-{{section.id}} .swiper-button-next {
69
+ right: 50%;
70
+ transform: translate({{ btn_offset }}px, 0px);
71
+ }
72
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-pagination-bullets {
73
+ bottom: 9px;
74
+ }
75
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
76
+ margin: 0 4px;
77
+ width: 6px;
78
+ height: 6px;
79
+ background-color: {{ section.settings.pagination_color }};
80
+ opacity: 0.5;
81
+ }
82
+ }
83
+
84
+ /* PC styles - Grid layout instead of swiper */
85
+ @media screen and (min-width: 1024px) {
86
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-wrapper {
87
+ display: grid !important;
88
+ grid-template-columns: repeat(3, 1fr);
89
+ gap: 24px;
90
+ transform: none !important;
91
+ max-width: 1200px;
92
+ margin: 0 auto;
93
+ }
94
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-slide {
95
+ width: auto !important;
96
+ margin: 0 !important;
97
+ height: fit-content;
98
+ }
99
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-slide .banner-item {
100
+ position: relative;
101
+ height: 480px;
102
+ width: 380px;
103
+ background: {{ section.settings.banner_bg_color }};
104
+ }
105
+
106
+ /* Hide navigation elements on PC */
107
+ #shopify-section-{{section.id}} .swiper-button-next,
108
+ #shopify-section-{{section.id}} .swiper-button-prev,
109
+ #shopify-section-{{section.id}} .swiper-pagination {
110
+ display: none !important;
111
+ }
112
+
113
+ #shopify-section-{{section.id}} .content-title-h3 {
114
+ margin: 0 auto;
115
+ font-size: 60px;
116
+ }
117
+ }
118
+
119
+ /* Common styles for navigation elements */
120
+ #shopify-section-{{section.id}} .swiper-button-next:after,
121
+ #shopify-section-{{section.id}} .swiper-button-prev:after {
122
+ display: none;
123
+ }
124
+ #shopify-section-{{section.id}} .swiper-button-next.swiper-button-disabled,
125
+ #shopify-section-{{section.id}} .swiper-button-prev.swiper-button-disabled {
126
+ opacity: 0.5;
127
+ }
128
+ #shopify-section-{{section.id}} .zz-shopping-cart-list-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
129
+ opacity: 1;
130
+ }
131
+ </style>
132
+
133
+ <div class='zz-shopping-cart-list-slides slow-reveal'>
134
+ {% if section.settings.title != blank %}
135
+ <div class='tw-px-[20px] tw-mb-[32px]'>
136
+ {% render 'zz-content-h3',
137
+ title_color: section.settings.title_color,
138
+ title: section.settings.title,
139
+ class_name: 'content-title-h3 lg:tw-text-center'
140
+ %}
141
+ </div>
142
+ {% endif %}
143
+ <div class='swiper zz-shopping-cart-list-swiper'>
144
+ <div class='swiper-wrapper'>
145
+ {% for block in section.blocks %}
146
+ <div class='swiper-slide {% if block_size > 1 %} max-lg:tw-pb-[60px] {% endif %}'>
147
+ <div class='banner-item tw-rounded-[10px] lg:tw-rounded-[16px] tw-flex tw-flex-col tw-justify-between'>
148
+ <div class='tw-h-[168px] lg:tw-h-[214px] tw-overflow-hidden tw-rounded-t-[10px] lg:tw-rounded-t-[16px] tw-flex-shrink-0'>
149
+ {%- if block.settings.image != blank -%}
150
+ {{
151
+ block.settings.image
152
+ | image_url: width: 915
153
+ | image_tag:
154
+ alt: block.settings.slide_title,
155
+ class: 'lg:tw-hidden tw-w-full tw-h-auto tw-object-contain'
156
+ }}
157
+ {% endif %}
158
+ {%- if block.settings.image_pc != blank -%}
159
+ {{
160
+ block.settings.image_pc
161
+ | image_url: width: 640
162
+ | image_tag:
163
+ alt: block.settings.slide_title,
164
+ class: 'max-lg:tw-hidden tw-w-full tw-h-auto tw-object-contain'
165
+ }}
166
+ {% endif %}
167
+ </div>
168
+ <div class='tw-flex tw-flex-col tw-justify-between tw-px-[16px] lg:tw-px-[20px] tw-pt-[20px] lg:tw-pt-[30px] tw-pb-[20px] lg:tw-pb-[32px] tw-grow'>
169
+ <div class='tw-flex tw-flex-col tw-gap-[8px]'>
170
+ <p class='slide-content tw-text-[10px] lg:tw-text-[12px] tw-leading-[1.5] tw-text-left tw-text-black'>
171
+ {{ block.settings.title_prefix }}
172
+ </p>
173
+ <p class='slide-title tw-text-[16px] lg:tw-text-[18px] tw-leading-[1.2] tw-text-left tw-font-bold tw-text-black'>
174
+ {{ block.settings.slide_title }}
175
+ </p>
176
+ {% if block.settings.slide_content != blank %}
177
+ <div class='slide-content tw-h-[45px] lg:tw-h-[72px] tw-text-[12px] lg:tw-text-[14px] tw-leading-[1.5] tw-text-left tw-text-black'>
178
+ {{ block.settings.slide_content }}
179
+ </div>
180
+ {% endif %}
181
+ </div>
182
+
183
+ <div class='tw-flex tw-justify-between tw-flex-col tw-items-start max-lg:tw-gap-[12px] lg:tw-flex-row'>
184
+ {% assign product = all_products[block.settings.product] %}
185
+ {% assign variant_id = block.settings.variant_id | times: 1 %}
186
+ {% assign variant = product.variants
187
+ | where: 'id', variant_id
188
+ | first
189
+ %}
190
+ {% render 'zz-price-tag',
191
+ price: variant.price,
192
+ compare_at_price: variant.compare_at_price
193
+ %}
194
+ {% assign product_url = shop.url
195
+ | append: product.url
196
+ | append: '?variant='
197
+ | append: variant.id
198
+ %}
199
+ {% render 'zz-button',
200
+ text: block.settings.btn_text,
201
+ href: product_url,
202
+ type: 'primary-round',
203
+ color: 'black',
204
+ size: 'medium',
205
+ class_name: 'tw-box-border tw-w-full lg:tw-w-auto'
206
+ %}
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ {% endfor %}
212
+ </div>
213
+ <!-- Navigation buttons - only show on mobile -->
214
+ <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
215
+ {% if section.settings.prev_icon != blank %}
216
+ {{
217
+ section.settings.prev_icon
218
+ | image_url: width: 48
219
+ | image_tag:
220
+ alt: 'prev',
221
+ class: 'tw-w-full tw-h-full tw-object-contain'
222
+ }}
223
+ {% else %}
224
+ {% render 'zz-icon-prev' %}
225
+ {% endif %}
226
+ </div>
227
+ <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
228
+ {% if section.settings.next_icon != blank %}
229
+ {{
230
+ section.settings.next_icon
231
+ | image_url: width: 48
232
+ | image_tag:
233
+ alt: 'next',
234
+ class: 'tw-w-full tw-h-full tw-object-contain'
235
+ }}
236
+ {% else %}
237
+ {% render 'zz-icon-next' %}
238
+ {% endif %}
239
+ </div>
240
+
241
+ <!-- Pagination indicator - only show on mobile -->
242
+ <div class='swiper-pagination'></div>
243
+ </div>
244
+ </div>
245
+
246
+ <script>
247
+ document.addEventListener('DOMContentLoaded', function () {
248
+ const mobileMediaQuery = window.matchMedia('(max-width: 1023px)');
249
+ let swiperInstance = null;
250
+
251
+ function handleResponsiveSwiper(mediaQuery) {
252
+ if (mediaQuery.matches) {
253
+ // Mobile: Initialize Swiper
254
+ if (!swiperInstance) {
255
+ const spaceBetween = 8;
256
+ swiperInstance = new Swiper(
257
+ '#shopify-section-{{section.id}} .zz-shopping-cart-list-swiper',
258
+ {
259
+ initialSlide: 0,
260
+ slidesPerView: 'auto',
261
+ centeredSlides: true,
262
+ spaceBetween: spaceBetween,
263
+ navigation: {
264
+ nextEl: '#shopify-section-{{section.id}} .swiper-button-next',
265
+ prevEl: '#shopify-section-{{section.id}} .swiper-button-prev',
266
+ },
267
+ pagination: {
268
+ el: '#shopify-section-{{section.id}} .swiper-pagination',
269
+ clickable: true,
270
+ },
271
+ effect: 'slide',
272
+ }
273
+ );
274
+ }
275
+ } else {
276
+ // PC: Destroy Swiper completely
277
+ if (swiperInstance) {
278
+ swiperInstance.destroy(true, true);
279
+ swiperInstance = null;
280
+ }
281
+ }
282
+ }
283
+
284
+ // Initial check
285
+ handleResponsiveSwiper(mobileMediaQuery);
286
+
287
+ // Listen for window size changes
288
+ mobileMediaQuery.addEventListener('change', handleResponsiveSwiper);
289
+ });
290
+ </script>
291
+
292
+ {% schema %}
293
+ {
294
+ "name": "Shopping Card List",
295
+ "settings": [
296
+ {
297
+ "type": "color",
298
+ "id": "bg_color",
299
+ "default": "#001630",
300
+ "label": "背景色"
301
+ },
302
+ {
303
+ "type": "image_picker",
304
+ "id": "top_flag",
305
+ "label": "顶部图标"
306
+ },
307
+ {
308
+ "type": "richtext",
309
+ "id": "title",
310
+ "label": "标题"
311
+ },
312
+ {
313
+ "type": "color",
314
+ "id": "title_color",
315
+ "default": "#FFFFFF",
316
+ "label": "标题颜色"
317
+ },
318
+ {
319
+ "type": "color",
320
+ "id": "banner_bg_color",
321
+ "default": "#0A1F38",
322
+ "label": "轮播卡片背景色"
323
+ },
324
+ {
325
+ "type": "color",
326
+ "id": "pagination_color",
327
+ "default": "#ffffff",
328
+ "label": "轮播导航圆圈颜色"
329
+ },
330
+ {
331
+ "type": "image_picker",
332
+ "id": "prev_icon",
333
+ "label": "轮播上一张图标"
334
+ },
335
+ {
336
+ "type": "image_picker",
337
+ "id": "next_icon",
338
+ "label": "轮播下一张图标"
339
+ }
340
+ ],
341
+ "blocks": [
342
+ {
343
+ "name": "Shopping Card",
344
+ "type": "zz-shopping-card-item",
345
+ "settings": [
346
+ {
347
+ "type": "image_picker",
348
+ "id": "image_pc",
349
+ "label": "Image"
350
+ },
351
+ {
352
+ "type": "image_picker",
353
+ "id": "image",
354
+ "label": "Image(mobile)"
355
+ },
356
+ {
357
+ "type": "text",
358
+ "id": "title_prefix",
359
+ "label": "标题前缀"
360
+ },
361
+ {
362
+ "type": "text",
363
+ "id": "slide_title",
364
+ "label": "标题"
365
+ },
366
+ {
367
+ "type": "richtext",
368
+ "id": "slide_content",
369
+ "label": "内容"
370
+ },
371
+ {
372
+ "type": "text",
373
+ "id": "btn_text",
374
+ "label": "按钮文字",
375
+ "default": "Buy Now"
376
+ },
377
+ {
378
+ "type": "product",
379
+ "id": "product",
380
+ "label": "Product",
381
+ "info": "选择产品"
382
+ },
383
+ {
384
+ "type": "text",
385
+ "id": "variant_id",
386
+ "label": "Variant ID",
387
+ "placeholder": "变体ID",
388
+ "info": "输入变体ID,变体ID可以在产品编辑页面查看"
389
+ }
390
+ ]
391
+ }
392
+ ],
393
+ "presets": [
394
+ {
395
+ "name": "Shopping Card List"
396
+ }
397
+ ]
398
+ }
399
+ {% endschema %}