zz-shopify-components 0.36.0 → 0.36.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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/sections/zz-swiper-banner.liquid +474 -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.1",
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,35 @@
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
+ }
280
+ #shopify-section-{{section.id}} .swiper-content-text {
281
+ padding: 0px 20px;
282
+ }
228
283
 
229
284
  }
230
285
  </style>
@@ -249,26 +304,6 @@
249
304
  ],
250
305
  "default": "central"
251
306
  },
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
307
  {
273
308
  "type": "text",
274
309
  "id": "module_id",
@@ -305,6 +340,44 @@
305
340
  ],
306
341
  "default": "light"
307
342
  },
343
+ {
344
+ "type": "select",
345
+ "id": "banner_type",
346
+ "label": "banner类型",
347
+ "options": [
348
+ {
349
+ "value": "product_type",
350
+ "label": "产品模式"
351
+ },
352
+ {
353
+ "value": "discount_sale_type",
354
+ "label": "营销折扣模式"
355
+ },
356
+ {
357
+ "value": "image_type",
358
+ "label": "图文模式，文案部分在图上"
359
+ },
360
+ {
361
+ "value": "title_description_type",
362
+ "label": "标题描述模式"
363
+ },
364
+ {
365
+ "value": "full-image_type",
366
+ "label": "纯图模式"
367
+ },
368
+ ],
369
+ "default": "product_type"
370
+ },
371
+ {
372
+ "type": "image_picker",
373
+ "id": "banner",
374
+ "label": "Banner PC"
375
+ },
376
+ {
377
+ "type": "image_picker",
378
+ "id": "banner_mb",
379
+ "label": "Banner Mobile"
380
+ },
308
381
  {
309
382
  "type": "text",
310
383
  "id": "progress_text",
@@ -316,92 +389,52 @@
316
389
  "id": "banner_name",
317
390
  "label": "Banner name",
318
391
  "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"
392
+ "info": "用于埋点统计，英文下划线连接单词，banner_name-id。后缀加-id。"
337
393
  },
338
394
  {
339
395
  "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"
396
+ "id": "product_logo",
397
+ "label": "产品logo PC",
398
+ "visible_if": "{{ block.settings.banner_type == 'product_type' }}",
399
+ "info": "产品logo,PC 高度固定52px"
344
400
  },
345
401
  {
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' }}",
402
+ "type": "image_picker",
403
+ "id": "product_logo_mb",
404
+ "label": "产品logo Mobile",
405
+ "visible_if": "{{ block.settings.banner_type == 'product_type' }}",
406
+ "info": "产品logo, Mobile 宽度固定335px"
362
407
  },
363
-
364
408
  {
365
409
  "type": "richtext",
366
410
  "id": "title",
367
- "label": "大标题",
368
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
411
+ "label": "标题",
412
+ "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
369
413
  },
370
414
  {
371
415
  "type": "richtext",
372
416
  "id": "title_mb",
373
- "label": "大标题 Mobile",
374
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
417
+ "label": "标题 Mobile",
418
+ "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
375
419
  },
376
420
  {
377
- "type": "richtext",
378
- "id": "subtitle",
379
- "label": "小标题",
380
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
421
+ "type": "text",
422
+ "id": "discount_text",
423
+ "label": "折扣",
424
+ "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' }}",
425
+ "info": "折扣，如：90,会显示UP TO 90% OFF"
381
426
  },
382
427
  {
383
428
  "type": "richtext",
384
- "id": "subtitle_mb",
385
- "label": "小标题 Mobile",
386
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
429
+ "id": "description",
430
+ "label": "描述",
431
+ "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
432
  },
388
433
  {
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' }}",
434
+ "type": "richtext",
435
+ "id": "description_mb",
436
+ "label": "描述 Mobile",
437
+ "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
438
  },
406
439
  {
407
440
  "type": "color",
@@ -409,64 +442,59 @@
409
442
  "label": "Text Color",
410
443
  "info": "文本颜色",
411
444
  "default": "#ffffff",
412
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
445
+ "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
446
  },
414
447
  {
415
448
  "type": "image_picker",
416
449
  "id": "banner_desc",
417
450
  "label": "Banner上悬浮标题图",
418
- "visible_if": "{{ block.settings.desc_text_type == 'image' }}",
451
+ "visible_if": "{{ block.settings.banner_type == 'image_type' }}",
419
452
  "info": "PC 端宽度 560px"
420
453
  },
