zz-shopify-components 0.15.1-beta.0 → 0.15.1-beta.2

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 +102 -46
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zz-shopify-components",
3
- "version": "0.15.1-beta.0",
3
+ "version": "0.15.1-beta.2",
4
4
  "description": "Reusable Shopify components for theme projects",
5
5
  "keywords": [
6
6
  "shopify",
package/sections/zz-swiper-banner.liquid CHANGED
@@ -198,10 +198,11 @@
198
198
  ]
199
199
  },
200
200
  {
201
- "type": "textarea",
202
- "id": "linksbanner",
203
- "label": "Sites Link Map banner",
204
- "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ "
201
+ "type": "text",
202
+ "id": "banner_name",
203
+ "label": "Banner name",
204
+ "default": "default_name",
205
+ "info": "用于埋点统计，英文下划线连接单词，banner_name_1"
205
206
  },
206
207
  {
207
208
  "type": "select",
@@ -281,16 +282,31 @@
281
282
  "id": "banner_mb",
282
283
  "label": "Banner Mobile"
283
284
  },
285
+ {
286
+ "type": "checkbox",
287
+ "id": "need_btn",
288
+ "label": "是否需要按钮",
289
+ "default": true,
290
+ "info": "无按钮，设置banner链接"
291
+ },
292
+ {
293
+ "type": "textarea",
294
+ "id": "linksbanner",
295
+ "label": "Sites Link Map banner",
296
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ ",
297
+ "visible_if": "{{ block.settings.need_btn == false }}"
298
+ },
284
299
  {
285
300
  "type": "text",
286
301
  "id": "btn_text",
287
302
  "label": "按钮文字",
288
- "default": "learn more"
303
+ "default": "learn more",
304
+ "visible_if": "{{ block.settings.need_btn == true }}"
289
305
  },
290
306
  {
291
307
  "type": "select",
292
308
  "id": "function_type",
293
- "label": "功能类型",
309
+ "label": "按钮功能类型",
294
310
  "options": [
295
311
  {
296
312
  "value": "link",
@@ -301,39 +317,43 @@
301
317
  "label": "多国家映射"
302
318
  },
303
319
  ],
304
- "default": "link"
320
+ "default": "link",
321
+ "visible_if": "{{ block.settings.need_btn == true }}"
305
322
  },
306
323
  {
307
324
  "type": "textarea",
308
325
  "id": "links",
309
326
  "label": "Sites Link Map",
310
327
  "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ ",
311
- "visible_if": "{{ block.settings.function_type == 'link_map' }}"
328
+ "visible_if": "{{ block.settings.function_type == 'link_map' and block.settings.need_btn == true }}"
312
329
  },
313
330
  {
314
331
  "type": "url",
315
332
  "id": "link",
316
333
  "label": "Normal Button Link",
317
334
  "info": "普通按钮跳转地址",
318
- "visible_if": "{{ block.settings.function_type == 'link' }}"
335
+ "visible_if": "{{ block.settings.function_type == 'link' and block.settings.need_btn == true }}"
319
336
  },
320
337
  {
321
338
  "type": "color",
322
339
  "id": "btn_border_color",
323
340
  "label": "Button Border Color",
324
- "info": "按钮的边框颜色"
341
+ "info": "按钮的边框颜色",
342
+ "visible_if": "{{ block.settings.need_btn == true }}"
325
343
  },
326
344
  {
327
345
  "type": "color",
328
346
  "id": "btn_background_color",
329
347
  "label": "Button Background Color",
330
- "info": "按钮的背景颜色"
348
+ "info": "按钮的背景颜色",
349
+ "visible_if": "{{ block.settings.need_btn == true }}"
331
350
  },
332
351
  {
333
352
  "type": "color",
334
353
  "id": "btn_color",
335
354
  "label": "Button Text Color",
336
- "info": "按钮的文本颜色"
355
+ "info": "按钮的文本颜色",
356
+ "visible_if": "{{ block.settings.need_btn == true }}"
337
357
  }
338
358
  ]
339
359
  },
@@ -358,10 +378,11 @@
358
378
  ]
359
379
  },
360
380
  {
361
- "type": "textarea",
362
- "id": "linksbanner",
363
- "label": "Sites Link Map banner",
364
- "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ "
381
+ "type": "text",
382
+ "id": "banner_name",
383
+ "label": "Banner name",
384
+ "default": "default_name",
385
+ "info": "用于埋点统计，英文下划线连接单词，banner_name_1"
365
386
  },
