zz-shopify-components 0.36.0 → 0.36.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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/sections/zz-swiper-banner.liquid +471 -356
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zz-shopify-components",
3
- "version": "0.36.0",
3
+ "version": "0.36.1-beta.0",
4
4
  "description": "Reusable Shopify components for theme projects",
5
5
  "keywords": [
6
6
  "shopify",
package/sections/zz-swiper-banner.liquid CHANGED
@@ -3,14 +3,16 @@
3
3
  {% endcomment %}
4
4
 
5
5
  <style>
6
- #shopify-section-{{section.id}} {
7
- padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
8
- padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
9
- }
6
+
10
7
  #shopify-section-{{section.id}} .swiper-banner-video-img p {
11
8
  margin: 0;
12
9
  }
13
10
 
11
+ #shopify-section-{{section.id}} .zz-banner-btn, #shopify-section-{{section.id}} .zz-banner-btn-two {
12
+ display: flex;
13
+ align-items: center;
14
+ justify-content: center;
15
+ }
14
16
  #shopify-section-{{section.id}} .swiper-pagination {
15
17
  display: flex;
16
18
  justify-content: center;
@@ -28,7 +30,7 @@
28
30
  }
29
31
  #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet {
30
32
  position: relative;
31
- width: 180px;
33
+ width: 170px;
32
34
  background: none;
33
35
  height: 36px;
34
36
  opacity: 1;
@@ -62,12 +64,6 @@
62
64
  width: 180px;
63
65
 
64
66
  }
65
- {% comment %} #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet-active .progress-bar-title {
66
- display: block;
67
- opacity: 1;
68
- visibility: visible;
69
- transform: translateY(0);
70
- } {% endcomment %}
71
67
  #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet:hover .progress-bar-title {
72
68
  display: block;
73
69
  opacity: 1;
@@ -94,6 +90,38 @@
94
90
  #shopify-section-{{section.id}} .swiper-banner-video-img.dark-theme .progress-bar-title {
95
91
  color: #2D2D2D;
96
92
  }
93
+ #shopify-section-{{section.id}} .discount_sale_type .banner-title {
94
+ font-size: 24px;
95
+ line-height: 1.3;
96
+ margin-bottom: 16px;
97
+ }
98
+ #shopify-section-{{section.id}} .discount_sale_type .banner-description {
99
+ font-size: 24px;
100
+ line-height: 1.3;
101
+ font-weight: 400;
102
+ }
103
+ #shopify-section-{{section.id}} .product_type .banner-description {
104
+ font-size: 28px;
105
+ line-height: 1.3;
106
+ font-weight: 500;
107
+ }
108
+
109
+ #shopify-section-{{section.id}} .title_description_type .banner-title {
110
+ {% if section.settings.site == 'central' %}
111
+ font-size: 48px;
112
+ {% else %}
113
+ font-size: 40px;
114
+ {% endif %}
115
+ margin-bottom: 20px;
116
+ }
117
+ #shopify-section-{{section.id}} .title_description_type .banner-description {
118
+ font-weight: 500;
119
+ {% if section.settings.site == 'central' %}
120
+ font-size: 28px;
121
+ {% else %}
122
+ font-size: 20px;
123
+ {% endif %}
124
+ }
97
125
 
98
126
  }
99
127
  @media (min-width: 1340px) {
@@ -101,10 +129,10 @@
101
129
  width: 1220px;
102
130
  }
103
131
  #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet {
104
- width: 214px;
132
+ width: 200px;
105
133
  }
106
134
  #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet-active {
107
- width: 214px;
135
+ width: 200px;
108
136
 
109
137
  }
110
138
 
@@ -223,8 +251,32 @@
223
251
  background-color: #2D2D2D !important;
224
252
  }
225
253
 
254
+ #shopify-section-{{section.id}} .discount_sale_type .banner-title {
255
+ font-size: 1.6rem;
256
+ line-height: 1.2;
257
+ margin-bottom: 0.4rem;
258
+ }
259
+ #shopify-section-{{section.id}} .discount_sale_type .banner-description{
260
+ font-size: 1.4rem;
261
+ line-height: 1.3;
262
+ font-weight: 400;
263
+ }
264
+ #shopify-section-{{section.id}} .product_type .banner-description {
265
+ font-size: 1.8rem;
266
+ line-height: 1.3;
267
+ font-weight: 500;
268
+ }
226
269
 
227
-
270
+ #shopify-section-{{section.id}} .title_description_type .banner-title {
271
+ font-size: 2.8rem;
272
+ line-height: 1.2;
273
+ margin-bottom: 8px;
274
+ }
275
+ #shopify-section-{{section.id}} .title_description_type .banner-description {
276
+ font-weight: 500;
277
+ font-size: 1.8rem;
278
+ line-height: 1.5;
279
+ }
228
280
 
229
281
  }
230
282
  </style>
@@ -249,26 +301,6 @@
249
301
  ],
250
302
  "default": "central"
251
303
  },
252
- {
253
- "type": "range",
254
- "id": "padding_top",
255
- "min": 0,
256
- "max": 100,
257
- "step": 4,
258
- "unit": "px",
259
- "label": "t:sections.all.padding.padding_top",
260
- "default": 0
261
- },
262
- {
263
- "type": "range",
264
- "id": "padding_bottom",
265
- "min": 0,
266
- "max": 100,
267
- "step": 4,
268
- "unit": "px",
269
- "label": "t:sections.all.padding.padding_bottom",
270
- "default": 0
271
- },
272
304
  {
273
305
  "type": "text",
274
306
  "id": "module_id",
@@ -305,6 +337,44 @@
305
337
  ],
306
338
  "default": "light"
307
339
  },
