zz-shopify-components 0.35.1-beta.3 → 0.35.1-beta.5
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-bottom-popup.liquid +325 -0
- package/blocks/zz-button-v2.liquid +11 -0
- package/package.json +1 -1
- package/snippets/zz-button-v2.liquid +31 -4
- package/snippets/zz-icon.liquid +21 -1
- package/snippets/zz-options-selector.liquid +5 -3
- package/snippets/zz-product-buy-now-select.liquid +20 -5
- package/snippets/zz-version-selector-simple.liquid +3 -8
- package/snippets/zz-video-button.liquid +1 -4
|
@@ -0,0 +1,325 @@
|
|
|
1
|
+
{% liquid
|
|
2
|
+
if block.settings.modal_id != blank
|
|
3
|
+
assign modal_id = block.settings.modal_id
|
|
4
|
+
else
|
|
5
|
+
assign modal_id = 'zz-bottom-popup-' | append: block.id
|
|
6
|
+
endif
|
|
7
|
+
%}
|
|
8
|
+
|
|
9
|
+
<style>
|
|
10
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup {
|
|
11
|
+
display: block;
|
|
12
|
+
width: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__modal {
|
|
16
|
+
display: block;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__overlay {
|
|
20
|
+
position: fixed;
|
|
21
|
+
inset: 0;
|
|
22
|
+
z-index: 39;
|
|
23
|
+
background: rgba(0, 0, 0, 0.5);
|
|
24
|
+
opacity: 0;
|
|
25
|
+
pointer-events: none;
|
|
26
|
+
transition: opacity 0.35s ease;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__overlay.is-open {
|
|
30
|
+
opacity: 1;
|
|
31
|
+
pointer-events: auto;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__content {
|
|
35
|
+
position: fixed;
|
|
36
|
+
left: 0;
|
|
37
|
+
bottom: 0;
|
|
38
|
+
z-index: 40;
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
width: 100vw;
|
|
42
|
+
height: {{ block.settings.mobile_height }}vh;
|
|
43
|
+
max-height: {{ block.settings.mobile_height }}vh;
|
|
44
|
+
padding: {{ block.settings.mobile_padding_top }}px {{ block.settings.mobile_padding_x }}px 0;
|
|
45
|
+
border-radius: 20px 20px 0 0;
|
|
46
|
+
background: {{ block.settings.background_color }};
|
|
47
|
+
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
|
|
48
|
+
opacity: 0;
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
outline: none;
|
|
51
|
+
transform: translate3d(0, 100%, 0);
|
|
52
|
+
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__content.is-open {
|
|
57
|
+
opacity: 1;
|
|
58
|
+
transform: translate3d(0, 0, 0);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__close {
|
|
62
|
+
position: absolute;
|
|
63
|
+
top: 16px;
|
|
64
|
+
right: 16px;
|
|
65
|
+
z-index: 101;
|
|
66
|
+
display: inline-flex;
|
|
67
|
+
width: 32px;
|
|
68
|
+
height: 32px;
|
|
69
|
+
padding: 0;
|
|
70
|
+
border: 0;
|
|
71
|
+
background: transparent;
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__body {
|
|
76
|
+
display: flex;
|
|
77
|
+
flex-direction: column;
|
|
78
|
+
min-height: 0;
|
|
79
|
+
flex: 1 1 auto;
|
|
80
|
+
padding-bottom: 34px;
|
|
81
|
+
overflow-y: auto;
|
|
82
|
+
scrollbar-width: thin;
|
|
83
|
+
scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__body::-webkit-scrollbar {
|
|
87
|
+
width: 6px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__body::-webkit-scrollbar-thumb {
|
|
91
|
+
border-radius: 999px;
|
|
92
|
+
background: rgba(255, 255, 255, 0.18);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__inner {
|
|
96
|
+
width: 100%;
|
|
97
|
+
margin: 0 auto;
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-direction: column;
|
|
100
|
+
align-items: stretch;
|
|
101
|
+
box-sizing: border-box;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@media screen and (min-width: 1024px) {
|
|
105
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__content {
|
|
106
|
+
height: {{ block.settings.pc_height }}vh;
|
|
107
|
+
max-height: {{ block.settings.pc_height }}vh;
|
|
108
|
+
padding-top: {{ block.settings.pc_padding_top }}px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__close {
|
|
112
|
+
top: auto;
|
|
113
|
+
right: auto;
|
|
114
|
+
left: 50%;
|
|
115
|
+
bottom: 30px;
|
|
116
|
+
width: 40px;
|
|
117
|
+
height: 40px;
|
|
118
|
+
transform: translateX(-50%);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__body {
|
|
122
|
+
padding-bottom: 90px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__inner {
|
|
126
|
+
{% if block.settings.pc_full_width %}
|
|
127
|
+
width: 100%;
|
|
128
|
+
{% else %}
|
|
129
|
+
width: {{ block.settings.pc_lg_width }}vw;
|
|
130
|
+
{% endif %}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@media screen and (min-width: 1280px) {
|
|
135
|
+
#shopify-block-{{ block.id }} .zz-bottom-popup__inner {
|
|
136
|
+
{% if block.settings.pc_full_width %}
|
|
137
|
+
width: 100%;
|
|
138
|
+
{% else %}
|
|
139
|
+
width: {{ block.settings.pc_xl_width }}px;
|
|
140
|
+
{% endif %}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
</style>
|
|
144
|
+
|
|
145
|
+
<div class="zz-bottom-popup" {{ block.shopify_attributes }}>
|
|
146
|
+
<zz-normal-modal id="{{ modal_id }}" class="zz-bottom-popup__modal" aria-hidden="true">
|
|
147
|
+
<div class="zz-bottom-popup__overlay" data-modal-overlay></div>
|
|
148
|
+
<div
|
|
149
|
+
class="zz-bottom-popup__content"
|
|
150
|
+
data-modal-content
|
|
151
|
+
role="dialog"
|
|
152
|
+
aria-modal="true"
|
|
153
|
+
aria-labelledby="{{ modal_id }}-title"
|
|
154
|
+
tabindex="-1"
|
|
155
|
+
>
|
|
156
|
+
<button
|
|
157
|
+
class="zz-bottom-popup__close"
|
|
158
|
+
type="button"
|
|
159
|
+
data-modal-close
|
|
160
|
+
aria-label="{{ 'accessibility.close' | t }}"
|
|
161
|
+
>
|
|
162
|
+
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
163
|
+
<foreignObject x="-10" y="-10" width="60" height="60"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(5px);clip-path:url(#zz_bottom_popup_blur_{{ block.id }});height:100%;width:100%"></div></foreignObject><circle data-figma-bg-blur-radius="10" cx="20" cy="20" r="20" fill="white" fill-opacity="0.15"/>
|
|
164
|
+
<path d="M14.1196 25.9395L25.999 14.0601" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
165
|
+
<path d="M14.1196 14.0605L25.999 25.9399" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
166
|
+
<defs>
|
|
167
|
+
<clipPath id="zz_bottom_popup_blur_{{ block.id }}" transform="translate(10 10)"><circle cx="20" cy="20" r="20"/></clipPath>
|
|
168
|
+
</defs>
|
|
169
|
+
</svg>
|
|
170
|
+
</button>
|
|
171
|
+
|
|
172
|
+
<div class="zz-bottom-popup__body">
|
|
173
|
+
<div class="zz-bottom-popup__inner" id="{{ modal_id }}-title">
|
|
174
|
+
{% content_for 'blocks' %}
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
</zz-normal-modal>
|
|
179
|
+
</div>
|
|
180
|
+
|
|
181
|
+
<script>
|
|
182
|
+
(function() {
|
|
183
|
+
var blockRoot = document.getElementById('shopify-block-{{ block.id }}');
|
|
184
|
+
|
|
185
|
+
if (!blockRoot || blockRoot.dataset.bottomPopupBound === 'true') {
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
blockRoot.dataset.bottomPopupBound = 'true';
|
|
190
|
+
|
|
191
|
+
var modal = blockRoot.querySelector('zz-normal-modal');
|
|
192
|
+
var closeButton = blockRoot.querySelector('[data-modal-close]');
|
|
193
|
+
var overlay = blockRoot.querySelector('[data-modal-overlay]');
|
|
194
|
+
var modalTarget = '#{{ modal_id }}';
|
|
195
|
+
var triggers = document.querySelectorAll('[data-zz-modal-target="' + modalTarget + '"]');
|
|
196
|
+
|
|
197
|
+
if (!modal) {
|
|
198
|
+
return;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
triggers.forEach(function(trigger) {
|
|
202
|
+
trigger.setAttribute('aria-controls', '{{ modal_id }}');
|
|
203
|
+
|
|
204
|
+
trigger.addEventListener('click', function() {
|
|
205
|
+
if (typeof modal.show === 'function') {
|
|
206
|
+
modal.show();
|
|
207
|
+
trigger.setAttribute('aria-expanded', 'true');
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
[closeButton, overlay].forEach(function(element) {
|
|
213
|
+
if (!element) {
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
element.addEventListener('click', function() {
|
|
218
|
+
triggers.forEach(function(trigger) {
|
|
219
|
+
trigger.setAttribute('aria-expanded', 'false');
|
|
220
|
+
});
|
|
221
|
+
});
|
|
222
|
+
});
|
|
223
|
+
|
|
224
|
+
document.addEventListener('keydown', function(event) {
|
|
225
|
+
if (event.key === 'Escape') {
|
|
226
|
+
triggers.forEach(function(trigger) {
|
|
227
|
+
trigger.setAttribute('aria-expanded', 'false');
|
|
228
|
+
});
|
|
229
|
+
}
|
|
230
|
+
});
|
|
231
|
+
})();
|
|
232
|
+
</script>
|
|
233
|
+
|
|
234
|
+
{% schema %}
|
|
235
|
+
{
|
|
236
|
+
"name": "ZZ Bottom Popup",
|
|
237
|
+
"settings": [
|
|
238
|
+
{
|
|
239
|
+
"type": "text",
|
|
240
|
+
"id": "modal_id",
|
|
241
|
+
"label": "弹窗 id",
|
|
242
|
+
"info": "用于外部按钮通过 data-zz-modal-target 触发"
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
"type": "color_background",
|
|
246
|
+
"id": "background_color",
|
|
247
|
+
"label": "背景颜色",
|
|
248
|
+
"default": "#000000"
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
"type": "header",
|
|
252
|
+
"content": "💻 PC端布局设置"
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
"type": "number",
|
|
256
|
+
"id": "pc_height",
|
|
257
|
+
"label": "PC端占屏幕高度 (vh)",
|
|
258
|
+
"default": 88
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"type": "checkbox",
|
|
262
|
+
"id": "pc_full_width",
|
|
263
|
+
"label": "是否全屏展示",
|
|
264
|
+
"default": true
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"type": "number",
|
|
268
|
+
"id": "pc_xl_width",
|
|
269
|
+
"label": "XL屏幕内容区域宽度 (px)",
|
|
270
|
+
"default": 1200,
|
|
271
|
+
"visible_if": "{{ block.settings.pc_full_width == false }}",
|
|
272
|
+
"info": "非全屏展示时有效"
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"type": "number",
|
|
276
|
+
"id": "pc_lg_width",
|
|
277
|
+
"label": "LG屏幕内容区域宽度 (vw)",
|
|
278
|
+
"default": 90,
|
|
279
|
+
"visible_if": "{{ block.settings.pc_full_width == false }}",
|
|
280
|
+
"info": "非全屏展示时有效"
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
"type": "number",
|
|
284
|
+
"id": "pc_padding_top",
|
|
285
|
+
"label": "PC端内容顶部内边距",
|
|
286
|
+
"default": 40,
|
|
287
|
+
"info": "单位：px"
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
"type": "header",
|
|
291
|
+
"content": "📱 移动端布局设置"
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
"type": "number",
|
|
295
|
+
"id": "mobile_height",
|
|
296
|
+
"label": "移动端占屏幕高度 (vh)",
|
|
297
|
+
"default": 80
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"type": "number",
|
|
301
|
+
"id": "mobile_padding_top",
|
|
302
|
+
"label": "移动端内容顶部内边距",
|
|
303
|
+
"default": 40,
|
|
304
|
+
"info": "单位：px"
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
"type": "number",
|
|
308
|
+
"id": "mobile_padding_x",
|
|
309
|
+
"label": "移动端左右内边距",
|
|
310
|
+
"default": 20,
|
|
311
|
+
"info": "单位：px"
|
|
312
|
+
}
|
|
313
|
+
],
|
|
314
|
+
"blocks": [
|
|
315
|
+
{
|
|
316
|
+
"type": "@theme"
|
|
317
|
+
}
|
|
318
|
+
],
|
|
319
|
+
"presets": [
|
|
320
|
+
{
|
|
321
|
+
"name": "ZZ Bottom Popup"
|
|
322
|
+
}
|
|
323
|
+
]
|
|
324
|
+
}
|
|
325
|
+
{% endschema %}
|
|
@@ -132,6 +132,16 @@
|
|
|
132
132
|
],
|
|
133
133
|
"default": "auto"
|
|
134
134
|
},
|
|
135
|
+
{
|
|
136
|
+
"type": "select",
|
|
137
|
+
"id": "prefix_icon",
|
|
138
|
+
"label": "前缀图标",
|
|
139
|
+
"options": [
|
|
140
|
+
{ "value": "none", "label": "不展示" },
|
|
141
|
+
{ "value": "plus", "label": "加号" }
|
|
142
|
+
],
|
|
143
|
+
"default": "none"
|
|
144
|
+
},
|
|
135
145
|
{
|
|
136
146
|
"type": "select",
|
|
137
147
|
"id": "postfix_icon",
|
|
@@ -211,6 +221,7 @@
|
|
|
211
221
|
color: block.settings.color,
|
|
212
222
|
text: block.settings.text,
|
|
213
223
|
size: block.settings.size,
|
|
224
|
+
prefix_icon: block.settings.prefix_icon,
|
|
214
225
|
postfix_icon: block.settings.postfix_icon,
|
|
215
226
|
icon_size: block.settings.icon_size,
|
|
216
227
|
icon_left_margin: block.settings.icon_left_margin,
|
package/package.json
CHANGED
|
@@ -22,7 +22,8 @@ size：按钮尺寸
|
|
|
22
22
|
其他参数：
|
|
23
23
|
- href：链接地址
|
|
24
24
|
- backdrop_filter：毛玻璃效果 true/false
|
|
25
|
-
-
|
|
25
|
+
- prefix_icon：前缀图标名称
|
|
26
|
+
- postfix_icon：后缀图标名称
|
|
26
27
|
- text：按钮文字
|
|
27
28
|
- class_name：自定义类名
|
|
28
29
|
- btn_id：按钮ID并作为点击埋点标识
|
|
@@ -33,6 +34,16 @@ size：按钮尺寸
|
|
|
33
34
|
{% assign btn_size = size | default: 'medium' %}
|
|
34
35
|
{% assign icon_size = icon_size | default: 15 %}
|
|
35
36
|
{% assign width = width | default: 'auto' %}
|
|
37
|
+
{% assign prefix_icon = prefix_icon | default: blank %}
|
|
38
|
+
{% assign postfix_icon = postfix_icon | default: blank %}
|
|
39
|
+
|
|
40
|
+
{% if prefix_icon == 'none' %}
|
|
41
|
+
{% assign prefix_icon = blank %}
|
|
42
|
+
{% endif %}
|
|
43
|
+
|
|
44
|
+
{% if postfix_icon == 'none' %}
|
|
45
|
+
{% assign postfix_icon = blank %}
|
|
46
|
+
{% endif %}
|
|
36
47
|
|
|
37
48
|
<style>
|
|
38
49
|
.zz-btn-icon {
|
|
@@ -43,6 +54,9 @@ size：按钮尺寸
|
|
|
43
54
|
{% if href %}
|
|
44
55
|
{% if btn_type == 'link' %}
|
|
45
56
|
<a href="{{ href | default: '#' }}" {% if btn_id != blank %} id="{{ btn_id }}" data-track-zz-element="{{ btn_id }}" {% endif %} class="zz-btn-link tw-text-[#378DDD] tw-inline-flex tw-items-center tw-text-[12px] lg:tw-text-[14px] tw-no-underline zz-btn-link-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}">
|
|
57
|
+
{% if prefix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
|
|
58
|
+
{% render 'zz-icon', icon_name: prefix_icon, icon_size: icon_size %}
|
|
59
|
+
</span>{% endif %}
|
|
46
60
|
<span class="zz-btn-text">{{ text }}</span>
|
|
47
61
|
{% if postfix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
|
|
48
62
|
{% render 'zz-icon', icon_name: postfix_icon, icon_size: icon_size %}
|
|
@@ -57,8 +71,13 @@ size：按钮尺寸
|
|
|
57
71
|
style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
|
|
58
72
|
{% endif %}
|
|
59
73
|
>
|
|
60
|
-
{% if
|
|
74
|
+
{% if prefix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
|
|
75
|
+
{% render 'zz-icon', icon_name: prefix_icon, icon_size: icon_size %}
|
|
76
|
+
</span>{% endif %}
|
|
61
77
|
<span class="zz-btn-text">{{ text }}</span>
|
|
78
|
+
{% if postfix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
|
|
79
|
+
{% render 'zz-icon', icon_name: postfix_icon, icon_size: icon_size %}
|
|
80
|
+
</span>{% endif %}
|
|
62
81
|
</a>
|
|
63
82
|
{% endif %}
|
|
64
83
|
|
|
@@ -69,6 +88,9 @@ size：按钮尺寸
|
|
|
69
88
|
{% if modal_id != blank %} data-zz-modal-target="#{{ modal_id }}" {% endif %}
|
|
70
89
|
{% if btn_id != blank %} id="{{ btn_id }}" data-track-zz-element="{{ btn_id }}" {% endif %}
|
|
71
90
|
class="zz-btn-link tw-text-[#378DDD] tw-inline-flex tw-items-center tw-text-[12px] lg:tw-text-[14px] tw-no-underline zz-btn-link-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}">
|
|
91
|
+
{% if prefix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
|
|
92
|
+
{% render 'zz-icon', icon_name: prefix_icon, icon_size: icon_size %}
|
|
93
|
+
</span>{% endif %}
|
|
72
94
|
<span class="zz-btn-text">{{ text }}</span>
|
|
73
95
|
{% if postfix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
|
|
74
96
|
{% render 'zz-icon', icon_name: postfix_icon, icon_size: icon_size %}
|
|
@@ -83,10 +105,15 @@ size：按钮尺寸
|
|
|
83
105
|
style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
|
|
84
106
|
{% endif %}
|
|
85
107
|
>
|
|
86
|
-
{% if
|
|
108
|
+
{% if prefix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
|
|
109
|
+
{% render 'zz-icon', icon_name: prefix_icon, icon_size: icon_size %}
|
|
110
|
+
</span>{% endif %}
|
|
87
111
|
<span class="zz-btn-text">{{ text }}</span>
|
|
112
|
+
{% if postfix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
|
|
113
|
+
{% render 'zz-icon', icon_name: postfix_icon, icon_size: icon_size %}
|
|
114
|
+
</span>{% endif %}
|
|
88
115
|
</button>
|
|
89
116
|
|
|
90
117
|
{% endif %}
|
|
91
118
|
|
|
92
|
-
{% endif %}
|
|
119
|
+
{% endif %}
|
package/snippets/zz-icon.liquid
CHANGED
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
- class_name：自定义类名
|
|
25
25
|
{% endcomment %}
|
|
26
26
|
|
|
27
|
-
{% assign icon_name = icon_name | default: 'download' %}
|
|
28
27
|
{% assign icon_color = icon_color | default: 'currentColor' %}
|
|
29
28
|
{% assign icon_size = icon_size | default: '15' %}
|
|
30
29
|
|
|
@@ -48,6 +47,27 @@
|
|
|
48
47
|
>
|
|
49
48
|
<path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
|
|
50
49
|
</svg>
|
|
50
|
+
{% elsif icon_name == 'video' %}
|
|
51
|
+
<svg
|
|
52
|
+
width='{{ icon_size }}px'
|
|
53
|
+
height='{{ icon_size }}px'
|
|
54
|
+
viewBox='0 0 15 15'
|
|
55
|
+
fill='none'
|
|
56
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
57
|
+
>
|
|
58
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.635 6.42979C14.5112 6.91507 14.5112 8.08492 13.635 8.57021L6.84517 12.331C5.94149 12.8315 4.79058 12.232 4.79058 11.2608L4.79058 3.73925C4.79058 2.768 5.94148 2.16851 6.84517 2.66904L13.635 6.42979Z" fill="currentColor"/>
|
|
59
|
+
</svg>
|
|
60
|
+
{% elsif icon_name == 'plus' %}
|
|
61
|
+
<svg
|
|
62
|
+
width='{{ icon_size }}px'
|
|
63
|
+
height='{{ icon_size }}px'
|
|
64
|
+
viewBox='0 0 14 14'
|
|
65
|
+
fill='none'
|
|
66
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
67
|
+
>
|
|
68
|
+
<path d="M0.75 6.75H12.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
69
|
+
<path d="M6.75 12.75L6.75 0.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
70
|
+
</svg>
|
|
51
71
|
{% elsif icon_name == 'mail' %}
|
|
52
72
|
<svg
|
|
53
73
|
width='{{ icon_size }}px'
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
{% assign option_type = option_type | default: 'normal' | downcase | strip %}
|
|
2
|
+
|
|
1
3
|
<div
|
|
2
4
|
class='
|
|
3
|
-
{% if
|
|
5
|
+
{% if option_type == 'color' %}
|
|
4
6
|
tw-grid tw-grid-cols-2 tw-gap-6
|
|
5
7
|
{% else %}
|
|
6
8
|
tw-space-y-[16px]
|
|
@@ -49,14 +51,14 @@
|
|
|
49
51
|
{% comment %} 产品示例图 {% endcomment %}
|
|
50
52
|
<div
|
|
51
53
|
class='
|
|
52
|
-
{% if
|
|
54
|
+
{% if option_type == 'color' %}
|
|
53
55
|
tw-flex tw-flex-col tw-space-y-6
|
|
54
56
|
{% else %}
|
|
55
57
|
tw-flex tw-space-x-[24px]
|
|
56
58
|
{% endif %}
|
|
57
59
|
'
|
|
58
60
|
>
|
|
59
|
-
{% if
|
|
61
|
+
{% if option_type == 'color' %}
|
|
60
62
|
<div
|
|
61
63
|
class=' tw-w-[28px] tw-h-[28px] tw-rounded-full !tw-block {% if option.value != 'Black' %} tw-border-[1.5px] {% endif %} tw-border-[#d9d9d9]'
|
|
62
64
|
style='background: {{ option_value.name }}'
|
|
@@ -5,6 +5,22 @@
|
|
|
5
5
|
class=' tw-space-y-[48px]'
|
|
6
6
|
>
|
|
7
7
|
{% for item in product.options_with_values %}
|
|
8
|
+
{% liquid
|
|
9
|
+
assign option_type_key = 'option_' | append: item.position | append: '_type'
|
|
10
|
+
assign option_type = product.metafields.custom[option_type_key].value | default: ''
|
|
11
|
+
|
|
12
|
+
if option_type == blank
|
|
13
|
+
if item.name == 'Version' or item.name contains 'Bundle and save more'
|
|
14
|
+
assign option_type = 'version'
|
|
15
|
+
elsif item.name == 'Color'
|
|
16
|
+
assign option_type = 'color'
|
|
17
|
+
else
|
|
18
|
+
assign option_type = 'normal'
|
|
19
|
+
endif
|
|
20
|
+
endif
|
|
21
|
+
|
|
22
|
+
assign option_type = option_type | downcase | strip
|
|
23
|
+
%}
|
|
8
24
|
<div>
|
|
9
25
|
<div class='tw-flex tw-flex-col tw-items-start tw-justify-between tw-mb-[18px]'>
|
|
10
26
|
<h2 class='tw-font-medium tw-text-black tw-text-[20px]'>
|
|
@@ -12,14 +28,13 @@
|
|
|
12
28
|
</h2>
|
|
13
29
|
</div>
|
|
14
30
|
|
|
15
|
-
{% if
|
|
16
|
-
or item.name contains 'Bundle and save more'
|
|
17
|
-
%}
|
|
31
|
+
{% if option_type == 'version' %}
|
|
18
32
|
<div id='product-version-selector-container'>
|
|
19
33
|
{% render 'zz-version-selector-simple',
|
|
20
34
|
values: item.values,
|
|
21
35
|
position: item.position,
|
|
22
36
|
option_name: item.name,
|
|
37
|
+
option_type: option_type,
|
|
23
38
|
show_basic: show_basic,
|
|
24
39
|
basic_title: basic_title,
|
|
25
40
|
discount_type: discount_type
|
|
@@ -31,11 +46,11 @@
|
|
|
31
46
|
values: item.values,
|
|
32
47
|
position: item.position,
|
|
33
48
|
option_name: item.name,
|
|
34
|
-
|
|
49
|
+
option_type: option_type,
|
|
50
|
+
show_basic: show_basic
|
|
35
51
|
%}
|
|
36
52
|
</div>
|
|
37
53
|
{% endif %}
|
|
38
|
-
|
|
39
54
|
</div>
|
|
40
55
|
{% endfor %}
|
|
41
56
|
</product-buy-now-selector>
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
{% assign option_type = option_type | default: 'version' | downcase | strip %}
|
|
2
|
+
|
|
1
3
|
<div class=' tw-space-y-[16px] ' id='product-version-selector'>
|
|
2
4
|
{%- for value_item in values -%}
|
|
3
5
|
{%- if value_item.variant.metafields.custom.basic == true -%}
|
|
@@ -74,9 +76,7 @@
|
|
|
74
76
|
</h3>
|
|
75
77
|
|
|
76
78
|
{% comment %} version 产品信息 {% endcomment %}
|
|
77
|
-
{% if
|
|
78
|
-
or option_name contains 'Bundle and save more'
|
|
79
|
-
%}
|
|
79
|
+
{% if option_type == 'version' %}
|
|
80
80
|
<div class='tw-space-x-2 tw-flex tw-items-center'>
|
|
81
81
|
<span class='tw-font-medium tw-text-[14px] tw-text-black'>
|
|
82
82
|
{%- if show_basic and basic_variant.price != blank -%}
|
|
@@ -117,11 +117,7 @@
|
|
|
117
117
|
{% endif %}
|
|
118
118
|
</div>
|
|
119
119
|
</div>
|
|
120
|
-
|
|
121
|
-
|
|
122
120
|
</label>
|
|
123
|
-
|
|
124
|
-
|
|
125
121
|
</div>
|
|
126
122
|
{% endfor %}
|
|
127
123
|
</div>
|
|
@@ -165,4 +161,3 @@
|
|
|
165
161
|
border-bottom-right-radius: 12px;
|
|
166
162
|
}
|
|
167
163
|
</style>
|
|
168
|
-
|
|
@@ -29,10 +29,7 @@ size：按钮尺寸
|
|
|
29
29
|
backdrop_filter: true,
|
|
30
30
|
btn_id: 'video-btn',
|
|
31
31
|
class_name: btn_class_name,
|
|
32
|
-
|
|
33
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.635 6.42979C14.5112 6.91507 14.5112 8.08492 13.635 8.57021L6.84517 12.331C5.94149 12.8315 4.79058 12.232 4.79058 11.2608L4.79058 3.73925C4.79058 2.768 5.94148 2.16851 6.84517 2.66904L13.635 6.42979Z" fill="white"/>
|
|
34
|
-
</svg>
|
|
35
|
-
'
|
|
32
|
+
prefix_icon: 'video'
|
|
36
33
|
%}
|
|
37
34
|
|
|
38
35
|
<div
|