421
454
  {
422
455
  "type": "image_picker",
423
456
  "id": "banner_desc_mb",
424
457
  "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"
458
+ "visible_if": "{{ block.settings.banner_type == 'image_type' }}"
444
459
  },
445
460
  {
446
- "type": "checkbox",
447
- "id": "need_btn",
448
- "label": "是否需要按钮",
449
- "default": true,
450
- "info": "无按钮，设置banner链接"
461
+ "type": "select",
462
+ "id": "btn_type",
463
+ "label": "按钮类型",
464
+ "options": [
465
+ {
466
+ "value": "none",
467
+ "label": "无按钮，设置banner链接"
468
+ },
469
+ {
470
+ "value": "one",
471
+ "label": "一个按钮"
472
+ },
473
+ {
474
+ "value": "two",
475
+ "label": "两个按钮"
476
+ },
477
+ ],
478
+ "default": "none"
451
479
  },
452
480
  {
453
481
  "type": "textarea",
454
482
  "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 }}"
483
+ "label": "Banner Sites Link Map",
484
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接。示例: Canada: https://hoverair.com/ 回车 default: https://hoverair.com/ ",
485
+ "visible_if": "{{ block.settings.btn_type == 'none' }}"
458
486
  },
459
487
  {
460
488
  "type": "text",
461
489
  "id": "btn_text",
462
- "label": "按钮文字",
490
+ "label": "按钮一文字",
463
491
  "default": "Learn more",
464
- "visible_if": "{{ block.settings.need_btn == true }}"
492
+ "visible_if": "{{ block.settings.btn_type == 'one' or block.settings.btn_type == 'two' }}"
465
493
  },
466
494
  {
467
495
  "type": "select",
468
496
  "id": "function_type",
469
- "label": "按钮功能类型",
497
+ "label": "按钮一功能类型",
470
498
  "options": [
471
499
  {
472
500
  "value": "link",
@@ -478,46 +506,74 @@
478
506
  },
479
507
  ],
480
508
  "default": "link",
481
- "visible_if": "{{ block.settings.need_btn == true }}"
509
+ "visible_if": "{{ block.settings.btn_type == 'one' or block.settings.btn_type == 'two' }}"
482
510
  },
483
511
  {
484
512
  "type": "textarea",
485
513
  "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 }}"
514
+ "label": "按钮一 Sites Link Map",
515
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接。示例: Canada: https://hoverair.com/ 回车 default: https://hoverair.com/ ",
516
+ "visible_if": "{{ block.settings.function_type == 'link_map' and block.settings.btn_type != 'none'}}"
489
517
  },
490
518
  {
491
519
  "type": "url",
492
520
  "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 }}"
521
+ "label": "按钮一跳转地址",
522
+ "info": "按钮跳转地址",
523
+ "visible_if": "{{ block.settings.function_type == 'link' and block.settings.btn_type != 'none'}}"
504
524
  },
505
525
  {
506
526
  "type": "color",
507
527
  "id": "btn_background_color",
508
- "label": "Button Background Color",
509
- "info": "按钮的背景颜色",
510
- "default": "#F5F5F5",
511
- "visible_if": "{{ block.settings.need_btn == true }}"
528
+ "label": "按钮一背景颜色",
529
+ "default": "#FFFFFF",
530
+ "visible_if": "{{ block.settings.btn_type != 'none' }}"
512
531
  },