340
+ {
341
+ "type": "select",
342
+ "id": "banner_type",
343
+ "label": "banner类型",
344
+ "options": [
345
+ {
346
+ "value": "product_type",
347
+ "label": "产品模式"
348
+ },
349
+ {
350
+ "value": "discount_sale_type",
351
+ "label": "营销折扣模式"
352
+ },
353
+ {
354
+ "value": "image_type",
355
+ "label": "图文模式，文案部分在图上"
356
+ },
357
+ {
358
+ "value": "title_description_type",
359
+ "label": "标题描述模式"
360
+ },
361
+ {
362
+ "value": "full-image_type",
363
+ "label": "纯图模式"
364
+ },
365
+ ],
366
+ "default": "product_type"
367
+ },
368
+ {
369
+ "type": "image_picker",
370
+ "id": "banner",
371
+ "label": "Banner PC"
372
+ },
373
+ {
374
+ "type": "image_picker",
375
+ "id": "banner_mb",
376
+ "label": "Banner Mobile"
377
+ },
308
378
  {
309
379
  "type": "text",
310
380
  "id": "progress_text",
@@ -316,92 +386,52 @@
316
386
  "id": "banner_name",
317
387
  "label": "Banner name",
318
388
  "default": "default_name",
319
- "info": "用于埋点统计，英文下划线连接单词，banner_name_1"
320
- },
321
- {
322
- "type": "select",
323
- "id": "desc_text_type",
324
- "label": "描述文字类型",
325
- "options": [
326
-
327
- {
328
- "value": "text",
329
- "label": "文字，需要填写大小标题"
330
- },
331
- {
332
- "value": "image",
333
- "label": "图片，需要传标题图片"
334
- },
335
- ],
336
- "default": "text"
389
+ "info": "用于埋点统计，英文下划线连接单词，banner_name-id。后缀加-id。"
337
390
  },
338
391
  {
339
392
  "type": "image_picker",
340
- "id": "banner_logo",
341
- "label": "大标题上的logo",
342
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}",
343
- "info": "标题上无logo可以不上传，高度PC:22px, Mobile:14px"
393
+ "id": "product_logo",
394
+ "label": "产品logo PC",
395
+ "visible_if": "{{ block.settings.banner_type == 'product_type' }}",
396
+ "info": "产品logo,PC 高度固定52px"
344
397
  },
345
398
  {
346
- "type": "select",
347
- "id": "logo_type",
348
- "label": "logo类型",
349
- "options": [
350
-
351
- {
352
- "value": "small",
353
- "label": "小产品logo"
354
- },
355
- {
356
- "value": "irregular",
357
- "label": "异形 logo"
358
- },
359
- ],
360
- "default": "small",
361
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}",
399
+ "type": "image_picker",
400
+ "id": "product_logo_mb",
401
+ "label": "产品logo Mobile",
402
+ "visible_if": "{{ block.settings.banner_type == 'product_type' }}",
403
+ "info": "产品logo, Mobile 宽度固定335px"
362
404
  },
363
-
364
405
  {
365
406
  "type": "richtext",
366
407
  "id": "title",
367
- "label": "大标题",
368
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
408
+ "label": "标题",
409
+ "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
369
410
  },
370
411
  {
371
412
  "type": "richtext",
372
413
  "id": "title_mb",
373
- "label": "大标题 Mobile",
374
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
414
+ "label": "标题 Mobile",
415
+ "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
375
416
  },
376
417
  {
377
- "type": "richtext",
378
- "id": "subtitle",
379
- "label": "小标题",
380
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
418
+ "type": "text",
419
+ "id": "discount_text",
420
+ "label": "折扣",
421
+ "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' }}",
422
+ "info": "折扣，如：90,会显示UP TO 90% OFF"
381
423
  },
382
424
  {
383
425
  "type": "richtext",
384
- "id": "subtitle_mb",
385
- "label": "小标题 Mobile",
386
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
426
+ "id": "description",
427
+ "label": "描述",
428
+ "visible_if": "{{ block.settings.banner_type == 'product_type' or block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
387
429
  },
388
430
  {
389
- "type": "select",
390
- "id": "title_type",
391
- "label": "标题展示方式",
392
- "options": [
393
-
394
- {
395
- "value": "position",
396
- "label": "固定宽度"
397
- },
398
- {
399
- "value": "breakline",
400
- "label": "根据换行"
401
- },
402
- ],
403
- "default": "position",
404
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}",
431
+ "type": "richtext",
432
+ "id": "description_mb",
433
+ "label": "描述 Mobile",
434
+ "visible_if": "{{ block.settings.banner_type == 'product_type' or block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
405
435
  },
406
436
  {
407
437
  "type": "color",
@@ -409,64 +439,59 @@
409
439
  "label": "Text Color",
410
440
  "info": "文本颜色",
411
441
  "default": "#ffffff",
412
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
442
+ "visible_if": "{{ block.settings.banner_type == 'product_type' or block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
413
443
  },
414
444
  {
415
445
  "type": "image_picker",
416
446
  "id": "banner_desc",
417
447
  "label": "Banner上悬浮标题图",
418
- "visible_if": "{{ block.settings.desc_text_type == 'image' }}",
448
+ "visible_if": "{{ block.settings.banner_type == 'image_type' }}",
419
449
  "info": "PC 端宽度 560px"
420
450
  },
421
451
  {
422
452
  "type": "image_picker",
423
453
  "id": "banner_desc_mb",
424
454
  "label": "Banner上悬浮标题图 Mobile",
425
- "visible_if": "{{ block.settings.desc_text_type == 'image' }}"
426
- },
427
-
428
- {
429
- "type": "number",
430
- "id": "top_mb",
431
- "default": 90,
432
- "label": "移动端顶部距离",
433
- "info": "移动端文案距离顶部距离 单位PX"
434
- },
435
- {
436
- "type": "image_picker",
437
- "id": "banner",
438
- "label": "Banner PC"
439
- },
440
- {
441
- "type": "image_picker",
442
- "id": "banner_mb",
443
- "label": "Banner Mobile"
455
+ "visible_if": "{{ block.settings.banner_type == 'image_type' }}"
444
456
  },
445
457
  {
446
- "type": "checkbox",
447
- "id": "need_btn",
448
- "label": "是否需要按钮",
449
- "default": true,
450
- "info": "无按钮，设置banner链接"
458
+ "type": "select",
459
+ "id": "btn_type",
460
+ "label": "按钮类型",
461
+ "options": [
462
+ {
463
+ "value": "none",
464
+ "label": "无按钮，设置banner链接"
465
+ },
466
+ {
467
+ "value": "one",
468
+ "label": "一个按钮"
469
+ },
470
+ {
471
+ "value": "two",
472
+ "label": "两个按钮"
473
+ },
474
+ ],
475
+ "default": "none"
451
476
  },
