zz-shopify-components 0.36.1-beta.1 → 0.36.1-beta.3
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.
package/package.json
CHANGED
|
@@ -20,12 +20,21 @@
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
@media (min-width: 1024px) {
|
|
23
|
+
#shopify-section-{{section.id}} .center-content {
|
|
24
|
+
{% if section.settings.site == 'central' %}
|
|
25
|
+
width: 85vw;
|
|
26
|
+
{% else %}
|
|
27
|
+
width: 100%;
|
|
28
|
+
padding-left: var(--center-content-padding, 100px);
|
|
29
|
+
padding-right: var(--center-content-padding, 100px);
|
|
30
|
+
{% endif %}
|
|
31
|
+
}
|
|
23
32
|
#shopify-section-{{section.id}} .swiper-banner-video-img .swiper-wrapper {
|
|
24
33
|
width: 100%;
|
|
25
34
|
{% if section.settings.site == 'central' %}
|
|
26
35
|
height: 100vh;
|
|
27
36
|
{% else %}
|
|
28
|
-
height:
|
|
37
|
+
height: 560px !important;
|
|
29
38
|
{% endif %}
|
|
30
39
|
}
|
|
31
40
|
#shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet {
|
|
@@ -124,9 +133,18 @@
|
|
|
124
133
|
}
|
|
125
134
|
|
|
126
135
|
}
|
|
136
|
+
@media (min-width: 1280px) {
|
|
137
|
+
#shopify-section-{{section.id}} .swiper-banner-video-img .swiper-wrapper {
|
|
138
|
+
{% if section.settings.site != 'central' %}
|
|
139
|
+
height: 600px !important;
|
|
140
|
+
{% endif %}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
127
143
|
@media (min-width: 1340px) {
|
|
128
144
|
#shopify-section-{{section.id}} .center-content {
|
|
129
|
-
|
|
145
|
+
{% if section.settings.site == 'central' %}
|
|
146
|
+
width: 1220px;
|
|
147
|
+
{% endif %}
|
|
130
148
|
}
|
|
131
149
|
#shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet {
|
|
132
150
|
width: 200px;
|
|
@@ -488,7 +506,7 @@
|
|
|
488
506
|
"type": "text",
|
|
489
507
|
"id": "btn_text",
|
|
490
508
|
"label": "按钮一文字",
|
|
491
|
-
"default": "Learn
|
|
509
|
+
"default": "Learn More",
|
|
492
510
|
"visible_if": "{{ block.settings.btn_type == 'one' or block.settings.btn_type == 'two' }}"
|
|
493
511
|
},
|
|
494
512
|
{
|
|
@@ -540,7 +558,7 @@
|
|
|
540
558
|
"type": "text",
|
|
541
559
|
"id": "btn_text_two",
|
|
542
560
|
"label": "按钮二文字",
|
|
543
|
-
"default": "
|
|
561
|
+
"default": "Buy Now",
|
|
544
562
|
"visible_if": "{{ block.settings.btn_type == 'two' }}"
|
|
545
563
|
},
|
|
546
564
|
{
|
|
@@ -763,7 +781,7 @@
|
|
|
763
781
|
"type": "text",
|
|
764
782
|
"id": "btn_text",
|
|
765
783
|
"label": "按钮一文字",
|
|
766
|
-
"default": "Learn
|
|
784
|
+
"default": "Learn More",
|
|
767
785
|
"visible_if": "{{ block.settings.btn_type == 'one' or block.settings.btn_type == 'two' }}"
|
|
768
786
|
},
|
|
769
787
|
{
|
|
@@ -815,7 +833,7 @@
|
|
|
815
833
|
"type": "text",
|
|
816
834
|
"id": "btn_text_two",
|
|
817
835
|
"label": "按钮二文字",
|
|
818
|
-
"default": "
|
|
836
|
+
"default": "Buy Now",
|
|
819
837
|
"visible_if": "{{ block.settings.btn_type == 'two' }}"
|
|
820
838
|
},
|
|
821
839
|
{
|
|
@@ -897,7 +915,7 @@
|
|
|
897
915
|
{% render 'zz-img',
|
|
898
916
|
pc_image: banner.settings.banner,
|
|
899
917
|
mb_image: banner.settings.banner_mb,
|
|
900
|
-
image_alt: banner.settings.title
|
|
918
|
+
image_alt: banner.settings.title,
|
|
901
919
|
class_name: "zz-swiper-banner-img-video",
|
|
902
920
|
%}
|
|
903
921
|
|
|
@@ -940,16 +958,16 @@
|
|
|
940
958
|
|
|
941
959
|
{% endif %}
|
|
942
960
|
<div
|
|
943
|
-
class='center-content tw-absolute lg:tw-left-[50%] lg:tw-top-[50%] lg:tw-translate-x-[-50%] lg:tw-translate-y-[-50%]
|
|
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'
|
|
944
962
|
>
|
|
945
|
-
<div class='swiper-content-text {% if banner.settings.banner_type == 'image_type'
|
|
963
|
+
<div class='swiper-content-text {% if banner.settings.banner_type == 'image_type' %} lg:tw-w-[560px] {% else %} lg:tw-w-[784px] {% endif %}'>
|
|
946
964
|
{%- if banner.settings.banner_type == 'product_type' or banner.settings.banner_type == 'title_description_type' or banner.settings.banner_type == 'discount_sale_type' -%}
|
|
947
965
|
{% if banner.settings.banner_type == 'product_type' and banner.settings.product_logo != blank %}
|
|
948
966
|
<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]">
|
|
949
967
|
{% render 'zz-img',
|
|
950
968
|
pc_image: banner.settings.product_logo,
|
|
951
969
|
mb_image: banner.settings.product_logo_mb,
|
|
952
|
-
image_alt: banner.settings.banner_name
|
|
970
|
+
image_alt: banner.settings.banner_name,
|
|
953
971
|
class_name: "lg:!tw-h-full lg:!tw-w-auto max-lg:!tw-w-full max-lg:!tw-h-auto",
|
|
954
972
|
%}
|
|
955
973
|
</div>
|
|
@@ -1098,8 +1116,18 @@
|
|
|
1098
1116
|
{% endif %}
|
|
1099
1117
|
}
|
|
1100
1118
|
if(bannerlink) {
|
|
1101
|
-
{% if banner.settings.
|
|
1102
|
-
|
|
1119
|
+
{% if banner.settings.btn_type == 'none' %}
|
|
1120
|
+
{% if banner.settings.linksbanner != blank %}
|
|
1121
|
+
bindSiteJump(bannerlink, {{ banner.settings.linksbanner | json }})
|
|
1122
|
+
{% endif %}
|
|
1123
|
+
{% else %}
|
|
1124
|
+
{% if banner.settings.function_type == 'link' and banner.settings.link != blank %}
|
|
1125
|
+
bannerlink.addEventListener('click', () => {
|
|
1126
|
+
window.location.href = "{{ banner.settings.link }}";
|
|
1127
|
+
})
|
|
1128
|
+
{% elsif banner.settings.function_type == 'link_map' and banner.settings.links != blank %}
|
|
1129
|
+
bindSiteJump(bannerlink, {{ banner.settings.links | json }})
|
|
1130
|
+
{% endif %}
|
|
1103
1131
|
{% endif %}
|
|
1104
1132
|
}
|
|
1105
1133
|
if(buttonTwo) {
|
|
@@ -1336,5 +1364,50 @@
|
|
|
1336
1364
|
|
|
1337
1365
|
}
|
|
1338
1366
|
handleBannerShow();
|
|
1339
|
-
})
|
|
1367
|
+
});
|
|
1368
|
+
// 添加一个iife，监听窗口大小变化，动态调整 padding-left
|
|
1369
|
+
{% if section.settings.site == 'site' %}
|
|
1370
|
+
(function () {
|
|
1371
|
+
function updatePadding() {
|
|
1372
|
+
|
|
1373
|
+
const width = window.innerWidth;
|
|
1374
|
+
const section = document.getElementById('shopify-section-{{section.id}}');
|
|
1375
|
+
if (!section) return;
|
|
1376
|
+
|
|
1377
|
+
if (width <= 1024) {
|
|
1378
|
+
section.style.removeProperty('--center-content-padding');
|
|
1379
|
+
return;
|
|
1380
|
+
}
|
|
1381
|
+
|
|
1382
|
+
const maxWidth = 1920; // 设定一个"超大屏"的上限
|
|
1383
|
+
const minWidth = 1400; // 缩减到这个宽度停止缩减
|
|
1384
|
+
const maxPadding = 18; // rem
|
|
1385
|
+
const minPadding = 8.37; // rem
|
|
1386
|
+
|
|
1387
|
+
let padding;
|
|
1388
|
+
|
|
1389
|
+
if (width > minWidth && width <= maxWidth) {
|
|
1390
|
+
const ratio = (width - minWidth) / (maxWidth - minWidth);
|
|
1391
|
+
padding = minPadding + (maxPadding - minPadding) * ratio;
|
|
1392
|
+
} else if (width > maxWidth) {
|
|
1393
|
+
padding = maxPadding;
|
|
1394
|
+
} else {
|
|
1395
|
+
padding = minPadding;
|
|
1396
|
+
}
|
|
1397
|
+
console.log('updatePadding', padding);
|
|
1398
|
+
|
|
1399
|
+
section.style.setProperty('--center-content-padding', padding.toFixed(2) + 'rem');
|
|
1400
|
+
}
|
|
1401
|
+
|
|
1402
|
+
let resizeTimer;
|
|
1403
|
+
function handleResize() {
|
|
1404
|
+
clearTimeout(resizeTimer);
|
|
1405
|
+
resizeTimer = setTimeout(updatePadding, 300);
|
|
1406
|
+
}
|
|
1407
|
+
|
|
1408
|
+
window.addEventListener('resize', handleResize);
|
|
1409
|
+
updatePadding();
|
|
1410
|
+
})();
|
|
1411
|
+
{% endif %}
|
|
1412
|
+
|
|
1340
1413
|
</script>
|