513
532
  {
514
533
  "type": "color",
515
534
  "id": "btn_color",
516
- "label": "Button Text Color",
517
- "info": "按钮的文本颜色",
535
+ "label": "按钮一文字颜色",
518
536
  "default": "#2D2D2D",
519
- "visible_if": "{{ block.settings.need_btn == true }}"
520
- }
537
+ "visible_if": "{{ block.settings.btn_type != 'none' }}"
538
+ },
539
+ {
540
+ "type": "text",
541
+ "id": "btn_text_two",
542
+ "label": "按钮二文字",
543
+ "default": "Learn more",
544
+ "visible_if": "{{ block.settings.btn_type == 'two' }}"
545
+ },
546
+ {
547
+ "type": "select",
548
+ "id": "function_type_two",
549
+ "label": "按钮二功能类型",
550
+ "options": [
551
+ {
552
+ "value": "link",
553
+ "label": "链接"
554
+ },
555
+ {
556
+ "value": "link_map",
557
+ "label": "多国家映射"
558
+ },
559
+ ],
560
+ "default": "link",
561
+ "visible_if": "{{ block.settings.btn_type == 'two' }}"
562
+ },
563
+ {
564
+ "type": "textarea",
565
+ "id": "links_two",
566
+ "label": "按钮二 Sites Link Map",
567
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开(冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接。示例: Canada: https://hoverair.com/ 换行 default: https://hoverair.com/ ",
568
+ "visible_if": "{{ block.settings.function_type_two == 'link_map' and block.settings.btn_type == 'two'}}"
569
+ },
570
+ {
571
+ "type": "url",
572
+ "id": "link_two",
573
+ "label": "按钮二跳转地址",
574
+ "info": "按钮跳转地址",
575
+ "visible_if": "{{ block.settings.function_type_two == 'link' and block.settings.btn_type == 'two'}}"
576
+ },
521
577
  ]
522
578
  },
523
579
  {
@@ -538,7 +594,64 @@
538
594
  "value": "light",
539
595
  "label": "Light"
540
596
  }
541
- ]
597
+ ],
598
+ "default": "light"
599
+ },
600
+ {
601
+ "type": "select",
602
+ "id": "banner_type",
603
+ "label": "banner类型",
604
+ "options": [
605
+ {
606
+ "value": "product_type",
607
+ "label": "产品模式"
608
+ },
609
+ {
610
+ "value": "discount_sale_type",
611
+ "label": "营销折扣模式"
612
+ },
613
+ {
614
+ "value": "image_type",
615
+ "label": "图文模式，文案部分在图上"
616
+ },
617
+ {
618
+ "value": "title_description_type",
619
+ "label": "标题描述模式"
620
+ },
621
+ {
622
+ "value": "full-image_type",
623
+ "label": "纯图模式"
624
+ },
625
+ ],
626
+ "default": "product_type"
627
+ },
628
+ {
629
+ "type": "video",
630
+ "id": "video_pc",
631
+ "label": "video_pc",
632
+ "info": "pc端的视频"
633
+ },
634
+ {
635
+ "type": "text",
636
+ "id": "video_pc_url",
637
+ "label": "video_pc_url",
638
+ "info": "pc段的视频链接"
639
+ },
640
+ {
641
+ "type": "image_picker",
642
+ "id": "posterPc",
643
+ "label": "poster Pc"
644
+ },
645
+ {
646
+ "type": "video",
647
+ "id": "video_mobile",
648
+ "label": "video_mobile",
649
+ "info": "mobile端的视频"
650
+ },
651
+ {
652
+ "type": "image_picker",
653
+ "id": "posterMb",
654
+ "label": "poster Mb"
542
655
  },
543
656
  {
544
657
  "type": "text",
@@ -551,181 +664,112 @@
551
664
  "id": "banner_name",
552
665
  "label": "Banner name",
553
666
  "default": "default_name",
554
- "info": "用于埋点统计，英文下划线连接单词，banner_name_1"
667
+ "info": "用于埋点统计，英文下划线连接单词，banner_name-id。后缀加-id。"
555
668
  },
556
669
  {
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
670
  "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"
671
+ "id": "product_logo",
672
+ "label": "产品logo PC",
673
+ "visible_if": "{{ block.settings.banner_type == 'product_type' }}",
674
+ "info": "产品logo,PC 高度固定52px"
579
675
  },
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' }}",
676
+ {
677
+ "type": "image_picker",
678
+ "id": "product_logo_mb",
679
+ "label": "产品logo Mobile",
680
+ "visible_if": "{{ block.settings.banner_type == 'product_type' }}",
681
+ "info": "产品logo, Mobile 宽度固定335px"
597
682
  },
598
683
  {
599
684
  "type": "richtext",
600
685
  "id": "title",
601
- "label": "大标题",
602
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
686
+ "label": "标题",
687
+ "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
603
688
  },
604
689
  {
605
690
  "type": "richtext",
606
691
  "id": "title_mb",
607
- "label": "大标题 Mobile",
608
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
692
+ "label": "标题 Mobile",
693
+ "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}",
609
694
  },
610
695
  {
611
- "type": "richtext",
612
- "id": "subtitle",
613
- "label": "小标题",
614
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
696
+ "type": "text",
697
+ "id": "discount_text",
698
+ "label": "折扣",
699
+ "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' }}",
700
+ "info": "折扣，如：90,会显示UP TO 90% OFF"
615
701
  },