452
477
  {
453
478
  "type": "textarea",
454
479
  "id": "linksbanner",
455
- "label": "Sites Link Map banner",
456
- "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ ",
457
- "visible_if": "{{ block.settings.need_btn == false }}"
480
+ "label": "Banner Sites Link Map",
481
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接。示例: Canada: https://hoverair.com/ 回车 default: https://hoverair.com/ ",
482
+ "visible_if": "{{ block.settings.btn_type == 'none' }}"
458
483
  },
459
484
  {
460
485
  "type": "text",
461
486
  "id": "btn_text",
462
- "label": "按钮文字",
487
+ "label": "按钮一文字",
463
488
  "default": "Learn more",
464
- "visible_if": "{{ block.settings.need_btn == true }}"
489
+ "visible_if": "{{ block.settings.btn_type == 'one' or block.settings.btn_type == 'two' }}"
465
490
  },
466
491
  {
467
492
  "type": "select",
468
493
  "id": "function_type",
469
- "label": "按钮功能类型",
494
+ "label": "按钮一功能类型",
470
495
  "options": [
471
496
  {
472
497
  "value": "link",
@@ -478,46 +503,74 @@
478
503
  },
479
504
  ],
480
505
  "default": "link",
481
- "visible_if": "{{ block.settings.need_btn == true }}"
506
+ "visible_if": "{{ block.settings.btn_type == 'one' or block.settings.btn_type == 'two' }}"
482
507
  },
483
508
  {
484
509
  "type": "textarea",
485
510
  "id": "links",
486
- "label": "Sites Link Map",
487
- "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ ",
488
- "visible_if": "{{ block.settings.function_type == 'link_map' and block.settings.need_btn == true }}"
511
+ "label": "按钮一 Sites Link Map",
512
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接。示例: Canada: https://hoverair.com/ 回车 default: https://hoverair.com/ ",
513
+ "visible_if": "{{ block.settings.function_type == 'link_map' and block.settings.btn_type != 'none'}}"
489
514
  },
490
515
  {
491
516
  "type": "url",
492
517
  "id": "link",
493
- "label": "Normal Button Link",
494
- "info": "普通按钮跳转地址",
495
- "visible_if": "{{ block.settings.function_type == 'link' and block.settings.need_btn == true }}"
496
- },
497
- {
498
- "type": "color",
499
- "id": "btn_border_color",
500
- "label": "Button Border Color",
501
- "info": "按钮的边框颜色",
502
- "default": "#F5F5F5",
503
- "visible_if": "{{ block.settings.need_btn == true }}"
518
+ "label": "按钮一跳转地址",
519
+ "info": "按钮跳转地址",
520
+ "visible_if": "{{ block.settings.function_type == 'link' and block.settings.btn_type != 'none'}}"
504
521
  },
505
522
  {
506
523
  "type": "color",
507
524
  "id": "btn_background_color",
508
- "label": "Button Background Color",
509
- "info": "按钮的背景颜色",
510
- "default": "#F5F5F5",
511
- "visible_if": "{{ block.settings.need_btn == true }}"
525
+ "label": "按钮一背景颜色",
526
+ "default": "#FFFFFF",
527
+ "visible_if": "{{ block.settings.btn_type != 'none' }}"
512
528
  },
513
529
  {
514
530
  "type": "color",
515
531
  "id": "btn_color",
516
- "label": "Button Text Color",
517
- "info": "按钮的文本颜色",
532
+ "label": "按钮一文字颜色",
518
533
  "default": "#2D2D2D",
519
- "visible_if": "{{ block.settings.need_btn == true }}"
520
- }
534
+ "visible_if": "{{ block.settings.btn_type != 'none' }}"
535
+ },
536
+ {
537
+ "type": "text",
538
+ "id": "btn_text_two",
539
+ "label": "按钮二文字",
540
+ "default": "Learn more",
541
+ "visible_if": "{{ block.settings.btn_type == 'two' }}"
542
+ },
543
+ {
544
+ "type": "select",
545
+ "id": "function_type_two",
546
+ "label": "按钮二功能类型",
547
+ "options": [
548
+ {
549
+ "value": "link",
550
+ "label": "链接"
551
+ },
552
+ {
553
+ "value": "link_map",
554
+ "label": "多国家映射"
555
+ },
556
+ ],
557
+ "default": "link",
558
+ "visible_if": "{{ block.settings.btn_type == 'two' }}"
559
+ },
560
+ {
561
+ "type": "textarea",
562
+ "id": "links_two",
563
+ "label": "按钮二 Sites Link Map",
564
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开(冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接。示例: Canada: https://hoverair.com/ 换行 default: https://hoverair.com/ ",
565
+ "visible_if": "{{ block.settings.function_type_two == 'link_map' and block.settings.btn_type == 'two'}}"
566
+ },
567
+ {
568
+ "type": "url",
569
+ "id": "link_two",
570
+ "label": "按钮二跳转地址",
571
+ "info": "按钮跳转地址",
572
+ "visible_if": "{{ block.settings.function_type_two == 'link' and block.settings.btn_type == 'two'}}"
573
+ },
521
574
  ]
522
575
  },
523
576
  {
@@ -538,7 +591,64 @@
538
591
  "value": "light",
539
592
  "label": "Light"
540
593
  }
