zz-shopify-components 0.15.0 → 0.15.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.
- package/assets/zz-components.css +1 -1
- package/blocks/zz-accessories-jp-item.liquid +179 -0
- package/blocks/zz-accessories-swiper.liquid +85 -35
- package/blocks/zz-price-tag-line.liquid +56 -0
- package/blocks/zz-tag.liquid +22 -0
- package/blocks/zz-title.liquid +31 -18
- package/package.json +1 -1
- package/sections/zz-swiper-banner.liquid +98 -46
- package/snippets/zz-price-tag-unit.liquid +35 -0
package/assets/zz-components.css
CHANGED
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
#shopify-block-{{ block.id }} .banner-item {
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
background: {{ block.settings.banner_bg_color }};
|
|
5
|
+
}
|
|
6
|
+
@media screen and (min-width: 1024px) {
|
|
7
|
+
#shopify-block-{{ block.id }} {
|
|
8
|
+
width: 238px;
|
|
9
|
+
height: fit-content;
|
|
10
|
+
}
|
|
11
|
+
#shopify-block-{{ block.id }} .banner-item {
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
background: {{ block.settings.banner_bg_color }};
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
@media screen and (max-width: 1023px) {
|
|
20
|
+
|
|
21
|
+
#shopify-block-{{ block.id }} {
|
|
22
|
+
|
|
23
|
+
height: fit-content;
|
|
24
|
+
width: calc(50% - 8px);
|
|
25
|
+
}
|
|
26
|
+
#shopify-block-{{ block.id }} .banner-item {
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: fit-content;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
}
|
|
32
|
+
</style>
|
|
33
|
+
|
|
34
|
+
{% assign btn_class = 'zz-accessories-item-btn' | append: block.id %}
|
|
35
|
+
|
|
36
|
+
<div class='banner-item lg:tw-px-[27px] lg:tw-py-[37px] max-lg:tw-py-[24px] max-lg:tw-px-[18px] tw-rounded-[4px] lg:tw-rounded-[6px]'>
|
|
37
|
+
<div class='max-lg:tw-px-[15px]'>
|
|
38
|
+
{% render 'zz-img',
|
|
39
|
+
pc_image: block.settings.image_pc,
|
|
40
|
+
mb_image: block.settings.image,
|
|
41
|
+
image_alt: block.settings.slide_title,
|
|
42
|
+
pc_width: 915,
|
|
43
|
+
mb_width: 640,
|
|
44
|
+
%}
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div
|
|
48
|
+
class='slide-title tw-h-[42px] lg:tw-h-[58px] tw-mb-[23px] lg:tw-mb-[34px] tw-text-[16px] lg:tw-text-[18px] tw-leading-[1.3] tw-text-center tw-font-bold tw-text-black'
|
|
49
|
+
style='color: {{ block.settings.slide_title_color }};'>
|
|
50
|
+
{{ block.settings.slide_title }}
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<a
|
|
54
|
+
class='tw-block tw-relative tw-text-center {{ btn_class }} tw-w-full tw-mx-auto tw-mt-[30px] tw-h-[24px] lg:tw-h-[34px] tw-rounded-[3px] tw-cursor-pointer tw-text-white tw-font-medium tw-text-[9px] lg:tw-text-[12px] tw-leading-[24px] lg:tw-leading-[34px] tw-bg-black tw-transition hover:tw-bg-black/80'
|
|
55
|
+
style='background: {{ block.settings.btn_bg_color }}; color: {{ block.settings.btn_text_color }};hover: color: {{ block.settings.btn_hover_color }};'
|
|
56
|
+
href='{{ block.settings.url }}'
|
|
57
|
+
>
|
|
58
|
+
{{ block.settings.btn_text }}
|
|
59
|
+
<span class="max-lg:tw-hidden tw-absolute tw-right-[8px] tw-top-[11px]">
|
|
60
|
+
<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
61
|
+
<path d="M0.630737 11.1126L9.37046 5.90794L0.630737 0.624512" stroke="black" stroke-width="0.661193" stroke-miterlimit="10"/>
|
|
62
|
+
</svg>
|
|
63
|
+
</span>
|
|
64
|
+
<span class="lg:tw-hidden tw-absolute tw-right-[7px] tw-top-[8px]">
|
|
65
|
+
<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
66
|
+
<path d="M0.630737 11.1126L9.37046 5.90794L0.630737 0.624512" stroke="black" stroke-width="0.661193" stroke-miterlimit="10"/>
|
|
67
|
+
</svg>
|
|
68
|
+
</span>
|
|
69
|
+
|
|
70
|
+
</a>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
{% if block.settings.function_type == 'link_map' %}
|
|
74
|
+
<script>
|
|
75
|
+
document.addEventListener('DOMContentLoaded', (event) => {
|
|
76
|
+
const btns = document.querySelectorAll('.{{ btn_class }}')
|
|
77
|
+
if(btns && btns[0]) {
|
|
78
|
+
if(window.bindSiteJump) {
|
|
79
|
+
bindSiteJump(btns[0], {{ block.settings.links | json }})
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
})
|
|
84
|
+
</script>
|
|
85
|
+
{% endif %}
|
|
86
|
+
|
|
87
|
+
{% schema %}
|
|
88
|
+
{
|
|
89
|
+
"name": "Accessories Japan Item",
|
|
90
|
+
"settings": [
|
|
91
|
+
{
|
|
92
|
+
"type": "color",
|
|
93
|
+
"id": "banner_bg_color",
|
|
94
|
+
"default": "#F5F5F6",
|
|
95
|
+
"label": "轮播卡片背景色"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"type": "image_picker",
|
|
99
|
+
"id": "image_pc",
|
|
100
|
+
"label": "Image"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"type": "image_picker",
|
|
104
|
+
"id": "image",
|
|
105
|
+
"label": "Image(mobile)"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"type": "richtext",
|
|
109
|
+
"id": "slide_title",
|
|
110
|
+
"label": "标题"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"type": "color",
|
|
114
|
+
"id": "slide_title_color",
|
|
115
|
+
"default": "#000000",
|
|
116
|
+
"label": "标题颜色"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"type": "text",
|
|
120
|
+
"id": "btn_text",
|
|
121
|
+
"label": "按钮文字",
|
|
122
|
+
"default": "Buy Now"
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"type": "color",
|
|
126
|
+
"id": "btn_bg_color",
|
|
127
|
+
"default": "#000000",
|
|
128
|
+
"label": "按钮背景颜色"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"type": "color",
|
|
132
|
+
"id": "btn_hover_color",
|
|
133
|
+
"default": "#000000",
|
|
134
|
+
"label": "按钮hover颜色"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"type": "color",
|
|
138
|
+
"id": "btn_text_color",
|
|
139
|
+
"default": "#FFFFFF",
|
|
140
|
+
"label": "按钮文字颜色"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"type": "select",
|
|
144
|
+
"id": "function_type",
|
|
145
|
+
"label": "功能类型",
|
|
146
|
+
"options": [
|
|
147
|
+
{
|
|
148
|
+
"value": "link",
|
|
149
|
+
"label": "链接"
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"value": "link_map",
|
|
153
|
+
"label": "多国家映射"
|
|
154
|
+
},
|
|
155
|
+
],
|
|
156
|
+
"default": "link"
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"type": "url",
|
|
160
|
+
"id": "url",
|
|
161
|
+
"label": "按钮链接",
|
|
162
|
+
"visible_if": "{{ block.settings.function_type == 'link' }}"
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"type": "textarea",
|
|
166
|
+
"id": "links",
|
|
167
|
+
"label": "Sites Link Map",
|
|
168
|
+
"info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ ",
|
|
169
|
+
"visible_if": "{{ block.settings.function_type == 'link_map' }}"
|
|
170
|
+
},
|
|
171
|
+
],
|
|
172
|
+
|
|
173
|
+
"presets": [
|
|
174
|
+
{
|
|
175
|
+
"name": "Accessories JP Item"
|
|
176
|
+
}
|
|
177
|
+
]
|
|
178
|
+
}
|
|
179
|
+
{% endschema %}
|
|
@@ -23,7 +23,9 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
#shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-slide {
|
|
26
|
-
|
|
26
|
+
{% if block.settings.type != 'japan' %}
|
|
27
|
+
width: 320px;
|
|
28
|
+
{% endif %}
|
|
27
29
|
height: fit-content;
|
|
28
30
|
}
|
|
29
31
|
|
|
@@ -69,6 +71,7 @@
|
|
|
69
71
|
padding-top: 64px;
|
|
70
72
|
padding-bottom: 108px;
|
|
71
73
|
}
|
|
74
|
+
|
|
72
75
|
}
|
|
73
76
|
|
|
74
77
|
@media screen and (max-width: 1023px) {
|
|
@@ -77,14 +80,29 @@
|
|
|
77
80
|
box-sizing: border-box;
|
|
78
81
|
}
|
|
79
82
|
#shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-slide {
|
|
80
|
-
|
|
83
|
+
{% if block.settings.type != 'japan' %}
|
|
84
|
+
width: 100%;
|
|
85
|
+
{% endif %}
|
|
86
|
+
|
|
81
87
|
}
|
|
88
|
+
{% if block.settings.type == 'japan' %}
|
|
89
|
+
#shopify-block-{{ block.id }} .accessories-item-list {
|
|
90
|
+
display: flex;
|
|
91
|
+
flex-wrap: wrap;
|
|
92
|
+
justify-content: space-between;
|
|
93
|
+
gap: 16px;
|
|
94
|
+
}
|
|
95
|
+
{% endif %}
|
|
82
96
|
|
|
83
97
|
#shopify-block-{{ block.id }} .swiper-button-next,
|
|
84
98
|
#shopify-block-{{ block.id }} .swiper-button-prev {
|
|
85
99
|
width: 36px;
|
|
86
100
|
height: 36px;
|
|
101
|
+
{% if block.settings.type == 'japan' %}
|
|
102
|
+
display: none;
|
|
103
|
+
{% endif %}
|
|
87
104
|
}
|
|
105
|
+
|
|
88
106
|
#shopify-block-{{ block.id }} .swiper-button-prev {
|
|
89
107
|
left: 50%;
|
|
90
108
|
transform: translate(-{{ btn_offset }}px, 0px);
|
|
@@ -93,7 +111,11 @@
|
|
|
93
111
|
right: 50%;
|
|
94
112
|
transform: translate({{ btn_offset }}px, 0px);
|
|
95
113
|
}
|
|
114
|
+
|
|
96
115
|
#shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets {
|
|
116
|
+
{% if block.settings.type == 'japan' %}
|
|
117
|
+
display: none;
|
|
118
|
+
{% endif %}
|
|
97
119
|
bottom: 9px;
|
|
98
120
|
}
|
|
99
121
|
|
|
@@ -109,7 +131,7 @@
|
|
|
109
131
|
class='swiper zz-accessories-swiper'
|
|
110
132
|
data-id='{{ block.id }}'
|
|
111
133
|
>
|
|
112
|
-
<div class='swiper-wrapper'>
|
|
134
|
+
<div class='swiper-wrapper accessories-item-list'>
|
|
113
135
|
{% content_for 'blocks' %}
|
|
114
136
|
</div>
|
|
115
137
|
<!-- If we need navigation buttons -->
|
|
@@ -141,39 +163,48 @@
|
|
|
141
163
|
</div>
|
|
142
164
|
|
|
143
165
|
<script>
|
|
144
|
-
|
|
166
|
+
|
|
145
167
|
document.addEventListener('DOMContentLoaded', function () {
|
|
146
|
-
|
|
147
|
-
|
|
168
|
+
const blockId = '{{ block.id }}';
|
|
169
|
+
const type = '{{ block.settings.type }}';
|
|
170
|
+
function initSwiper() {
|
|
171
|
+
// 轮播图每个 wrapper 之间的间距
|
|
172
|
+
let isDesktop = window.innerWidth > 1023;
|
|
173
|
+
if (type === 'japan' && !isDesktop) {
|
|
174
|
+
// 日本移动端直接展示 不轮播
|
|
175
|
+
return;
|
|
176
|
+
}
|
|
148
177
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
178
|
+
// 获取 class zz-accessories-swiper 的元素 且data-id 为 block.id 的元素
|
|
179
|
+
const zzAccessoriesSwiper = document.querySelector(
|
|
180
|
+
`.zz-accessories-swiper[data-id='${blockId}']`
|
|
181
|
+
);
|
|
182
|
+
const swiperWrapper = zzAccessoriesSwiper.querySelector('.swiper-wrapper');
|
|
183
|
+
// 获取当前 swiper-wrapper 下面 所有 第一层 div
|
|
184
|
+
const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
|
|
185
|
+
// 给每个 swiper-slide 添加 class swiper-slide
|
|
186
|
+
swiperSlides.forEach((slide) => {
|
|
187
|
+
slide.classList.add('swiper-slide');
|
|
188
|
+
});
|
|
189
|
+
setTimeout(() => {
|
|
190
|
+
const bannerAccessoriesSwiper = new Swiper('.zz-accessories-swiper', {
|
|
191
|
+
initialSlide: isDesktop ? type === 'japan' ? 2 : 1 : 0,
|
|
192
|
+
slidesPerView: 'auto',
|
|
193
|
+
centeredSlides: true,
|
|
194
|
+
spaceBetween: isDesktop ? 24 : 8,
|
|
195
|
+
navigation: {
|
|
196
|
+
nextEl: '.swiper-button-next',
|
|
197
|
+
prevEl: '.swiper-button-prev',
|
|
198
|
+
},
|
|
199
|
+
pagination: {
|
|
200
|
+
el: '.swiper-pagination',
|
|
201
|
+
clickable: true,
|
|
202
|
+
},
|
|
203
|
+
effect: 'slide',
|
|
204
|
+
});
|
|
205
|
+
}, 200);
|
|
206
|
+
}
|
|
207
|
+
initSwiper();
|
|
177
208
|
});
|
|
178
209
|
</script>
|
|
179
210
|
|
|
@@ -204,7 +235,23 @@
|
|
|
204
235
|
"type": "image_picker",
|
|
205
236
|
"id": "next_icon",
|
|
206
237
|
"label": "轮播下一张图标"
|
|
207
|
-
}
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"type": "select",
|
|
241
|
+
"id": "type",
|
|
242
|
+
"label": "类型",
|
|
243
|
+
"options": [
|
|
244
|
+
{
|
|
245
|
+
"value": "normal",
|
|
246
|
+
"label": "正常模式"
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
"value": "japan",
|
|
250
|
+
"label": "日本站模式"
|
|
251
|
+
},
|
|
252
|
+
],
|
|
253
|
+
"default": "normal"
|
|
254
|
+
},
|
|
208
255
|
],
|
|
209
256
|
"blocks": [
|
|
210
257
|
{
|
|
@@ -212,6 +259,9 @@
|
|
|
212
259
|
},
|
|
213
260
|
{
|
|
214
261
|
"type": "zz-accessories-price-item",
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
"type": "zz-accessories-jp-item"
|
|
215
265
|
}
|
|
216
266
|
],
|
|
217
267
|
"presets": [
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{% assign product = all_products[block.settings.product] %}
|
|
2
|
+
{% assign variant_id = block.settings.variant_id | times: 1 %}
|
|
3
|
+
{% assign variant = product.variants | where: 'id', variant_id | first %}
|
|
4
|
+
|
|
5
|
+
{% if block.settings.custom_currency_unit != blank %}
|
|
6
|
+
{% render 'zz-price-tag-unit',
|
|
7
|
+
price: variant.price,
|
|
8
|
+
compare_at_price: variant.compare_at_price,
|
|
9
|
+
custom_currency_unit: block.settings.custom_currency_unit
|
|
10
|
+
%}
|
|
11
|
+
{% else %}
|
|
12
|
+
{% render 'zz-price-tag',
|
|
13
|
+
price: variant.price,
|
|
14
|
+
compare_at_price: variant.compare_at_price,
|
|
15
|
+
show_discount_percentage_off: block.settings.show_discount_percentage_off
|
|
16
|
+
%}
|
|
17
|
+
{% endif %}
|
|
18
|
+
|
|
19
|
+
{% schema %}
|
|
20
|
+
{
|
|
21
|
+
"name": "Price Tag Line",
|
|
22
|
+
"settings": [
|
|
23
|
+
{
|
|
24
|
+
"type": "product",
|
|
25
|
+
"id": "product",
|
|
26
|
+
"label": "Product",
|
|
27
|
+
"info": "选择产品"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"type": "text",
|
|
31
|
+
"id": "variant_id",
|
|
32
|
+
"label": "Variant ID",
|
|
33
|
+
"placeholder": "变体ID",
|
|
34
|
+
"info": "输入变体ID，变体ID可以在产品编辑页面查看"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"type": "checkbox",
|
|
38
|
+
"id": "show_discount_percentage_off",
|
|
39
|
+
"label": "展示 Off 后缀",
|
|
40
|
+
"default": true
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"type": "text",
|
|
44
|
+
"id": "custom_currency_unit",
|
|
45
|
+
"label": "自定义货币单位",
|
|
46
|
+
"placeholder": "自定义货币单位",
|
|
47
|
+
"info": "输入自定义货币单位，如：円，会放到价格后"
|
|
48
|
+
},
|
|
49
|
+
],
|
|
50
|
+
"presets": [
|
|
51
|
+
{
|
|
52
|
+
"name": "Price Tag Line"
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
{% endschema %}
|
package/blocks/zz-tag.liquid
CHANGED
|
@@ -57,6 +57,26 @@
|
|
|
57
57
|
"default": 10,
|
|
58
58
|
"info": "单位：px"
|
|
59
59
|
},
|
|
60
|
+
{
|
|
61
|
+
"type": "range",
|
|
62
|
+
"id": "pc_font_size",
|
|
63
|
+
"min": 12,
|
|
64
|
+
"max": 60,
|
|
65
|
+
"step": 1,
|
|
66
|
+
"unit": "px",
|
|
67
|
+
"label": "PC Font Size",
|
|
68
|
+
"default": 18
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"type": "range",
|
|
72
|
+
"id": "mb_font_size",
|
|
73
|
+
"min": 12,
|
|
74
|
+
"max": 48,
|
|
75
|
+
"step": 1,
|
|
76
|
+
"unit": "px",
|
|
77
|
+
"label": "Mobile Font Size",
|
|
78
|
+
"default": 14
|
|
79
|
+
},
|
|
60
80
|
{
|
|
61
81
|
"type": "number",
|
|
62
82
|
"id": "pc_padding_x",
|
|
@@ -152,6 +172,7 @@
|
|
|
152
172
|
padding-bottom: {{ block.settings.mobile_padding_y }}px;
|
|
153
173
|
padding-left: {{ block.settings.mobile_padding_x }}px;
|
|
154
174
|
padding-right: {{ block.settings.mobile_padding_x }}px;
|
|
175
|
+
font-size: {{ block.settings.mb_font_size }}px;
|
|
155
176
|
{% if block.settings.border_color != blank %}
|
|
156
177
|
border: 1px solid {{ block.settings.border_color }};
|
|
157
178
|
{% endif %}
|
|
@@ -164,6 +185,7 @@
|
|
|
164
185
|
padding-bottom: {{ block.settings.pc_padding_y }}px;
|
|
165
186
|
padding-left: {{ block.settings.pc_padding_x }}px;
|
|
166
187
|
padding-right: {{ block.settings.pc_padding_x }}px;
|
|
188
|
+
font-size: {{ block.settings.pc_font_size }}px;
|
|
167
189
|
{% if block.settings.border_color != blank %}
|
|
168
190
|
border: 2px solid {{ block.settings.border_color }};
|
|
169
191
|
{% endif %}
|
package/blocks/zz-title.liquid
CHANGED
|
@@ -28,26 +28,13 @@
|
|
|
28
28
|
],
|
|
29
29
|
"default": "h2"
|
|
30
30
|
},
|
|
31
|
+
|
|
31
32
|
{
|
|
32
|
-
"type": "
|
|
33
|
-
"id": "
|
|
34
|
-
"label": "
|
|
35
|
-
"options": [
|
|
36
|
-
{ "value": "default", "label": "默认" },
|
|
37
|
-
{ "value": "custom", "label": "自定义" }
|
|
38
|
-
],
|
|
39
|
-
"default": "default"
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"type": "range",
|
|
43
|
-
"id": "pc_font_weight_custom",
|
|
44
|
-
"label": "PC Font Weight Custom",
|
|
45
|
-
"min": 100,
|
|
46
|
-
"max": 900,
|
|
47
|
-
"step": 100,
|
|
48
|
-
"default": 700,
|
|
49
|
-
"visible_if": "{{ block.settings.pc_font_weight == 'custom' }}"
|
|
33
|
+
"type": "text",
|
|
34
|
+
"id": "line_height",
|
|
35
|
+
"label": "Line Height",
|
|
50
36
|
},
|
|
37
|
+
|
|
51
38
|
{
|
|
52
39
|
"type": "checkbox",
|
|
53
40
|
"id": "italic",
|
|
@@ -94,6 +81,26 @@
|
|
|
94
81
|
"label": "PC下外边距 (Margin Bottom)",
|
|
95
82
|
"default": 0
|
|
96
83
|
},
|
|
84
|
+
{
|
|
85
|
+
"type": "select",
|
|
86
|
+
"id": "pc_font_weight",
|
|
87
|
+
"label": "PC Font Weight",
|
|
88
|
+
"options": [
|
|
89
|
+
{ "value": "default", "label": "默认" },
|
|
90
|
+
{ "value": "custom", "label": "自定义" }
|
|
91
|
+
],
|
|
92
|
+
"default": "default"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"type": "range",
|
|
96
|
+
"id": "pc_font_weight_custom",
|
|
97
|
+
"label": "PC Font Weight Custom",
|
|
98
|
+
"min": 100,
|
|
99
|
+
"max": 900,
|
|
100
|
+
"step": 100,
|
|
101
|
+
"default": 700,
|
|
102
|
+
"visible_if": "{{ block.settings.pc_font_weight == 'custom' }}"
|
|
103
|
+
},
|
|
97
104
|
{
|
|
98
105
|
"type": "header",
|
|
99
106
|
"content": "📱 移动端样式设置"
|
|
@@ -284,4 +291,10 @@
|
|
|
284
291
|
}
|
|
285
292
|
{% endif %}
|
|
286
293
|
|
|
294
|
+
{% if block.settings.line_height %}
|
|
295
|
+
#shopify-block-{{ block.id }} .zz-title-hx {
|
|
296
|
+
line-height: {{ block.settings.line_height }};
|
|
297
|
+
}
|
|
298
|
+
{% endif %}
|
|
299
|
+
|
|
287
300
|
</style>
|
package/package.json
CHANGED
|
@@ -198,10 +198,11 @@
|
|
|
198
198
|
]
|
|
199
199
|
},
|
|
200
200
|
{
|
|
201
|
-
"type": "
|
|
202
|
-
"id": "
|
|
203
|
-
"label": "
|
|
204
|
-
"
|
|
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": "
|
|
362
|
-
"id": "
|
|
363
|
-
"label": "
|
|
364
|
-
"
|
|
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,38 @@
|
|
|
659
699
|
</div>
|
|
660
700
|
<script>
|
|
661
701
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
662
|
-
|
|
663
|
-
|
|
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
|
+
bindSiteJump(button, {{ banner.settings.links | json }})
|
|
664
707
|
}
|
|
665
|
-
|
|
708
|
+
if(bannerlink) {
|
|
709
|
+
bindSiteJump(bannerlink, {{ banner.settings.linksbanner | json }})
|
|
710
|
+
}
|
|
711
|
+
console.log('eventList', eventList)
|
|
712
|
+
if(eventList) {
|
|
713
|
+
eventList.forEach(item => {
|
|
714
|
+
item.addEventListener('click', (event) => {
|
|
715
|
+
event.preventDefault();
|
|
716
|
+
event.stopPropagation();
|
|
717
|
+
console.log('banner.settings.banner_name', {
|
|
718
|
+
event: "banner_click",
|
|
719
|
+
timestamp: new Date().toISOString(),
|
|
720
|
+
event_type_attribute: "{{ banner.settings.banner_name }}",
|
|
721
|
+
section_name: "swiper_banner_v3",
|
|
722
|
+
})
|
|
723
|
+
dataLayer.push({
|
|
724
|
+
event: "banner_click",
|
|
725
|
+
timestamp: new Date().toISOString(),
|
|
726
|
+
event_type_attribute: "{{ banner.settings.banner_name }}",
|
|
727
|
+
section_name: "swiper_banner_v3",
|
|
728
|
+
});
|
|
729
|
+
});
|
|
730
|
+
});
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
|
|
666
734
|
})
|
|
667
735
|
</script>
|
|
668
736
|
</div>
|
|
@@ -685,6 +753,7 @@
|
|
|
685
753
|
|
|
686
754
|
<script>
|
|
687
755
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
756
|
+
|
|
688
757
|
const VIDEO_IMG_SWIPER = new Swiper('#shopify-section-{{section.id}} .swiper-banner-video-img', {
|
|
689
758
|
loop: true,
|
|
690
759
|
spaceBetween: 0,
|
|
@@ -803,23 +872,6 @@
|
|
|
803
872
|
}
|
|
804
873
|
}
|
|
805
874
|
|
|
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
875
|
|
|
824
876
|
{% comment %} 下一个滑块之后判断类型 {% endcomment %}
|
|
825
877
|
VIDEO_IMG_SWIPER.on('slideChangeTransitionEnd ', function () {
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{% assign discount_value = compare_at_price | minus: price %}
|
|
2
|
+
{% assign discount_value = discount_value | money_without_currency %}
|
|
3
|
+
|
|
4
|
+
<zz-price-custom-currency-unit
|
|
5
|
+
class='tw-flex tw-items-center'
|
|
6
|
+
unit='{{ custom_currency_unit }}'
|
|
7
|
+
price='{{ price | money_without_currency }}'
|
|
8
|
+
compare-price='{{ compare_at_price | money_without_currency }}'
|
|
9
|
+
discount='{{ discount_value }}'
|
|
10
|
+
>
|
|
11
|
+
<span class='tw-font-[800] tw-text-[18px] lg:tw-text-[28px] xl:tw-text-[36px] tw-text-black'>
|
|
12
|
+
{{ price | money_without_currency }}{{ custom_currency_unit }}
|
|
13
|
+
</span>
|
|
14
|
+
{% if compare_at_price > price %}
|
|
15
|
+
<span class='before tw-font-regular tw-ml-[4px] lg:tw-ml-[8px] tw-text-[16px] lg:tw-text-[18px] xl:tw-text-[22px] tw-text-[rgba(0,0,0,0.3)] tw-line-through'>
|
|
16
|
+
{{ compare_at_price | money_without_currency }}{{ custom_currency_unit }}
|
|
17
|
+
</span>
|
|
18
|
+
|
|
19
|
+
<div class='discount-value-tag tw-relative tw-font-semibold tw-text-[#DF483F] tw-bg-[#FCD8D6]
|
|
20
|
+
max-lg:tw-w-[124px] max-lg:tw-ml-[14px] max-lg:tw-text-[14px] max-lg:tw-pl-[18px] max-lg:tw-pr-[12px] max-lg:tw-h-[22px] max-lg:tw-leading-[22px]
|
|
21
|
+
lg:tw-w-[182px] lg:tw-ml-[20px] xl:tw-ml-[24px] lg:tw-pl-[30px] lg:tw-pr-[15px] lg:tw-text-[20px] lg:tw-h-[37px] lg:tw-leading-[37px]'>
|
|
22
|
+
{{ discount_value }}{{ custom_currency_unit }}OFF
|
|
23
|
+
</div>
|
|
24
|
+
{% endif %}
|
|
25
|
+
</zz-price-custom-currency-unit>
|
|
26
|
+
<style>
|
|
27
|
+
.discount-value-tag {
|
|
28
|
+
background: url("https://cdn.shopify.com/s/files/1/0606/0969/1734/files/Rectangle_34625370.png?v=1757328788");
|
|
29
|
+
background-size: 100% 100%;
|
|
30
|
+
background-repeat: no-repeat;
|
|
31
|
+
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
</style>
|