616
702
  {
617
703
  "type": "richtext",
618
- "id": "subtitle_mb",
619
- "label": "小标题 Mobile",
620
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
704
+ "id": "description",
705
+ "label": "描述",
706
+ "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
707
  },
622
708
  {
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' }}",
709
+ "type": "richtext",
710
+ "id": "description_mb",
711
+ "label": "描述 Mobile",
712
+ "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
713
  },
640
-
641
714
  {
642
715
  "type": "color",
643
716
  "id": "color",
644
717
  "label": "Text Color",
645
718
  "info": "文本颜色",
646
719
  "default": "#ffffff",
647
- "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
720
+ "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
721
  },
649
722
  {
650
723
  "type": "image_picker",
651
724
  "id": "banner_desc",
652
725
  "label": "Banner上悬浮标题图",
653
- "visible_if": "{{ block.settings.desc_text_type == 'image' }}",
726
+ "visible_if": "{{ block.settings.banner_type == 'image_type' }}",
654
727
  "info": "PC 端宽度 560px"
655
728
  },
656
729
  {
657
730
  "type": "image_picker",
658
731
  "id": "banner_desc_mb",
659
732
  "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"
733
+ "visible_if": "{{ block.settings.banner_type == 'image_type' }}"
703
734
  },
704
735
  {
705
- "type": "checkbox",
706
- "id": "need_btn",
707
- "label": "是否需要按钮",
708
- "default": true,
709
- "info": "无按钮，设置banner链接"
736
+ "type": "select",
737
+ "id": "btn_type",
738
+ "label": "按钮类型",
739
+ "options": [
740
+ {
741
+ "value": "none",
742
+ "label": "无按钮，设置banner链接"
743
+ },
744
+ {
745
+ "value": "one",
746
+ "label": "一个按钮"
747
+ },
748
+ {
749
+ "value": "two",
750
+ "label": "两个按钮"
751
+ },
752
+ ],
753
+ "default": "none"
710
754
  },
711
755
  {
712
756
  "type": "textarea",
713
757
  "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 }}"
758
+ "label": "Banner Sites Link Map",
759
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接。示例: Canada: https://hoverair.com/ 换行 default: https://hoverair.com/ ",
760
+ "visible_if": "{{ block.settings.btn_type == 'none' }}"
717
761
  },
718
762
  {
719
763
  "type": "text",
720
764
  "id": "btn_text",
721
- "label": "按钮文字",
722
- "default": "learn more",
723
- "visible_if": "{{ block.settings.need_btn == true }}"
765
+ "label": "按钮一文字",
766
+ "default": "Learn more",
767
+ "visible_if": "{{ block.settings.btn_type == 'one' or block.settings.btn_type == 'two' }}"
724
768
  },
725
769
  {
726
770
  "type": "select",
727
771
  "id": "function_type",
728
- "label": "功能类型",
772
+ "label": "按钮一功能类型",
729
773
  "options": [
730
774
  {
731
775
  "value": "link",
@@ -737,46 +781,75 @@
737
781
  },
738
782
  ],
739
783
  "default": "link",
740
- "visible_if": "{{ block.settings.need_btn == true }}"
784
+ "visible_if": "{{ block.settings.btn_type == 'one' or block.settings.btn_type == 'two' }}"
741
785
  },
742
786
  {
743
787
  "type": "textarea",
744
788
  "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 }}"
789
+ "label": "按钮一 Sites Link Map",
790
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接。示例: Canada: https://hoverair.com/ 换行 default: https://hoverair.com/ ",
791
+ "visible_if": "{{ block.settings.function_type == 'link_map' and block.settings.btn_type != 'none'}}"
748
792
  },
749
793
  {
750
794
  "type": "url",
751
795
  "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 }}"
796
+ "label": "按钮一跳转地址",
797
+ "info": "按钮跳转地址",
798
+ "visible_if": "{{ block.settings.function_type == 'link' and block.settings.btn_type != 'none'}}"
763
799
  },
764
800
  {
765
801
  "type": "color",
766
802
  "id": "btn_background_color",
767
- "label": "Button Background Color",
768
- "info": "按钮的背景颜色",
769
- "default": "#F5F5F5",
770
- "visible_if": "{{ block.settings.need_btn == true }}"
803
+ "label": "按钮一背景颜色",
804
+ "default": "#FFFFFF",
805
+ "visible_if": "{{ block.settings.btn_type != 'none' }}"
771
806
  },