541
- ]
594
+ ],
595
+ "default": "light"
596
+ },
597
+ {
598
+ "type": "select",
599
+ "id": "banner_type",
600
+ "label": "banner类型",
601
+ "options": [
602
+ {
603
+ "value": "product_type",
604
+ "label": "产品模式"
605
+ },
606
+ {
607
+ "value": "discount_sale_type",
608
+ "label": "营销折扣模式"
609
+ },
610
+ {
611
+ "value": "image_type",
612
+ "label": "图文模式，文案部分在图上"
613
+ },
614
+ {
615
+ "value": "title_description_type",
616
+ "label": "标题描述模式"
617
+ },
618
+ {
619
+ "value": "full-image_type",
620
+ "label": "纯图模式"
621
+ },
622
+ ],
623
+ "default": "product_type"
624
+ },
625
+ {
626
+ "type": "video",
627
+ "id": "video_pc",
628
+ "label": "video_pc",
629
+ "info": "pc端的视频"
630
+ },
631
+ {
632
+ "type": "text",
633
+ "id": "video_pc_url",
634
+ "label": "video_pc_url",
635
+ "info": "pc段的视频链接"
636
+ },
637
+ {
638
+ "type": "image_picker",
639
+ "id": "posterPc",
640
+ "label": "poster Pc"
641
+ },
642
+ {
643
+ "type": "video",
644
+ "id": "video_mobile",
645
+ "label": "video_mobile",
646
+ "info": "mobile端的视频"
647
+ },
648
+ {
649
+ "type": "image_picker",
650
+ "id": "posterMb",
651
+ "label": "poster Mb"
542
652
  },
543
653
  {
544
654
  "type": "text",
@@ -551,181 +661,112 @@
551
661
  "id": "banner_name",
552
662
  "label": "Banner name",
553
663
  "default": "default_name",
554
- "info": "用于埋点统计，英文下划线连接单词，banner_name_1"
664
+ "info": "用于埋点统计，英文下划线连接单词，banner_name-id。后缀加-id。"
555
665
  },
556
666
  {
557
- "type": "select",
558
- "id": "desc_text_type",
559
- "label": "描述文字类型",
560
- "options": [
561
-
562
- {
563
- "value": "text",
564
- "label": "文字，需要填写大小标题"
565
- },
566
- {
567
- "value": "image",
568
- "label": "图片，需要传标题图片"
569
- },
570
- ],
571
- "default": "text"
572
- },
573
- {
574
667
  "type": "image_picker",
575
- "id": "banner_logo",
576
- "label": "大标题上的logo",
577
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}",
578
- "info": "标题上无logo可以不上传，高度PC:22px, Mobile:14px"
668
+ "id": "product_logo",
669
+ "label": "产品logo PC",
670
+ "visible_if": "{{ block.settings.banner_type == 'product_type' }}",
671
+ "info": "产品logo,PC 高度固定52px"
579
672
  },
580
- {
581
- "type": "select",
582
- "id": "logo_type",
583
- "label": "logo类型",
584
- "options": [
585
-
586
- {
587
- "value": "small",
588
- "label": "小产品logo"
589
- },
590
- {
591
- "value": "irregular",
592
- "label": "异形 logo"
593
- },
594
- ],
595
- "default": "small",
596
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}",
673
+ {
674
+ "type": "image_picker",
675
+ "id": "product_logo_mb",
676
+ "label": "产品logo Mobile",
677
+ "visible_if": "{{ block.settings.banner_type == 'product_type' }}",
678
+ "info": "产品logo, Mobile 宽度固定335px"
597
679
  },
598
680
  {
599
681
  "type": "richtext",
600
682
  "id": "title",
601
- "label": "大标题",
602
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
683
+ "label": "标题",
684
+ "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
603
685
  },
604
686
  {
605
687
  "type": "richtext",
606
688
  "id": "title_mb",
607
- "label": "大标题 Mobile",
608
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
689
+ "label": "标题 Mobile",
690
+ "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}",
609
691
  },
610
692
  {
611
- "type": "richtext",
612
- "id": "subtitle",
613
- "label": "小标题",
614
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
693
+ "type": "text",
694
+ "id": "discount_text",
695
+ "label": "折扣",
696
+ "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' }}",
697
+ "info": "折扣，如：90,会显示UP TO 90% OFF"
615
698
  },
616
699
  {
617
700
  "type": "richtext",
618
- "id": "subtitle_mb",
619
- "label": "小标题 Mobile",
620
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
701
+ "id": "description",
702
+ "label": "描述",
703
+ "visible_if": "{{ block.settings.banner_type == 'product_type' or block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
621
704
  },
622
705
  {
623
- "type": "select",
624
- "id": "title_type",
625
- "label": "标题展示方式",
626
- "options": [
627
-
628
- {
629
- "value": "position",
630
- "label": "固定宽度"
631
- },
632
- {
633
- "value": "breakline",
634
- "label": "根据换行"
635
- },
636
- ],
637
- "default": "position",
638
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}",
706
+ "type": "richtext",
707
+ "id": "description_mb",
708
+ "label": "描述 Mobile",
709
+ "visible_if": "{{ block.settings.banner_type == 'product_type' or block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
639
710
  },
640
-
641
711
  {
642
712
  "type": "color",
643
713
  "id": "color",
644
714
  "label": "Text Color",
645
715
  "info": "文本颜色",
646
716
  "default": "#ffffff",
647
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
717
+ "visible_if": "{{ block.settings.banner_type == 'product_type' or block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
648
718
  },
649
719
  {
650
720
  "type": "image_picker",
651
721
  "id": "banner_desc",
652
722
  "label": "Banner上悬浮标题图",
653
- "visible_if": "{{ block.settings.desc_text_type == 'image' }}",
723
+ "visible_if": "{{ block.settings.banner_type == 'image_type' }}",
654
724
  "info": "PC 端宽度 560px"
655
725
  },
