zz-shopify-components 0.36.1-beta.2 → 0.36.1-beta.4

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 (3) hide show
  1. package/package.json +1 -1
  2. package/sections/zz-swiper-banner.liquid +35 -26
  3. package/sections/zz-video-tab-swiper.liquid +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zz-shopify-components",
3
- "version": "0.36.1-beta.2",
3
+ "version": "0.36.1-beta.4",
4
4
  "description": "Reusable Shopify components for theme projects",
5
5
  "keywords": [
6
6
  "shopify",
package/sections/zz-swiper-banner.liquid CHANGED
@@ -100,14 +100,14 @@
100
100
  color: #2D2D2D;
101
101
  }
102
102
  #shopify-section-{{section.id}} .discount_sale_type .banner-title {
103
- font-size: 24px;
103
+ font-size: 20px;
104
104
  line-height: 1.3;
105
105
  margin-bottom: 16px;
106
106
  }
107
107
  #shopify-section-{{section.id}} .discount_sale_type .banner-description {
108
108
  font-size: 24px;
109
109
  line-height: 1.3;
110
- font-weight: 400;
110
+ font-weight: 700;
111
111
  }
112
112
  #shopify-section-{{section.id}} .product_type .banner-description {
113
113
  font-size: 28px;
@@ -270,14 +270,14 @@
270
270
  }
271
271
 
272
272
  #shopify-section-{{section.id}} .discount_sale_type .banner-title {
273
- font-size: 1.6rem;
273
+ font-size: 1.4rem;
274
274
  line-height: 1.2;
275
- margin-bottom: 0.4rem;
275
+ margin-bottom: 0.8rem;
276
276
  }
277
277
  #shopify-section-{{section.id}} .discount_sale_type .banner-description{
278
- font-size: 1.4rem;
279
- line-height: 1.3;
280
- font-weight: 400;
278
+ font-size: 1.6rem;
279
+ line-height: 1.2;
280
+ font-weight: 700;
281
281
  }
282
282
  #shopify-section-{{section.id}} .product_type .banner-description {
283
283
  font-size: 1.8rem;
@@ -426,13 +426,13 @@
426
426
  {
427
427
  "type": "richtext",
428
428
  "id": "title",
429
- "label": "标题",
429
+ "label": "标题/活动日期",
430
430
  "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
431
431
  },
432
432
  {
433
433
  "type": "richtext",
434
434
  "id": "title_mb",
435
- "label": "标题 Mobile",
435
+ "label": "标题/活动日期 Mobile",
436
436
  "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
437
437
  },
438
438
  {
@@ -440,7 +440,7 @@
440
440
  "id": "discount_text",
441
441
  "label": "折扣",
442
442
  "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' }}",
443
- "info": "折扣，如：90,会显示UP TO 90% OFF"
443
+ "info": "折扣，如：90%,会显示UP TO 90% OFF"
444
444
  },
445
445
  {
446
446
  "type": "richtext",
@@ -701,13 +701,13 @@
701
701
  {
702
702
  "type": "richtext",
703
703
  "id": "title",
704
- "label": "标题",
704
+ "label": "标题/活动日期",
705
705
  "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
706
706
  },
707
707
  {
708
708
  "type": "richtext",
709
709
  "id": "title_mb",
710
- "label": "标题 Mobile",
710
+ "label": "标题/活动日期 Mobile",
711
711
  "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}",
712
712
  },
713
713
  {
@@ -715,7 +715,7 @@
715
715
  "id": "discount_text",
716
716
  "label": "折扣",
717
717
  "visible_if": "{{ block.settings.banner_type == 'discount_sale_type' }}",
718
- "info": "折扣，如：90,会显示UP TO 90% OFF"
718
+ "info": "折扣，如：90%,会显示UP TO 90% OFF"
719
719
  },
720
720
  {
721
721
  "type": "richtext",
@@ -905,8 +905,7 @@
905
905
  >
906
906
  <div
907
907
  id='{{ banner.id }}-bannerlink'
908
- class='{{ banner.id }}-site-event swiper-content tw-w-full tw-max-w-screen tw-relative tw-text-left tw-h-full'
909
- style="{% if banner.settings.btn_type == 'none' %}cursor: pointer;{% endif %}"
908
+ class='{{ banner.id }}-site-event swiper-content tw-w-full tw-max-w-screen tw-relative tw-text-left tw-h-full tw-cursor-pointer'
910
909
  {% if banner.settings.btn_type == 'none' and banner.settings.banner_name != blank %}
911
910
  data-track-zz-element="{{ banner.settings.banner_name }}"
912
911
  {% endif %}
@@ -915,7 +914,7 @@
915
914
  {% render 'zz-img',
916
915
  pc_image: banner.settings.banner,
917
916
  mb_image: banner.settings.banner_mb,
918
- image_alt: banner.settings.title | escape,
917
+ image_alt: banner.settings.title,
919
918
  class_name: "zz-swiper-banner-img-video",
920
919
  %}
921
920
 
@@ -958,16 +957,16 @@
958
957
 
959
958
  {% endif %}
960
959
  <div
961
- class='center-content tw-absolute lg:tw-left-[50%] lg:tw-top-[50%] lg:tw-translate-x-[-50%] lg:tw-translate-y-[-50%] 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'
960
+ 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'
962
961
  >
963
- <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 %}'>
962
+ <div class='swiper-content-text {% if banner.settings.banner_type == 'image_type' %} lg:tw-w-[560px] {% else %} lg:tw-w-[784px] {% endif %}'>
964
963
  {%- if banner.settings.banner_type == 'product_type' or banner.settings.banner_type == 'title_description_type' or banner.settings.banner_type == 'discount_sale_type' -%}
965
964
  {% if banner.settings.banner_type == 'product_type' and banner.settings.product_logo != blank %}
966
965
  <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]">