366
387
  {
367
388
  "type": "select",
@@ -465,11 +486,26 @@
465
486
  "id": "posterMb",
466
487
  "label": "poster Mb"
467
488
  },
489
+ {
490
+ "type": "checkbox",
491
+ "id": "need_btn",
492
+ "label": "是否需要按钮",
493
+ "default": true,
494
+ "info": "无按钮，设置banner链接"
495
+ },
496
+ {
497
+ "type": "textarea",
498
+ "id": "linksbanner",
499
+ "label": "Sites Link Map banner",
500
+ "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ ",
501
+ "visible_if": "{{ block.settings.need_btn == false }}"
502
+ },
468
503
  {
469
504
  "type": "text",
470
505
  "id": "btn_text",
471
506
  "label": "按钮文字",
472
- "default": "learn more"
507
+ "default": "learn more",
508
+ "visible_if": "{{ block.settings.need_btn == true }}"
473
509
  },
474
510
  {
475
511
  "type": "select",
@@ -485,39 +521,43 @@
485
521
  "label": "多国家映射"
486
522
  },
487
523
  ],
488
- "default": "link"
524
+ "default": "link",
525
+ "visible_if": "{{ block.settings.need_btn == true }}"
489
526
  },
490
527
  {
491
528
  "type": "textarea",
492
529
  "id": "links",
493
530
  "label": "Sites Link Map",
494
531
  "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ ",
495
- "visible_if": "{{ block.settings.function_type == 'link_map' }}"
532
+ "visible_if": "{{ block.settings.function_type == 'link_map' and block.settings.need_btn == true }}"
496
533
  },
497
534
  {
498
535
  "type": "url",
499
536
  "id": "link",
500
537
  "label": "Normal Button Link",
501
538
  "info": "普通按钮跳转地址",
502
- "visible_if": "{{ block.settings.function_type == 'link' }}"
539
+ "visible_if": "{{ block.settings.function_type == 'link' and block.settings.need_btn == true }}"
503
540
  },
504
541
  {
505
542
  "type": "color",
506
543
  "id": "btn_border_color",
507
544
  "label": "Button Border Color",
508
- "info": "按钮的边框颜色"
545
+ "info": "按钮的边框颜色",
546
+ "visible_if": "{{ block.settings.need_btn == true }}"
509
547
  },
510
548
  {
511
549
  "type": "color",
512
550
  "id": "btn_background_color",
513
551
  "label": "Button Background Color",
514
- "info": "按钮的背景颜色"
552
+ "info": "按钮的背景颜色",
553
+ "visible_if": "{{ block.settings.need_btn == true }}"
515
554
  },
516
555
  {
517
556
  "type": "color",
518
557
  "id": "btn_color",
519
558
  "label": "Button Text Color",
520
- "info": "按钮的文本颜色"
559
+ "info": "按钮的文本颜色",
560
+ "visible_if": "{{ block.settings.need_btn == true }}"
521
561
  }
522
562
  ]
523
563
  }
@@ -540,7 +580,7 @@
540
580
  >
541
581
  <div
542
582
  id='{{ banner.id }}-bannerlink'
543
- class='swiper-content tw-w-full tw-max-w-screen tw-relative tw-text-left tw-h-full'
583
+ class='{{ banner.id }}-site-event swiper-content tw-w-full tw-max-w-screen tw-relative tw-text-left tw-h-full'
544
584
  >
545
585
  {%- if banner.type == 'img' -%}