656
726
  {
657
727
  "type": "image_picker",
658
728
  "id": "banner_desc_mb",
659
729
  "label": "Banner上悬浮标题图 Mobile",
660
- "visible_if": "{{ block.settings.desc_text_type == 'image' }}"
661
- },
662
-
663
- {
664
- "type": "number",
665
- "id": "top_mb",
666
- "default": 90,
667
- "label": "移动端顶部距离",
668
- "info": "移动端文案距离顶部距离 单位PX"
669
- },
670
- {
671
- "type": "video",
672
- "id": "video_pc",
673
- "label": "video_pc",
674
- "info": "pc端的视频"
675
- },
676
- {
677
- "type": "text",
678
- "id": "video_pc_url",
679
- "label": "video_pc_url",
680
- "info": "pc段的视频链接"
681
- },
682
- {
683
- "type": "image_picker",
684
- "id": "posterPc",
685
- "label": "poster Pc"
686
- },
687
- {
688
- "type": "video",
689
- "id": "video_mobile",
690
- "label": "video_mobile",
691
- "info": "mobile端的视频"
692
- },
693
- {
694
- "type": "text",
695
- "id": "video_mobile_url",
696
- "label": "video_mobile_url",
697
- "info": "mobile端的视频链接"
698
- },
699
- {
700
- "type": "image_picker",
701
- "id": "posterMb",
702
- "label": "poster Mb"
730
+ "visible_if": "{{ block.settings.banner_type == 'image_type' }}"
703
731
  },
704
732
  {
705
- "type": "checkbox",
706
- "id": "need_btn",
707
- "label": "是否需要按钮",
708
- "default": true,
709
- "info": "无按钮，设置banner链接"
733
+ "type": "select",
734
+ "id": "btn_type",
735
+ "label": "按钮类型",
736
+ "options": [
737
+ {
738
+ "value": "none",
739
+ "label": "无按钮，设置banner链接"
740
+ },
741
+ {
742
+ "value": "one",
743
+ "label": "一个按钮"
744
+ },
745
+ {
746
+ "value": "two",
747
+ "label": "两个按钮"
748
+ },
749
+ ],
750
+ "default": "none"
710
751
  },
711
752
  {
712
753
  "type": "textarea",
713
754
  "id": "linksbanner",
714
- "label": "Sites Link Map banner",
715
- "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ ",
716
- "visible_if": "{{ block.settings.need_btn == false }}"
755
+ "label": "Banner Sites Link Map",
756
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接。示例: Canada: https://hoverair.com/ 换行 default: https://hoverair.com/ ",
757
+ "visible_if": "{{ block.settings.btn_type == 'none' }}"
717
758
  },
718
759
  {
719
760
  "type": "text",
720
761
  "id": "btn_text",
721
- "label": "按钮文字",
722
- "default": "learn more",
723
- "visible_if": "{{ block.settings.need_btn == true }}"
762
+ "label": "按钮一文字",
763
+ "default": "Learn more",
764
+ "visible_if": "{{ block.settings.btn_type == 'one' or block.settings.btn_type == 'two' }}"
724
765
  },
725
766
  {
726
767
  "type": "select",
727
768
  "id": "function_type",
728
- "label": "功能类型",
769
+ "label": "按钮一功能类型",
729
770
  "options": [
730
771
  {
731
772
  "value": "link",
@@ -737,46 +778,75 @@
737
778
  },
738
779
  ],
739
780
  "default": "link",
740
- "visible_if": "{{ block.settings.need_btn == true }}"
781
+ "visible_if": "{{ block.settings.btn_type == 'one' or block.settings.btn_type == 'two' }}"
741
782
  },
742
783
  {
743
784
  "type": "textarea",
744
785
  "id": "links",
745
- "label": "Sites Link Map",
746
- "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ ",
747
- "visible_if": "{{ block.settings.function_type == 'link_map' and block.settings.need_btn == true }}"
786
+ "label": "按钮一 Sites Link Map",
787
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接。示例: Canada: https://hoverair.com/ 换行 default: https://hoverair.com/ ",
788
+ "visible_if": "{{ block.settings.function_type == 'link_map' and block.settings.btn_type != 'none'}}"
748
789
  },
749
790
  {
750
791
  "type": "url",
751
792
  "id": "link",
752
- "label": "Normal Button Link",
753
- "info": "普通按钮跳转地址",
754
- "visible_if": "{{ block.settings.function_type == 'link' and block.settings.need_btn == true }}"
755
- },
756
- {
757
- "type": "color",
758
- "id": "btn_border_color",
759
- "label": "Button Border Color",
760
- "info": "按钮的边框颜色",
761
- "default": "#F5F5F5",
762
- "visible_if": "{{ block.settings.need_btn == true }}"
793
+ "label": "按钮一跳转地址",
794
+ "info": "按钮跳转地址",
795
+ "visible_if": "{{ block.settings.function_type == 'link' and block.settings.btn_type != 'none'}}"
763
796
  },
764
797
  {
765
798
  "type": "color",
766
799
  "id": "btn_background_color",
767
- "label": "Button Background Color",
768
- "info": "按钮的背景颜色",
769
- "default": "#F5F5F5",
770
- "visible_if": "{{ block.settings.need_btn == true }}"
800
+ "label": "按钮一背景颜色",
801
+ "default": "#FFFFFF",
802
+ "visible_if": "{{ block.settings.btn_type != 'none' }}"
771
803
  },
772
804
  {
773
805
  "type": "color",
774
806
  "id": "btn_color",
775
- "label": "Button Text Color",
776
- "info": "按钮的文本颜色",
807
+ "label": "按钮一文字颜色",
777
808
  "default": "#2D2D2D",
778
- "visible_if": "{{ block.settings.need_btn == true }}"
809
+ "visible_if": "{{ block.settings.btn_type != 'none' }}"
810
+ },
811
+ {
812
+ "type": "text",
813
+ "id": "btn_text_two",
814
+ "label": "按钮二文字",
815
+ "default": "Learn more",
816
+ "visible_if": "{{ block.settings.btn_type == 'two' }}"
817
+ },
818
+ {
819
+ "type": "select",
820
+ "id": "function_type_two",
821
+ "label": "按钮二功能类型",
822
+ "options": [
823
+ {
824
+ "value": "link",
825
+ "label": "链接"
826
+ },
827
+ {
828
+ "value": "link_map",
829
+ "label": "多国家映射"
830
+ },
831
+ ],
832
+ "default": "link",
833
+ "visible_if": "{{ block.settings.btn_type == 'two' }}"
834
+ },
835
+ {
836
+ "type": "textarea",
837
+ "id": "links_two",
838
+ "label": "按钮二 Sites Link Map",
839
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接。示例: Canada: https://hoverair.com/ 换行 default: https://hoverair.com/ ",
840
+ "visible_if": "{{ block.settings.function_type_two == 'link_map' and block.settings.btn_type == 'two'}}"
841
+ },
842
+ {
843
+ "type": "url",
844
+ "id": "link_two",
845
+ "label": "按钮二跳转地址",
846
+ "info": "按钮跳转地址",
847
+ "visible_if": "{{ block.settings.function_type_two == 'link' and block.settings.btn_type == 'two'}}"
779
848
  }