772
807
  {
773
808
  "type": "color",
774
809
  "id": "btn_color",
775
- "label": "Button Text Color",
776
- "info": "按钮的文本颜色",
810
+ "label": "按钮一文字颜色",
777
811
  "default": "#2D2D2D",
778
- "visible_if": "{{ block.settings.need_btn == true }}"
812
+ "visible_if": "{{ block.settings.btn_type != 'none' }}"
813
+ },
814
+ {
815
+ "type": "text",
816
+ "id": "btn_text_two",
817
+ "label": "按钮二文字",
818
+ "default": "Learn more",
819
+ "visible_if": "{{ block.settings.btn_type == 'two' }}"
820
+ },
821
+ {
822
+ "type": "select",
823
+ "id": "function_type_two",
824
+ "label": "按钮二功能类型",
825
+ "options": [
826
+ {
827
+ "value": "link",
828
+ "label": "链接"
829
+ },
830
+ {
831
+ "value": "link_map",
832
+ "label": "多国家映射"
833
+ },
834
+ ],
835
+ "default": "link",
836
+ "visible_if": "{{ block.settings.btn_type == 'two' }}"
837
+ },
838
+ {
839
+ "type": "textarea",
840
+ "id": "links_two",
841
+ "label": "按钮二 Sites Link Map",
842
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接。示例: Canada: https://hoverair.com/ 换行 default: https://hoverair.com/ ",
843
+ "visible_if": "{{ block.settings.function_type_two == 'link_map' and block.settings.btn_type == 'two'}}"
844
+ },
845
+ {
846
+ "type": "url",
847
+ "id": "link_two",
848
+ "label": "按钮二跳转地址",
849
+ "info": "按钮跳转地址",
850
+ "visible_if": "{{ block.settings.function_type_two == 'link' and block.settings.btn_type == 'two'}}"
779
851
  }
852
+
780
853
  ]
781
854
  }
782
855
  ],
@@ -799,12 +872,13 @@
799
872
  {% if section.settings.is_exposure != false %}
800
873
  data-track-zz-exposure="true"
801
874
  {% endif %}
802
- class='swiper swiper-banner-video-img {% if default_theme == 'dark' %} dark-theme {% endif %}'>
875
+ class='swiper swiper-banner-video-img {% if default_theme == 'dark' %} dark-theme {% endif %} '>
803
876
  <div class='swiper-wrapper'>
804
877
  {% for banner in section.blocks %}
805
878
  <div
806
- class='swiper-slide tw-h-full'
879
+ class='swiper-slide tw-h-full {{ banner.settings.banner_type }}'
807
880
  data-header-theme='{{ banner.settings.theme }}'
881
+ data-swiper-name='{{ banner.settings.banner_name }}'
808
882
  data-banner-name="{{ banner.settings.banner_name }}"
809
883
  {% if banner.settings.banner_name != blank %}
810
884
  data-track-zz-block="{{ banner.settings.banner_name }}"
@@ -814,8 +888,8 @@
814
888
  <div
815
889
  id='{{ banner.id }}-bannerlink'
816
890
  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 %}
891
+ style="{% if banner.settings.btn_type == 'none' %}cursor: pointer;{% endif %}"
892
+ {% if banner.settings.btn_type == 'none' and banner.settings.banner_name != blank %}
819
893
  data-track-zz-element="{{ banner.settings.banner_name }}"
820
894
  {% endif %}
821
895
  >
@@ -833,9 +907,7 @@
833
907
  {% else %}
834
908
  {% assign pc_video = banner.settings.video_pc %}
835
909
  {% endif %}
836
- {% if banner.settings.video_mobile_url != blank %}
837
- {% assign mb_video = banner.settings.video_mobile_url %}
838
- {% else %}
910
+ {% if banner.settings.video_mobile != blank %}
839
911
  {% assign mb_video = banner.settings.video_mobile %}
840
912
  {% endif %}
841
913
  {% if forloop.first %}
@@ -870,50 +942,63 @@
870
942
  <div
871
943
  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