967
966
  {% render 'zz-img',
968
967
  pc_image: banner.settings.product_logo,
969
968
  mb_image: banner.settings.product_logo_mb,
970
- image_alt: banner.settings.banner_name | escape,
969
+ image_alt: banner.settings.banner_name,
971
970
  class_name: "lg:!tw-h-full lg:!tw-w-auto max-lg:!tw-w-full max-lg:!tw-h-auto",
972
971
  %}
973
972
  </div>
@@ -975,13 +974,13 @@
975
974
 
976
975
  {% if banner.settings.banner_type == 'discount_sale_type' or banner.settings.banner_type == 'title_description_type' %}
977
976
  <div
978
- class='banner-title max-lg:tw-hidden tw-p-0 tw-leading-[1.2] tw-font-bold max-lg:tw-text-center'
977
+ class='banner-title max-lg:tw-hidden tw-p-0 tw-leading-[1.2] {% if banner.settings.banner_type == 'title_description_type' %} tw-font-bold {% endif %} max-lg:tw-text-center'
979
978
  style='color: {{ banner.settings.color | default: 'white' }};'
980
979
  >
981
980
  {{ banner.settings.title }}
982
981
  </div>
983
982
  <div
984
- class='banner-title lg:tw-hidden tw-p-0 tw-font-bold max-lg:tw-leading-[1.2] max-lg:tw-text-center'
983
+ class='banner-title lg:tw-hidden tw-p-0 {% if banner.settings.banner_type == 'title_description_type' %} tw-font-bold {% endif %} max-lg:tw-leading-[1.2] max-lg:tw-text-center'
985
984
  style='color: {{ banner.settings.color | default: 'white' }};'
986
985
  >
987
986
  {{ banner.settings.title_mb }}
@@ -990,7 +989,7 @@
990
989
 
991
990
  {% if banner.settings.banner_type == 'discount_sale_type' %}
992
991
  <div
993
- 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'
992
+ class='banner-discount_text tw-p-0 max-lg:tw-mt-[8px] max-lg:tw-mb-[7px] lg:tw-mt-[16px] lg:tw-mb-[8px] tw-leading-[1.2] tw-font-bold tw-flex tw-items-center max-lg:tw-justify-center'
994
993
  style='color: {{ banner.settings.color | default: 'white' }};'
995
994
  >
996
995
  <div class="tw-text-[1.9rem] lg:tw-text-[32px] tw-text-center tw-leading-[1] tw-mr-[6px] lg:tw-mr-[8px]"
@@ -1000,13 +999,13 @@
1000
999
  </div>
1001
1000
  {% endif %}
1002
1001
  <div
1003
- class='banner-description max-lg:tw-hidden tw-p-0 tw-leading-[1.5]'
1002
+ class='banner-description max-lg:tw-hidden tw-p-0 tw-leading-[1.5] {% if banner.settings.banner_type == 'discount_sale_type' %} tw-font-bold {% endif %}'
1004
1003
  style='color: {{ banner.settings.color | default: 'white' }}'
1005
1004
  >
1006
1005
  {{ banner.settings.description }}
1007
1006
  </div>
1008
1007
  <div
1009
- class='banner-description lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] max-lg:tw-text-center'
1008
+ class='banner-description lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] max-lg:tw-text-center {% if banner.settings.banner_type == 'discount_sale_type' %} tw-font-bold {% endif %}'
1010
1009
  style='color: {{ banner.settings.color | default: 'white' }}'
1011
1010
  >
1012
1011
  {{ banner.settings.description_mb }}
@@ -1116,8 +1115,18 @@
1116
1115
  {% endif %}
1117
1116
  }
1118
1117
  if(bannerlink) {
1119
- {% if banner.settings.linksbanner != blank %}
1120
- bindSiteJump(bannerlink, {{ banner.settings.linksbanner | json }})
1118
+ {% if banner.settings.btn_type == 'none' %}
1119
+ {% if banner.settings.linksbanner != blank %}
1120
+ bindSiteJump(bannerlink, {{ banner.settings.linksbanner | json }})
1121
+ {% endif %}
1122
+ {% else %}
1123
+ {% if banner.settings.function_type == 'link' and banner.settings.link != blank %}
1124
+ bannerlink.addEventListener('click', () => {
1125
+ window.location.href = "{{ banner.settings.link }}";
1126
+ })
1127
+ {% elsif banner.settings.function_type == 'link_map' and banner.settings.links != blank %}
1128
+ bindSiteJump(bannerlink, {{ banner.settings.links | json }})
1129
+ {% endif %}
1121
1130
  {% endif %}
1122
1131
  }
1123
1132
  if(buttonTwo) {
package/sections/zz-video-tab-swiper.liquid CHANGED
@@ -228,6 +228,8 @@
228
228
  text: block.settings.pc_text,
229
229
  mb_text: block.settings.mb_text,
230
230
  text_color: block.settings.text_color,
231
+ mobile_font_size: 14,
232
+ pc_font_size: 16,
231
233
  class_name: 'tab-content-text tw-text-center max-lg:tw-text-left'
232
234
  %}
233
235
  <style>