849
+
780
850
  ]
781
851
  }
782
852
  ],
@@ -799,12 +869,13 @@
799
869
  {% if section.settings.is_exposure != false %}
800
870
  data-track-zz-exposure="true"
801
871
  {% endif %}
802
- class='swiper swiper-banner-video-img {% if default_theme == 'dark' %} dark-theme {% endif %}'>
872
+ class='swiper swiper-banner-video-img {% if default_theme == 'dark' %} dark-theme {% endif %} '>
803
873
  <div class='swiper-wrapper'>
804
874
  {% for banner in section.blocks %}
805
875
  <div
806
- class='swiper-slide tw-h-full'
876
+ class='swiper-slide tw-h-full {{ banner.settings.banner_type }}'
807
877
  data-header-theme='{{ banner.settings.theme }}'
878
+ data-swiper-name='{{ banner.settings.banner_name }}'
808
879
  data-banner-name="{{ banner.settings.banner_name }}"
809
880
  {% if banner.settings.banner_name != blank %}
810
881
  data-track-zz-block="{{ banner.settings.banner_name }}"
@@ -814,8 +885,8 @@
814
885
  <div
815
886
  id='{{ banner.id }}-bannerlink'
816
887
  class='{{ banner.id }}-site-event swiper-content tw-w-full tw-max-w-screen tw-relative tw-text-left tw-h-full'
817
- style="{% if banner.settings.need_btn == false %}cursor: pointer;{% endif %}"
818
- {% if banner.settings.need_btn == false and banner.settings.banner_name != blank %}
888
+ style="{% if banner.settings.btn_type == 'none' %}cursor: pointer;{% endif %}"
889
+ {% if banner.settings.btn_type == 'none' and banner.settings.banner_name != blank %}
819
890
  data-track-zz-element="{{ banner.settings.banner_name }}"
820
891
  {% endif %}
821
892
  >
@@ -833,9 +904,7 @@
833
904
  {% else %}
834
905
  {% assign pc_video = banner.settings.video_pc %}
835
906
  {% endif %}
836
- {% if banner.settings.video_mobile_url != blank %}
837
- {% assign mb_video = banner.settings.video_mobile_url %}
838
- {% else %}
907
+ {% if banner.settings.video_mobile != blank %}
839
908
  {% assign mb_video = banner.settings.video_mobile %}
840
909
  {% endif %}
841
910
  {% if forloop.first %}
@@ -870,50 +939,63 @@
870
939
  <div
871
940
  class='center-content tw-absolute lg:tw-left-[50%] lg:tw-top-[50%] lg:tw-translate-x-[-50%] lg:tw-translate-y-[-50%] lg:tw-w-[85vw] tw-z-10 max-lg:tw-h-full max-lg:tw-top-0 max-lg:tw-left-0 max-lg:tw-w-full max-lg:tw-pt-[90px] tw-box-border max-lg:tw-flex max-lg:tw-flex-col max-lg:tw-items-center'
872
941
  >
873
- <div class='swiper-content-text {% if banner.settings.title_type == 'position' %}lg:tw-w-[560px] {% else %}lg:tw-w-auto {% endif %}'>
874
- {%- if banner.settings.desc_text_type == 'text' -%}
875
- {% if banner.settings.banner_logo != blank %}
876
- <div class="zz-swiper-banner-img-logo {% if banner.settings.logo_type == 'small' %}tw-h-[1.8rem] lg:tw-h-[22px] {% else %} tw-h-[5.4rem] lg:tw-h-[92px] {% endif %} tw-mb-[2rem] lg:tw-mb-[20px] max-lg:tw-flex max-lg:tw-justify-center">
942
+ <div class='swiper-content-text {% if banner.settings.banner_type == 'image_type' or banner.settings.banner_type == 'title_description_type' %} lg:tw-w-[560px] {% else %} lg:tw-w-[784px] {% endif %}'>
943
+ {%- if banner.settings.banner_type == 'product_type' or banner.settings.banner_type == 'title_description_type' or banner.settings.banner_type == 'discount_sale_type' -%}
944
+ {% if banner.settings.banner_type == 'product_type' and banner.settings.product_logo != blank %}
945
+ <div class="zz-swiper-banner-img-logo max-lg:tw-mb-[1.8rem] lg:tw-mb-[30px] max-lg:tw-w-[33.5rem] lg:tw-mb-[20px] lg:tw-h-[52px]">
877
946
  {% render 'zz-img',
878
- pc_image: banner.settings.banner_logo,
879
- mb_image: banner.settings.banner_logo,
880
- image_alt: banner.settings.title | escape,
881
- class_name: "!tw-h-full !tw-w-auto",
947
+ pc_image: banner.settings.product_logo,
948
+ mb_image: banner.settings.product_logo_mb,
949
+ image_alt: banner.settings.banner_name | escape,
950
+ class_name: "lg:!tw-h-full lg:!tw-w-auto max-lg:!tw-w-full max-lg:!tw-h-auto",
882
951
  %}
883
952
  </div>
884
953
  {% endif %}