944
  >
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">
945
+ <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 %}'>
946
+ {%- if banner.settings.banner_type == 'product_type' or banner.settings.banner_type == 'title_description_type' or banner.settings.banner_type == 'discount_sale_type' -%}
947
+ {% if banner.settings.banner_type == 'product_type' and banner.settings.product_logo != blank %}
948
+ <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
949
  {% 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",
950
+ pc_image: banner.settings.product_logo,
951
+ mb_image: banner.settings.product_logo_mb,
952
+ image_alt: banner.settings.banner_name | escape,
953
+ class_name: "lg:!tw-h-full lg:!tw-w-auto max-lg:!tw-w-full max-lg:!tw-h-auto",
882
954
  %}
883
955
  </div>
884
956
  {% 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>
957
+
958
+ {% if banner.settings.banner_type == 'discount_sale_type' or banner.settings.banner_type == 'title_description_type' %}
959
+ <div
960
+ class='banner-title max-lg:tw-hidden tw-p-0 tw-leading-[1.2] tw-font-bold max-lg:tw-text-center'
961
+ style='color: {{ banner.settings.color | default: 'white' }};'
962
+ >
963
+ {{ banner.settings.title }}
964
+ </div>
965
+ <div
966
+ class='banner-title lg:tw-hidden tw-p-0 tw-font-bold max-lg:tw-leading-[1.2] max-lg:tw-text-center'
967
+ style='color: {{ banner.settings.color | default: 'white' }};'
968
+ >
969
+ {{ banner.settings.title_mb }}
970
+ </div>
971
+ {% endif %}
897
972
 
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 -%}
973
+ {% if banner.settings.banner_type == 'discount_sale_type' %}
974
+ <div
975
+ 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'
976
+ style='color: {{ banner.settings.color | default: 'white' }};'
977
+ >
978
+ <div class="tw-text-[1.9rem] lg:tw-text-[32px] tw-text-center tw-leading-[1] tw-mr-[6px] lg:tw-mr-[8px]"
979
+ style='color: {{ banner.settings.color | default: 'white' }};'>UP<br/>TO</div>
980
+ <div class="tw-text-[4rem] lg:tw-text-[68px]"
981
+ style='color: {{ banner.settings.color | default: 'white' }};'>{{ banner.settings.discount_text }} OFF</div>
982
+ </div>
983
+ {% endif %}
984
+ <div
985
+ class='banner-description max-lg:tw-hidden tw-p-0 tw-leading-[1.5]'
986
+ style='color: {{ banner.settings.color | default: 'white' }}'
987
+ >
988
+ {{ banner.settings.description }}
989
+ </div>
990
+ <div
991
+ class='banner-description lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] max-lg:tw-text-center'
992
+ style='color: {{ banner.settings.color | default: 'white' }}'
993
+ >
994
+ {{ banner.settings.description_mb }}
995
+ </div>
996
+ {%- elsif banner.settings.banner_type == 'image_type' and banner.settings.banner_desc != blank -%}
912
997
  <div
913
998
  class="max-lg:tw-hidden tw-w-[560px]">
