zz-shopify-components 0.3.0 → 0.3.1-beta.0
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/blocks/zz-accessories-item.liquid +1 -3
- package/blocks/zz-accessories-price-item.liquid +183 -0
- package/blocks/zz-accessories-swiper.liquid +4 -1
- package/blocks/zz-flex-layout-bg-block.liquid +51 -3
- package/blocks/zz-flex-layout-block.liquid +36 -5
- package/package.json +1 -1
- package/snippets/zz-img-md.liquid +3 -4
- package/snippets/zz-img.liquid +4 -5
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
|
|
3
|
+
#shopify-block-{{ block.id }} {
|
|
4
|
+
width: 320px;
|
|
5
|
+
height: fit-content;
|
|
6
|
+
}
|
|
7
|
+
#shopify-block-{{ block.id }} .banner-item {
|
|
8
|
+
position: relative;
|
|
9
|
+
width: 320px;
|
|
10
|
+
height: 438px;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
background: {{ block.settings.banner_bg_color }};
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@media screen and (max-width: 1023px) {
|
|
16
|
+
|
|
17
|
+
#shopify-block-{{ block.id }} {
|
|
18
|
+
width: 100%;
|
|
19
|
+
}
|
|
20
|
+
#shopify-block-{{ block.id }} .banner-item {
|
|
21
|
+
width: 100%;
|
|
22
|
+
height: auto;
|
|
23
|
+
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
28
|
+
|
|
29
|
+
{% assign btn_class = 'zz-accessories-item-btn' | append: block.id %}
|
|
30
|
+
|
|
31
|
+
<div class='banner-item tw-pb-[20px] tw-px-[20px] tw-rounded-[12px] lg:tw-rounded-[16px]'>
|
|
32
|
+
<div class='max-lg:tw-px-[15px]'>
|
|
33
|
+
{% render 'zz-img',
|
|
34
|
+
pc_image: block.settings.image_pc,
|
|
35
|
+
mb_image: block.settings.image,
|
|
36
|
+
image_alt: block.settings.slide_title,
|
|
37
|
+
pc_width: 915,
|
|
38
|
+
mb_width: 640,
|
|
39
|
+
%}
|
|
40
|
+
</div>
|
|
41
|
+
<div class="tw-flex tw-flex-col tw-justify-center tw-items-center lg:tw-h-[110px]">
|
|
42
|
+
<p
|
|
43
|
+
class='slide-title tw-mt-[20px] lg:tw-mt-[30px] tw-mb-[8px] tw-text-[16px] lg:tw-text-[18px] tw-leading-[1.2] tw-text-center tw-font-bold tw-text-black'
|
|
44
|
+
style='color: {{ block.settings.slide_title_color }};'>
|
|
45
|
+
{{ block.settings.slide_title }}
|
|
46
|
+
</p>
|
|
47
|
+
{% content_for 'blocks' %}
|
|
48
|
+
</div>
|
|
49
|
+
<a
|
|
50
|
+
class='tw-block {{ btn_class }} tw-mx-auto tw-mt-[30px] tw-px-[28px] lg:tw-px-[12px] tw-w-fit tw-h-[42px] lg:tw-h-[28px] tw-rounded-[3px] tw-cursor-pointer tw-text-white tw-font-medium tw-text-[16px] lg:tw-text-[14px] tw-leading-[42px] lg:tw-leading-[28px] tw-bg-black tw-transition hover:tw-bg-black/80'
|
|
51
|
+
style='background: {{ block.settings.btn_bg_color }}; color: {{ block.settings.btn_text_color }};hover: color: {{ block.settings.btn_hover_color }};'
|
|
52
|
+
href='{{ block.settings.url }}'
|
|
53
|
+
>
|
|
54
|
+
{{ block.settings.btn_text }}
|
|
55
|
+
</a>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
{% if block.settings.function_type == 'link_map' %}
|
|
59
|
+
<script>
|
|
60
|
+
document.addEventListener('DOMContentLoaded', (event) => {
|
|
61
|
+
const btns = document.querySelectorAll('.{{ btn_class }}')
|
|
62
|
+
if(btns && btns[0]) {
|
|
63
|
+
if(window.bindSiteJump) {
|
|
64
|
+
bindSiteJump(btns[0], {{ block.settings.links | json }})
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
})
|
|
69
|
+
</script>
|
|
70
|
+
{% endif %}
|
|
71
|
+
|
|
72
|
+
{% schema %}
|
|
73
|
+
{
|
|
74
|
+
"name": "Accessories Price Item",
|
|
75
|
+
"settings": [
|
|
76
|
+
{
|
|
77
|
+
"type": "color",
|
|
78
|
+
"id": "banner_bg_color",
|
|
79
|
+
"default": "#F5F5F6",
|
|
80
|
+
"label": "轮播卡片背景色"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"type": "image_picker",
|
|
84
|
+
"id": "image_pc",
|
|
85
|
+
"label": "Image"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"type": "image_picker",
|
|
89
|
+
"id": "image",
|
|
90
|
+
"label": "Image(mobile)"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"type": "text",
|
|
94
|
+
"id": "slide_title",
|
|
95
|
+
"label": "标题"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"type": "color",
|
|
99
|
+
"id": "slide_title_color",
|
|
100
|
+
"default": "#000000",
|
|
101
|
+
"label": "标题颜色"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"type": "richtext",
|
|
105
|
+
"id": "slide_content",
|
|
106
|
+
"label": "内容"
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"type": "color",
|
|
110
|
+
"id": "slide_content_color",
|
|
111
|
+
"default": "#170B01",
|
|
112
|
+
"label": "内容颜色"
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"type": "text",
|
|
116
|
+
"id": "btn_text",
|
|
117
|
+
"label": "按钮文字",
|
|
118
|
+
"default": "Buy Now"
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"type": "color",
|
|
122
|
+
"id": "btn_bg_color",
|
|
123
|
+
"default": "#000000",
|
|
124
|
+
"label": "按钮背景颜色"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"type": "color",
|
|
128
|
+
"id": "btn_hover_color",
|
|
129
|
+
"default": "#000000",
|
|
130
|
+
"label": "按钮hover颜色"
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"type": "color",
|
|
134
|
+
"id": "btn_text_color",
|
|
135
|
+
"default": "#FFFFFF",
|
|
136
|
+
"label": "按钮文字颜色"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"type": "select",
|
|
140
|
+
"id": "function_type",
|
|
141
|
+
"label": "功能类型",
|
|
142
|
+
"options": [
|
|
143
|
+
{
|
|
144
|
+
"value": "link",
|
|
145
|
+
"label": "链接"
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"value": "link_map",
|
|
149
|
+
"label": "多国家映射"
|
|
150
|
+
},
|
|
151
|
+
],
|
|
152
|
+
"default": "link"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"type": "url",
|
|
156
|
+
"id": "url",
|
|
157
|
+
"label": "按钮链接",
|
|
158
|
+
"visible_if": "{{ block.settings.function_type == 'link' }}"
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"type": "textarea",
|
|
162
|
+
"id": "links",
|
|
163
|
+
"label": "Sites Link Map",
|
|
164
|
+
"info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ ",
|
|
165
|
+
"visible_if": "{{ block.settings.function_type == 'link_map' }}"
|
|
166
|
+
},
|
|
167
|
+
],
|
|
168
|
+
|
|
169
|
+
"blocks": [
|
|
170
|
+
{
|
|
171
|
+
"type": "zz-price-tag-mini"
|
|
172
|
+
},
|
|
173
|
+
],
|
|
174
|
+
"presets": [
|
|
175
|
+
{
|
|
176
|
+
"name": "商品+价格 Buy Item"
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"name": "Accessories Price Item"
|
|
180
|
+
}
|
|
181
|
+
]
|
|
182
|
+
}
|
|
183
|
+
{% endschema %}
|
|
@@ -209,6 +209,9 @@
|
|
|
209
209
|
"blocks": [
|
|
210
210
|
{
|
|
211
211
|
"type": "zz-accessories-item"
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
"type": "zz-accessories-price-item",
|
|
212
215
|
}
|
|
213
216
|
],
|
|
214
217
|
"presets": [
|
|
@@ -216,7 +219,7 @@
|
|
|
216
219
|
"name": "Accessories Swiper Block"
|
|
217
220
|
},
|
|
218
221
|
{
|
|
219
|
-
"name": "
|
|
222
|
+
"name": "商品轮播"
|
|
220
223
|
}
|
|
221
224
|
]
|
|
222
225
|
}
|
|
@@ -159,6 +159,13 @@
|
|
|
159
159
|
"info": "非全屏展示时有效",
|
|
160
160
|
"visible_if": "{{ block.settings.pc_full_width == false }}"
|
|
161
161
|
},
|
|
162
|
+
{
|
|
163
|
+
"type": "number",
|
|
164
|
+
"id": "pc_fixed_height",
|
|
165
|
+
"label": "PC端固定高度",
|
|
166
|
+
"default": 0,
|
|
167
|
+
"info": "默认自适应高度，单位：px",
|
|
168
|
+
},
|
|
162
169
|
{
|
|
163
170
|
"type": "header",
|
|
164
171
|
"content": "📱 移动端布局设置"
|
|
@@ -291,6 +298,23 @@
|
|
|
291
298
|
"info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接 EG: Canada: https://hoverair.com/ default: https://hoverair.com/ ",
|
|
292
299
|
"visible_if": "{{ block.settings.function_type == 'link_map' and block.settings.has_link == true }}"
|
|
293
300
|
},
|
|
301
|
+
{
|
|
302
|
+
"type": "select",
|
|
303
|
+
"id": "pc_mobile_show",
|
|
304
|
+
"label": "PC/移动端分开显示",
|
|
305
|
+
"options": [
|
|
306
|
+
{ "value": "pc_mobile_show", "label": "PC/移动端都显示" },
|
|
307
|
+
{ "value": "pc_only", "label": "PC端显示" },
|
|
308
|
+
{ "value": "mobile_only", "label": "移动端显示" }
|
|
309
|
+
],
|
|
310
|
+
"default": "pc_mobile_show"
|
|
311
|
+
},
|
|
312
|
+
{
|
|
313
|
+
"type": "checkbox",
|
|
314
|
+
"id": "overflow_x_hidden",
|
|
315
|
+
"label": "是否禁止横轴移动",
|
|
316
|
+
"default": true
|
|
317
|
+
}
|
|
294
318
|
|
|
295
319
|
],
|
|
296
320
|
"blocks": [
|
|
@@ -372,10 +396,26 @@
|
|
|
372
396
|
#shopify-block-{{ block.id }} {
|
|
373
397
|
width: 100%;
|
|
374
398
|
position: relative;
|
|
375
|
-
|
|
399
|
+
{% if block.settings.overflow_x_hidden %}
|
|
400
|
+
overflow-x: hidden;
|
|
401
|
+
{% endif %}
|
|
376
402
|
background-color: {{ block.settings.background_color }};
|
|
377
403
|
}
|
|
404
|
+
{% if block.settings.pc_mobile_show == "pc_only" %}
|
|
405
|
+
@media (max-width: 1023px) {
|
|
406
|
+
#shopify-block-{{ block.id }} {
|
|
407
|
+
display: none;
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
{% endif %}
|
|
378
411
|
|
|
412
|
+
{% if block.settings.pc_mobile_show == "mobile_only" %}
|
|
413
|
+
@media (min-width: 1024px) {
|
|
414
|
+
#shopify-block-{{ block.id }} {
|
|
415
|
+
display: none;
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
{% endif %}
|
|
379
419
|
#shopify-block-{{ block.id }} .flex-layout-video {
|
|
380
420
|
width: 100%;
|
|
381
421
|
height: auto;
|
|
@@ -421,6 +461,14 @@
|
|
|
421
461
|
transform: translateX(-50%);
|
|
422
462
|
{% endif %}
|
|
423
463
|
}
|
|
464
|
+
{% if block.settings.pc_fixed_height != 0 %}
|
|
465
|
+
#shopify-block-{{ block.id }} .flex-layout-image {
|
|
466
|
+
height: {{ block.settings.pc_fixed_height }}px;
|
|
467
|
+
}
|
|
468
|
+
#shopify-block-{{ block.id }} .flex-layout-image {
|
|
469
|
+
height: {{ block.settings.pc_fixed_height }}px;
|
|
470
|
+
}
|
|
471
|
+
{% endif %}
|
|
424
472
|
}
|
|
425
473
|
|
|
426
474
|
@media (min-width: 1280px) {
|
|
@@ -457,8 +505,8 @@
|
|
|
457
505
|
{% render 'zz-img',
|
|
458
506
|
pc_image: block.settings.pc_background_image,
|
|
459
507
|
mb_image: block.settings.mobile_background_image,
|
|
460
|
-
pc_width:
|
|
461
|
-
mb_width:
|
|
508
|
+
pc_width: 4000,
|
|
509
|
+
mb_width: 1200,
|
|
462
510
|
class_name: 'flex-layout-image',
|
|
463
511
|
%}
|
|
464
512
|
{% endif %}
|
|
@@ -176,6 +176,7 @@
|
|
|
176
176
|
"label": "移动端圆角 (px)",
|
|
177
177
|
"default": 0
|
|
178
178
|
},
|
|
179
|
+
|
|
179
180
|
{
|
|
180
181
|
"type": "header",
|
|
181
182
|
"content": "动画设置"
|
|
@@ -206,6 +207,23 @@
|
|
|
206
207
|
],
|
|
207
208
|
"default": "none-animation"
|
|
208
209
|
},
|
|
210
|
+
{
|
|
211
|
+
"type": "select",
|
|
212
|
+
"id": "pc_mobile_show",
|
|
213
|
+
"label": "PC/移动端分开显示",
|
|
214
|
+
"options": [
|
|
215
|
+
{ "value": "pc_mobile_show", "label": "PC/移动端都显示" },
|
|
216
|
+
{ "value": "pc_only", "label": "PC端显示" },
|
|
217
|
+
{ "value": "mobile_only", "label": "移动端显示" }
|
|
218
|
+
],
|
|
219
|
+
"default": "pc_mobile_show"
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
"type": "checkbox",
|
|
223
|
+
"id": "overflow_x_hidden",
|
|
224
|
+
"label": "是否禁止横轴移动",
|
|
225
|
+
"default": true
|
|
226
|
+
}
|
|
209
227
|
|
|
210
228
|
],
|
|
211
229
|
"blocks": [
|
|
@@ -487,12 +505,26 @@
|
|
|
487
505
|
<style>
|
|
488
506
|
#shopify-block-{{ block.id }} {
|
|
489
507
|
width: 100%;
|
|
490
|
-
|
|
508
|
+
{% if block.settings.overflow_x_hidden %}
|
|
509
|
+
overflow-x: hidden;
|
|
510
|
+
{% endif %}
|
|
491
511
|
}
|
|
512
|
+
{% if block.settings.pc_mobile_show == "pc_only" %}
|
|
513
|
+
@media (max-width: 1023px) {
|
|
514
|
+
#shopify-block-{{ block.id }} {
|
|
515
|
+
display: none;
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
{% endif %}
|
|
519
|
+
|
|
520
|
+
{% if block.settings.pc_mobile_show == "mobile_only" %}
|
|
521
|
+
@media (min-width: 1024px) {
|
|
522
|
+
#shopify-block-{{ block.id }} {
|
|
523
|
+
display: none;
|
|
524
|
+
}
|
|
525
|
+
}
|
|
526
|
+
{% endif %}
|
|
492
527
|
|
|
493
|
-
#shopify-block-{{ block.id }}.flex-layout-block{
|
|
494
|
-
display: flex;
|
|
495
|
-
}
|
|
496
528
|
|
|
497
529
|
#shopify-block-{{ block.id }} .flex-layout-block-container {
|
|
498
530
|
box-sizing: border-box;
|
|
@@ -546,4 +578,3 @@
|
|
|
546
578
|
<div class="flex-layout-block-container {{ block.settings.self_animation }} {{ block.settings.child_animation }}">
|
|
547
579
|
{% content_for 'blocks' %}
|
|
548
580
|
</div>
|
|
549
|
-
|
package/package.json
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
pc_width: pc 端宽度, 做图片尺寸优化
|
|
8
8
|
mb_width: 移动端宽度, 做图片尺寸优化
|
|
9
9
|
{% endcomment %}
|
|
10
|
-
{%- assign pc_width = pc_width | default:
|
|
11
|
-
{%- assign mb_width = mb_width | default:
|
|
10
|
+
{%- assign pc_width = pc_width | default: 4800 -%}
|
|
11
|
+
{%- assign mb_width = mb_width | default: 1200 -%}
|
|
12
12
|
|
|
13
13
|
{%- assign pc_classes = class_name | append: ' max-md:tw-hidden tw-w-full tw-h-auto tw-object-cover' -%}
|
|
14
14
|
{%- assign mb_classes = class_name | append: ' md:tw-hidden tw-w-full tw-h-auto tw-object-cover' -%}
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
| image_tag:
|
|
27
27
|
alt: image_alt,
|
|
28
28
|
class: pc_classes,
|
|
29
|
-
widths: '800, 1000, 1200, 1500, 1800 2000',
|
|
29
|
+
widths: '800, 1000, 1200, 1500, 1800 2000 3000 4000 5000',
|
|
30
30
|
loading: lazy_load
|
|
31
31
|
}}
|
|
32
32
|
{%- endif -%}
|
|
@@ -41,4 +41,3 @@
|
|
|
41
41
|
loading: lazy_load
|
|
42
42
|
}}
|
|
43
43
|
{%- endif -%}
|
|
44
|
-
|
package/snippets/zz-img.liquid
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
pc_width: pc 端宽度, 做图片尺寸优化
|
|
8
8
|
mb_width: 移动端宽度, 做图片尺寸优化
|
|
9
9
|
{% endcomment %}
|
|
10
|
-
{%- assign pc_width = pc_width | default:
|
|
11
|
-
{%- assign mb_width = mb_width | default:
|
|
10
|
+
{%- assign pc_width = pc_width | default: 4800 -%}
|
|
11
|
+
{%- assign mb_width = mb_width | default: 1200 -%}
|
|
12
12
|
|
|
13
13
|
{%- assign pc_classes = class_name | append: ' max-lg:tw-hidden tw-w-full tw-h-auto tw-object-cover' -%}
|
|
14
14
|
{%- assign mb_classes = class_name | append: ' lg:tw-hidden tw-w-full tw-h-auto tw-object-cover' -%}
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
| image_tag:
|
|
27
27
|
alt: image_alt,
|
|
28
28
|
class: pc_classes,
|
|
29
|
-
widths: '800, 1000, 1200, 1500, 1800 2000',
|
|
29
|
+
widths: '800, 1000, 1200, 1500, 1800 2000 3000 4000 5000',
|
|
30
30
|
loading: lazy_load
|
|
31
31
|
}}
|
|
32
32
|
{%- endif -%}
|
|
@@ -37,8 +37,7 @@
|
|
|
37
37
|
| image_tag:
|
|
38
38
|
alt: image_alt,
|
|
39
39
|
class: mb_classes,
|
|
40
|
-
widths: '400, 600, 800',
|
|
40
|
+
widths: '400, 600, 800 1200',
|
|
41
41
|
loading: lazy_load
|
|
42
42
|
}}
|
|
43
43
|
{%- endif -%}
|
|
44
|
-
|