885
- <div
886
- class='lg:tw-hidden tw-p-0 tw-font-bold max-lg:tw-mb-[0.8rem] max-lg:tw-text-[2.8rem] max-lg:tw-leading-[1.2] max-lg:tw-text-center'
887
- style='color: {{ banner.settings.color | default: 'white' }};'
888
- >
889
- {{ banner.settings.title_mb }}
890
- </div>
891
- <div
892
- class='lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] tw-font-medium max-lg:tw-text-[1.4rem] max-lg:tw-text-center'
893
- style='color: {{ banner.settings.color | default: 'white' }}'
894
- >
895
- {{ banner.settings.subtitle_mb }}
896
- </div>
954
+
955
+ {% if banner.settings.banner_type == 'discount_sale_type' or banner.settings.banner_type == 'title_description_type' %}
956
+ <div
957
+ class='banner-title max-lg:tw-hidden tw-p-0 tw-leading-[1.2] tw-font-bold max-lg:tw-text-center'
958
+ style='color: {{ banner.settings.color | default: 'white' }};'
959
+ >
960
+ {{ banner.settings.title }}
961
+ </div>
962
+ <div
963
+ class='banner-title lg:tw-hidden tw-p-0 tw-font-bold max-lg:tw-leading-[1.2] max-lg:tw-text-center'
964
+ style='color: {{ banner.settings.color | default: 'white' }};'
965
+ >
966
+ {{ banner.settings.title_mb }}
967
+ </div>
968
+ {% endif %}
897
969
 
898
- <div
899
- class='pc-title max-lg:tw-hidden tw-p-0 tw-leading-[1.2] {% if section.settings.site == 'central' %}tw-text-[48px]{% else %}tw-text-[40px]{% endif %}
900
- tw-font-bold'
901
- style='color: {{ banner.settings.color | default: 'white' }};'
902
- >
903
- {{ banner.settings.title }}
904
- </div>
905
- <div
906
- class='pc-sub-title max-lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] {% if section.settings.site == 'central' %}tw-text-[28px]{% else %}tw-text-[20px]{% endif %} tw-font-medium'
907
- style='color: {{ banner.settings.color | default: 'white' }}'
908
- >
909
- {{ banner.settings.subtitle }}
910
- </div>
911
- {%- elsif banner.settings.desc_text_type == 'image' and banner.settings.banner_desc != blank -%}
970
+ {% if banner.settings.banner_type == 'discount_sale_type' %}
971
+ <div
972
+ class='banner-discount_text tw-p-0 max-lg:tw-mt-[4px] lg:tw-my-[16px] tw-leading-[1.2] tw-font-bold tw-flex tw-items-center max-lg:tw-justify-center'
973
+ style='color: {{ banner.settings.color | default: 'white' }};'
974
+ >
975
+ <div class="tw-text-[1.9rem] lg:tw-text-[32px] tw-text-center tw-leading-[1] tw-mr-[6px] lg:tw-mr-[8px]"
976
+ style='color: {{ banner.settings.color | default: 'white' }};'>UP<br/>TO</div>
977
+ <div class="tw-text-[4rem] lg:tw-text-[68px]"
978
+ style='color: {{ banner.settings.color | default: 'white' }};'>{{ banner.settings.discount_text }} OFF</div>
979
+ </div>
980
+ {% endif %}
981
+ <div
982
+ class='banner-description max-lg:tw-hidden tw-p-0 tw-leading-[1.5]'
983
+ style='color: {{ banner.settings.color | default: 'white' }}'
984
+ >
985
+ {{ banner.settings.description }}
986
+ </div>
987
+ <div
988
+ class='banner-description lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] max-lg:tw-text-center'
989
+ style='color: {{ banner.settings.color | default: 'white' }}'
990
+ >
991
+ {{ banner.settings.description_mb }}
992
+ </div>
993
+ {%- elsif banner.settings.banner_type == 'image_type' and banner.settings.banner_desc != blank -%}
912
994
  <div
913
995
  class="max-lg:tw-hidden tw-w-[560px]">