914
999
  {{
915
1000
  banner.settings.banner_desc
916
- | image_url: width: 1280
1001
+ | image_url: width: 1680
917
1002
  | image_tag:
918
1003
  alt: banner.settings.title,
919
1004
  class: 'tw-w-full tw-h-auto',
@@ -924,10 +1009,10 @@
924
1009
 
925
1010
  </div>
926
1011
  <div
927
- class="lg:tw-hidden tw-max-w-[480px]">
1012
+ class="lg:tw-hidden tw-max-w-[33.5rem]">
928
1013
  {{
929
1014
  banner.settings.banner_desc_mb
930
- | image_url: width: 670
1015
+ | image_url: width: 1005
931
1016
  | image_tag:
932
1017
  alt: banner.settings.title,
933
1018
  class: 'tw-w-full tw-h-auto',
@@ -938,9 +1023,9 @@
938
1023
  </div>
939
1024
  {% endif %}
940
1025
 
941
- {% if banner.settings.need_btn == true %}
1026
+ {% if banner.settings.btn_type != 'none' %}
942
1027
  <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]'
1028
+ 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
1029
  >
945
1030
  {%- if banner.settings.function_type == 'link' -%}
946
1031
  <a
@@ -948,9 +1033,9 @@
948
1033
  {% if banner.settings.banner_name != blank %}
949
1034
  data-track-zz-element="{{ banner.settings.banner_name }}"
950
1035
  {% 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' }}'
1036
+ 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]
1037
+ tw-font-semibold tw-text-center tw-rounded-[4px] tw-text-[16px] max-lg:tw-text-[1.3rem] tw-cursor-pointer'
1038
+ style='color: {{ banner.settings.btn_color | default: 'black' }}; background: {{ banner.settings.btn_background_color | default: 'white' }}'
954
1039
  >
955
1040
  {{- banner.settings.btn_text -}}
956
1041
  </a>
@@ -962,12 +1047,39 @@
962
1047
  data-track-zz-element="{{ banner.settings.banner_name }}"
963
1048
  {% endif %}
964
1049
  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' }}'
1050
+ tw-font-semibold tw-text-center tw-rounded-[4px] tw-text-[16px] max-lg:tw-text-[1.3rem] tw-cursor-pointer'
1051
+ style='color: {{ banner.settings.btn_color | default: 'black' }}; background: {{ banner.settings.btn_background_color | default: 'white' }}'
967
1052
  >
968
1053
  {{- banner.settings.btn_text -}}
969
1054
  </div>
970
1055
  {% endif %}
1056
+
1057
+ {% if banner.settings.btn_type == 'two' %}
1058
+ {%- if banner.settings.function_type_two == 'link' -%}
1059
+ <a
1060
+ href='{{ banner.settings.link_two }}'
1061
+ {% if banner.settings.banner_name != blank %}
1062
+ data-track-zz-element="{{ banner.settings.banner_name }}-buy"
1063
+ {% endif %}
1064
+ 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]
1065
+ 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'
1066
+ >
1067
+ {{- banner.settings.btn_text_two -}}
1068
+ </a>
1069
+
1070
+ {%- elsif banner.settings.function_type_two == 'link_map' -%}
1071
+ <div
1072
+ id='{{ banner.id }}-site-btn-two'
1073
+ {% if banner.settings.banner_name != blank %}
1074
+ data-track-zz-element="{{ banner.settings.banner_name }}-buy"
1075
+ {% endif %}
1076
+ 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]
1077
+ 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'
1078
+ >
1079
+ {{- banner.settings.btn_text_two -}}
1080
+ </div>
1081
+ {% endif %}
1082
+ {% endif %}
971
1083
  </div>
972
1084
  {% endif %}
973
1085
 
@@ -977,6 +1089,7 @@
977
1089
  <script>
978
1090
  document.addEventListener('DOMContentLoaded', (event) => {
979
1091
  const button = document.getElementById('{{ banner.id }}-site-btn')
1092
+ const buttonTwo = document.getElementById('{{ banner.id }}-site-btn-two')
980
1093
  const bannerlink = document.getElementById('{{ banner.id }}-bannerlink')
981
1094
  const eventList = document.querySelectorAll('.{{ banner.id }}-site-event')
982
1095
  if(button) {
@@ -989,6 +1102,11 @@
989
1102
  bindSiteJump(bannerlink, {{ banner.settings.linksbanner | json }})
990
1103
  {% endif %}
991
1104
  }
1105
+ if(buttonTwo) {
1106
+ {% if banner.settings.links_two != blank %}
1107
+ bindSiteJump(buttonTwo, {{ banner.settings.links_two | json }})
1108
+ {% endif %}
1109
+ }
992
1110
  if(eventList) {
993
1111
  eventList.forEach(item => {
994
1112
  item.addEventListener('click', (event) => {
@@ -1035,14 +1153,14 @@
1035
1153
  ];
1036
1154
  let progressInterval = null;
1037
1155
  let progressTimer = null;
1038
-
1156
+ const initialSlidesCount = section.querySelectorAll('.swiper-slide').length;
1039
1157
  const VIDEO_IMG_SWIPER = new Swiper('#shopify-section-{{section.id}} .swiper-banner-video-img', {
1040
- loop: true,
1158
+ loop: initialSlidesCount > 1,
1041
1159
  spaceBetween: 0,
1042
1160
  navigation: {
1043
1161
  nextEl: '.swiper-button-next',
1044
1162
  prevEl: '.swiper-button-prev',
1045
- enabled: {% if section.blocks.size > 1 %} true {% else %} false {% endif %}
1163
+ enabled: initialSlidesCount > 1
1046
1164
  },
1047
1165
  pagination: {
1048
1166
  el: '.swiper-pagination',