546
586
  {% render 'zz-img',
@@ -638,7 +678,7 @@
638
678
  {%- if banner.settings.function_type == 'link' -%}
639
679
  <a
640
680
  href='{{ banner.settings.link }}'
641
- class='tw-w-fit tw-block tw-no-underline tw-h-[48px] max-lg:tw-px-[20px] lg:tw-px-[24px] max-lg:tw-h-[36px] tw-leading-[48px] max-lg:tw-leading-[36px] tw-text-center tw-rounded-full tw-text-[16px] max-lg:tw-text-[13px] max-lg:tw-mx-auto tw-cursor-pointer'
681
+ class='{{ banner.id }}-site-event tw-w-fit tw-block tw-no-underline tw-h-[48px] max-lg:tw-px-[20px] lg:tw-px-[24px] max-lg:tw-h-[36px] tw-leading-[48px] max-lg:tw-leading-[36px] tw-text-center tw-rounded-full tw-text-[16px] max-lg:tw-text-[13px] max-lg:tw-mx-auto tw-cursor-pointer'
642
682
  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' }}'
643
683
  >
644
684
  {{- banner.settings.btn_text -}}
@@ -647,7 +687,7 @@
647
687
  {%- elsif banner.settings.function_type == 'link_map' -%}
648
688
  <div
649
689
  id='{{ banner.id }}-site-btn'
650
- class='tw-w-fit tw-h-[48px] max-lg:tw-px-[20px] lg:tw-px-[24px] max-lg:tw-h-[36px] tw-leading-[48px] max-lg:tw-leading-[36px] tw-text-center tw-rounded-full tw-text-[16px] max-lg:tw-text-[13px] max-lg:tw-mx-auto tw-cursor-pointer'
690
+ class='{{ banner.id }}-site-event tw-w-fit tw-h-[48px] max-lg:tw-px-[20px] lg:tw-px-[24px] max-lg:tw-h-[36px] tw-leading-[48px] max-lg:tw-leading-[36px] tw-text-center tw-rounded-full tw-text-[16px] max-lg:tw-text-[13px] max-lg:tw-mx-auto tw-cursor-pointer'
651
691
  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' }}'
652
692
  >
653
693
  {{- banner.settings.btn_text -}}
@@ -659,10 +699,42 @@
659
699
  </div>
660
700
  <script>
661
701
  document.addEventListener('DOMContentLoaded', (event) => {
662
- if(document.getElementById('{{ banner.id }}-site-btn')) {
663
- bindSiteJump(document.getElementById('{{ banner.id }}-site-btn'), {{ banner.settings.links | json }})
702
+ const button = document.getElementById('{{ banner.id }}-site-btn')
703
+ const bannerlink = document.getElementById('{{ banner.id }}-bannerlink')
704
+ const eventList = document.querySelectorAll('.{{ banner.id }}-site-event')
705
+ if(button) {
706
+ {% if banner.settings.links != blank %}
707
+ bindSiteJump(button, {{ banner.settings.links | json }})
708
+ {% endif %}
664
709
  }
665
- bindSiteJump(document.getElementById('{{ banner.id }}-bannerlink'), {{ banner.settings.linksbanner | json }})
710
+ if(bannerlink) {
711
+ {% if banner.settings.linksbanner != blank %}
712
+ bindSiteJump(bannerlink, {{ banner.settings.linksbanner | json }})
713
+ {% endif %}
714
+ }
715
+ console.log('eventList', eventList)
716
+ if(eventList) {
717
+ eventList.forEach(item => {
718
+ item.addEventListener('click', (event) => {
719
+ event.preventDefault();
720
+ event.stopPropagation();
721
+ console.log('banner.settings.banner_name', {
722
+ event: "banner_click",
723
+ timestamp: new Date().toISOString(),
724
+ event_type_attribute: "{{ banner.settings.banner_name }}",
725
+ section_name: "swiper_banner_v3",
726
+ })
727
+ dataLayer.push({
728
+ event: "banner_click",
729
+ timestamp: new Date().toISOString(),
730
+ event_type_attribute: "{{ banner.settings.banner_name }}",
731
+ section_name: "swiper_banner_v3",
732
+ });
733
+ });
734
+ });
735
+ }
736
+
737
+
666
738
  })
667
739
  </script>
668
740
  </div>
@@ -685,6 +757,7 @@
685
757
 
686
758
  <script>
687
759
  document.addEventListener('DOMContentLoaded', (event) => {
760
+
688
761
  const VIDEO_IMG_SWIPER = new Swiper('#shopify-section-{{section.id}} .swiper-banner-video-img', {
689
762
  loop: true,
690
763
  spaceBetween: 0,
@@ -803,23 +876,6 @@
803
876
  }
804
877
  }
805
878
 
806
- // function updataVideoProgress(videoDom) {
807
- // const activeBullet = document.querySelector(".swiper-banner-video-img .swiper-pagination-bullet-active");
808
- // const progressBar = activeBullet.querySelector(".progress-bar");
809
- // if (progressBar) {
810
- // let progress = 0
811
- // if(progressInterval) clearInterval(progressInterval)
812
- // progressInterval = setInterval(() => {
813
- // if(progress >= 1) {
814
- // clearInterval(progressInterval)
815
- // progress = 1
816
- // } else {
817
- // }
818
- // progressBar.style.transition = "0.25s";
819
- // progressBar.style.width = `${(progress) * 100}%`;
820
- // }, 200);
821
- // }
822
- // }
823
879
 
824
880
  {% comment %} 下一个滑块之后判断类型 {% endcomment %}
825
881
  VIDEO_IMG_SWIPER.on('slideChangeTransitionEnd ', function () {