914
996
  {{
915
997
  banner.settings.banner_desc
916
- | image_url: width: 1280
998
+ | image_url: width: 1680
917
999
  | image_tag:
918
1000
  alt: banner.settings.title,
919
1001
  class: 'tw-w-full tw-h-auto',
@@ -924,10 +1006,10 @@
924
1006
 
925
1007
  </div>
926
1008
  <div
927
- class="lg:tw-hidden tw-max-w-[480px]">
1009
+ class="lg:tw-hidden tw-max-w-[33.5rem]">
928
1010
  {{
929
1011
  banner.settings.banner_desc_mb
930
- | image_url: width: 670
1012
+ | image_url: width: 1005
931
1013
  | image_tag:
932
1014
  alt: banner.settings.title,
933
1015
  class: 'tw-w-full tw-h-auto',
@@ -938,9 +1020,9 @@
938
1020
  </div>
939
1021
  {% endif %}
940
1022
 
941
- {% if banner.settings.need_btn == true %}
1023
+ {% if banner.settings.btn_type != 'none' %}
942
1024
  <div
943
- class='buttons max-lg:tw-absolute max-lg:tw-bottom-[6rem] max-lg:tw-left-[0] max-lg:tw-right-[0] lg:tw-mt-[48px]'
1025
+ class='buttons tw-flex tw-items-center max-lg:tw-justify-center tw-gap-[12px] lg:tw-gap-[24px] max-lg:tw-absolute max-lg:tw-bottom-[6rem] max-lg:tw-left-[0] max-lg:tw-right-[0] lg:tw-mt-[48px]'
944
1026
  >
945
1027
  {%- if banner.settings.function_type == 'link' -%}
946
1028
  <a
@@ -948,9 +1030,9 @@
948
1030
  {% if banner.settings.banner_name != blank %}
949
1031
  data-track-zz-element="{{ banner.settings.banner_name }}"
950
1032
  {% endif %}
951
- class='{{ banner.id }}-site-event zz-banner-btn tw-w-fit tw-block tw-no-underline tw-h-[44px] max-lg:tw-px-[2rem] lg:tw-px-[24px] max-lg:tw-h-[4rem] tw-leading-[44px] max-lg:tw-leading-[4rem]
952
- tw-font-semibold tw-text-center tw-rounded-[4px] tw-text-[16px] max-lg:tw-text-[1.3rem] max-lg:tw-mx-auto tw-cursor-pointer'
953
- style='color: {{ banner.settings.btn_color | default: 'black' }}; border: 1px solid {{ banner.settings.btn_border_color | default: 'white' }}; background: {{ banner.settings.btn_background_color | default: 'white' }}'
1033
+ class='{{ banner.id }}-site-event zz-banner-btn tw-w-fit tw-block tw-no-underline tw-h-[44px] max-lg:tw-px-[2rem] lg:tw-px-[24px] max-lg:tw-h-[4rem]
1034
+ tw-font-semibold tw-text-center tw-rounded-[4px] tw-text-[16px] max-lg:tw-text-[1.3rem] tw-cursor-pointer'
1035
+ style='color: {{ banner.settings.btn_color | default: 'black' }}; background: {{ banner.settings.btn_background_color | default: 'white' }}'
954
1036
  >
955
1037
  {{- banner.settings.btn_text -}}
956
1038
  </a>
@@ -962,12 +1044,39 @@
962
1044
  data-track-zz-element="{{ banner.settings.banner_name }}"
963
1045
  {% endif %}
964
1046
  class='{{ banner.id }}-site-event zz-banner-btn tw-w-fit tw-h-[44px] max-lg:tw-px-[2rem] lg:tw-px-[24px] max-lg:tw-h-[4rem]
965
- tw-font-semibold tw-leading-[44px] max-lg:tw-leading-[4rem] tw-text-center tw-rounded-[4px] tw-text-[16px] max-lg:tw-text-[1.3rem] max-lg:tw-mx-auto tw-cursor-pointer'
966
- style='color: {{ banner.settings.btn_color | default: 'black' }}; border: 1px solid {{ banner.settings.btn_border_color | default: 'white' }}; background: {{ banner.settings.btn_background_color | default: 'white' }}'
1047
+ tw-font-semibold tw-text-center tw-rounded-[4px] tw-text-[16px] max-lg:tw-text-[1.3rem] tw-cursor-pointer'
1048
+ style='color: {{ banner.settings.btn_color | default: 'black' }}; background: {{ banner.settings.btn_background_color | default: 'white' }}'
967
1049
  >
968
1050
  {{- banner.settings.btn_text -}}
969
1051
  </div>
970
1052
  {% endif %}
1053
+
1054
+ {% if banner.settings.btn_type == 'two' %}
1055
+ {%- if banner.settings.function_type_two == 'link' -%}
1056
+ <a
1057
+ href='{{ banner.settings.link_two }}'
1058
+ {% if banner.settings.banner_name != blank %}
1059
+ data-track-zz-element="{{ banner.settings.banner_name }}-buy"
1060
+ {% endif %}
1061
+ class='{{ banner.id }}-site-event zz-banner-btn-two tw-w-fit tw-block tw-no-underline tw-h-[44px] max-lg:tw-px-[2rem] lg:tw-px-[24px] max-lg:tw-h-[4rem]
1062
+ tw-font-semibold tw-text-center tw-rounded-[4px] tw-text-[16px] max-lg:tw-text-[1.3rem] tw-cursor-pointer tw-bg-black/30 tw-border tw-border-white/30 tw-backdrop-blur-[12px] tw-text-white'
1063
+ >
1064
+ {{- banner.settings.btn_text_two -}}
1065
+ </a>
1066
+
1067
+ {%- elsif banner.settings.function_type_two == 'link_map' -%}
1068
+ <div
1069
+ id='{{ banner.id }}-site-btn-two'
1070
+ {% if banner.settings.banner_name != blank %}
1071
+ data-track-zz-element="{{ banner.settings.banner_name }}-buy"
1072
+ {% endif %}
1073
+ class='{{ banner.id }}-site-event zz-banner-btn-two tw-w-fit tw-h-[44px] max-lg:tw-px-[2rem] lg:tw-px-[24px] max-lg:tw-h-[4rem]
1074
+ tw-font-semibold tw-text-center tw-rounded-[4px] tw-text-[16px] max-lg:tw-text-[1.3rem] tw-cursor-pointer tw-bg-black/30 tw-border tw-border-white/30 tw-backdrop-blur-[12px] tw-text-white'
1075
+ >
1076
+ {{- banner.settings.btn_text_two -}}
1077
+ </div>
1078
+ {% endif %}
1079
+ {% endif %}
971
1080
  </div>
972
1081
  {% endif %}
973
1082
 
@@ -977,6 +1086,7 @@
977
1086
  <script>
978
1087
  document.addEventListener('DOMContentLoaded', (event) => {
979
1088
  const button = document.getElementById('{{ banner.id }}-site-btn')
1089
+ const buttonTwo = document.getElementById('{{ banner.id }}-site-btn-two')
980
1090
  const bannerlink = document.getElementById('{{ banner.id }}-bannerlink')
981
1091
  const eventList = document.querySelectorAll('.{{ banner.id }}-site-event')
982
1092
  if(button) {
@@ -989,6 +1099,11 @@
989
1099
  bindSiteJump(bannerlink, {{ banner.settings.linksbanner | json }})
990
1100
  {% endif %}
991
1101
  }
1102
+ if(buttonTwo) {
1103
+ {% if banner.settings.links_two != blank %}
1104
+ bindSiteJump(buttonTwo, {{ banner.settings.links_two | json }})
1105
+ {% endif %}
1106
+ }
992
1107
  if(eventList) {
993
1108
  eventList.forEach(item => {
994
1109
  item.addEventListener('click', (event) => {
@@ -1035,14 +1150,14 @@
1035
1150
  ];
1036
1151
  let progressInterval = null;
1037
1152
  let progressTimer = null;
1038
-
1153
+ const initialSlidesCount = section.querySelectorAll('.swiper-slide').length;
1039
1154
  const VIDEO_IMG_SWIPER = new Swiper('#shopify-section-{{section.id}} .swiper-banner-video-img', {
1040
- loop: true,
1155
+ loop: initialSlidesCount > 1,
1041
1156
  spaceBetween: 0,
1042
1157
  navigation: {
1043
1158
  nextEl: '.swiper-button-next',
1044
1159
  prevEl: '.swiper-button-prev',
1045
- enabled: {% if section.blocks.size > 1 %} true {% else %} false {% endif %}
1160
+ enabled: initialSlidesCount > 1
1046
1161
  },
1047
1162
  pagination: {
1048
1163
  el: '.swiper-pagination',