zz-shopify-components 0.29.1-beta.2 → 0.29.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.
- package/blocks/zz-scroll-animate-bg-text.liquid +2 -2
- package/blocks/zz-voc-block.liquid +141 -0
- package/package.json +1 -1
- package/sections/zz-cookie.liquid +419 -0
- package/sections/zz-navigation-tab-v3.liquid +44 -3
- package/sections/zz-video-tab-swiper.liquid +13 -4
- package/snippets/zz-comment-video.liquid +54 -0
- package/snippets/zz-video-button.liquid +25 -11
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
{% schema %}
|
|
2
|
+
{
|
|
3
|
+
"name": "VOC Block",
|
|
4
|
+
"class": "zz-voc-block",
|
|
5
|
+
"settings": [
|
|
6
|
+
{
|
|
7
|
+
"type": "select",
|
|
8
|
+
"id": "video_pos_pc",
|
|
9
|
+
"label": "图片/视频位置(pc)",
|
|
10
|
+
"options": [
|
|
11
|
+
{
|
|
12
|
+
"value": "top",
|
|
13
|
+
"label": "上"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"value": "bottom",
|
|
17
|
+
"label": "下"
|
|
18
|
+
}
|
|
19
|
+
],
|
|
20
|
+
"default": "top"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"type": "select",
|
|
24
|
+
"id": "video_pos_mb",
|
|
25
|
+
"label": "图片/视频位置(mobile)",
|
|
26
|
+
"options": [
|
|
27
|
+
{
|
|
28
|
+
"value": "top",
|
|
29
|
+
"label": "上"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"value": "bottom",
|
|
33
|
+
"label": "下"
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
"default": "top"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"type": "image_picker",
|
|
40
|
+
"id": "avatar",
|
|
41
|
+
"label": "头像"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"type": "text",
|
|
45
|
+
"id": "username",
|
|
46
|
+
"label": "用户名"
|
|
47
|
+
},
|
|
48
|
+
|
|
49
|
+
{
|
|
50
|
+
"type": "richtext",
|
|
51
|
+
"id": "account",
|
|
52
|
+
"label": "账号"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"type": "video",
|
|
56
|
+
"id": "video",
|
|
57
|
+
"label": "视频(pc)"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"type": "video",
|
|
61
|
+
"id": "video_mb",
|
|
62
|
+
"label": "视频(mobile)"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"type": "image_picker",
|
|
66
|
+
"id": "poster",
|
|
67
|
+
"label": "视频封面(pc)"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"type": "image_picker",
|
|
71
|
+
"id": "poster_mb",
|
|
72
|
+
"label": "视频封面(mobile)"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"type": "url",
|
|
76
|
+
"id": "url",
|
|
77
|
+
"label": "链接",
|
|
78
|
+
"info": "配置链接展示按钮，不配置不展示"
|
|
79
|
+
},
|
|
80
|
+
|
|
81
|
+
],
|
|
82
|
+
"presets": [
|
|
83
|
+
{
|
|
84
|
+
"name": "VOC Block"
|
|
85
|
+
},
|
|
86
|
+
|
|
87
|
+
],
|
|
88
|
+
}
|
|
89
|
+
{% endschema %}
|
|
90
|
+
|
|
91
|
+
{% render 'zz-comment-video', data: block.settings %}
|
|
92
|
+
|
|
93
|
+
<style>
|
|
94
|
+
#shopify-block-{{ block.id }} {
|
|
95
|
+
flex: 1;
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
{% if block.settings.video_pos_mb == 'top' %}
|
|
100
|
+
#shopify-block-{{ block.id }} .comment-block-video {
|
|
101
|
+
border-top-left-radius: 10px;
|
|
102
|
+
border-top-right-radius: 10px;
|
|
103
|
+
aspect-ratio: 162 / 221;
|
|
104
|
+
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
{% else %}
|
|
108
|
+
#shopify-block-{{ block.id }} .comment-block-video {
|
|
109
|
+
border-bottom-left-radius: 10px;
|
|
110
|
+
border-bottom-right-radius: 10px;
|
|
111
|
+
aspect-ratio: 162 / 221;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
{% endif %}
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
@media (min-width: 1024px) {
|
|
118
|
+
{% if block.settings.video_pos_pc == 'top' %}
|
|
119
|
+
#shopify-block-{{ block.id }} .comment-block-video {
|
|
120
|
+
border-top-left-radius: 16px;
|
|
121
|
+
border-top-right-radius: 16px;
|
|
122
|
+
aspect-ratio: 351 / 468;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
{% else %}
|
|
126
|
+
#shopify-block-{{ block.id }} .comment-block-video {
|
|
127
|
+
border-bottom-left-radius: 16px;
|
|
128
|
+
border-bottom-right-radius: 16px;
|
|
129
|
+
aspect-ratio: 351 / 468;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
{% endif %}
|
|
133
|
+
#shopify-block-{{ block.id }} {
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
</style>
|
package/package.json
CHANGED
|
@@ -0,0 +1,419 @@
|
|
|
1
|
+
{% schema %}
|
|
2
|
+
{
|
|
3
|
+
"name": "Cookie Section",
|
|
4
|
+
"class": "cookie-section",
|
|
5
|
+
"settings": [
|
|
6
|
+
{
|
|
7
|
+
"type": "color",
|
|
8
|
+
"id": "bg_color",
|
|
9
|
+
"default": "#ffffff",
|
|
10
|
+
"label": "背景色"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"type": "text",
|
|
14
|
+
"id": "title",
|
|
15
|
+
"label": "Title"
|
|
16
|
+
}
|
|
17
|
+
],
|
|
18
|
+
"presets": [
|
|
19
|
+
{
|
|
20
|
+
"name": "Cookie Section"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
{% endschema %}
|
|
25
|
+
|
|
26
|
+
<div
|
|
27
|
+
class='zz-shopify-bottom__banner__dialog tw-w-full tw-pl-[20px] tw-pr-[20px] tw-pb-[28px] tw-pt-[28px] !tw-hidden'
|
|
28
|
+
style='background-color: {{ section.settings.bg_color }};'
|
|
29
|
+
>
|
|
30
|
+
<div class=' lg:tw-w-[90vw] xl:tw-w-[1220px] tw-mx-auto tw-flex lg:tw-gap-[60px] xl:tw-gap-[80px] max-lg:tw-gap-[32px] max-lg:tw-flex-col'>
|
|
31
|
+
<div class="max-lg:tw-text-[16px] lg:tw-text-[12px]">
|
|
32
|
+
<div class='tw-text-black tw-tetx-[16px] tw-font-semibold'>
|
|
33
|
+
We value your privacy
|
|
34
|
+
</div>
|
|
35
|
+
<div class="tw-leading-[1.5]">
|
|
36
|
+
We use cookies and other technologies to personalize your experience,
|
|
37
|
+
perform marketing, and collect analytics. Learn more in our
|
|
38
|
+
<a class="tw-text-[#378DDD]" href="/pages/privacy-policy">PrivacyPolicy</a>.You can manage your settings at any time through
|
|
39
|
+
<span id="custom-cookie-preferences" class="tw-text-[#378DDD] tw-cursor-pointer">cookie Preferences</span>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="tw-flex tw-items-center tw-gap-[12px] max-lg:tw-flex-col">
|
|
43
|
+
<button class="banner-decline-btn tw-w-[110px] max-lg:tw-w-full tw-h-[40px] tw-bg-[#F5F5F6] tw-text-[14px] tw-text-black tw-rounded-[4px]">Decline</button>
|
|
44
|
+
<button class="banner-accept-btn tw-w-[110px] max-lg:tw-w-full tw-h-[40px] tw-bg-[#000000] tw-text-[14px] tw-text-white tw-rounded-[4px]">Accept</button>
|
|
45
|
+
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="zz-shopify__prefs__overlay !tw-hidden"> </div>
|
|
51
|
+
<div class="zz-shopify__prefs__dialog !tw-hidden">
|
|
52
|
+
<div class="zz-shopify__prefs__dialog_header tw-flex tw-justify-between tw-items-center tw-p-[20px]">
|
|
53
|
+
<span class="tw-text-[16px] lg:tw-text-[20px] tw-text-black tw-font-medium">Cookie preferences</span>
|
|
54
|
+
<button class="close-dialog">
|
|
55
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
56
|
+
<path d="M5.09961 14.9497L14.9991 5.05021" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
|
|
57
|
+
<path d="M5.09961 5.05029L14.9991 14.9498" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
|
|
58
|
+
</svg>
|
|
59
|
+
</button>
|
|
60
|
+
|
|
61
|
+
</div>
|
|
62
|
+
<div class="max-lg:tw-max-h-[60vh] tw-p-[20px] tw-overflow-y-auto">
|
|
63
|
+
<div class="tw-mb-[20px]">
|
|
64
|
+
<div class="tw-text-[16px] tw-text-black tw-font-semibold tw-leading-[1.5] tw-mb-[8px]">
|
|
65
|
+
You control your data
|
|
66
|
+
</div>
|
|
67
|
+
<div class="tw-text-[12px] tw-text-[#000000B2] tw-leading-[1.5]">
|
|
68
|
+
Learn more about the cookies we use, and choose vwhich cookies to allow.
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
<label class='preferences-checkbox tw-opacity-30 tw-flex' style="border-color:#000;">
|
|
72
|
+
|
|
73
|
+
<div class="select-div tw-pt-[5px] tw-mr-[14px]">
|
|
74
|
+
<div class="unselect-img tw-w-[16px] tw-h-[16px]">
|
|
75
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
76
|
+
<rect x="0.75" y="0.75" width="14.5" height="14.5" rx="2.25" stroke="black" stroke-width="1.5"/>
|
|
77
|
+
<path d="M4.5 7.65039L7.04152 10.1919L11.567 5.66643" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
78
|
+
</svg>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
</div>
|
|
82
|
+
<div>
|
|
83
|
+
<div class="tw-text-[#000000] tw-text-[14px]">Required</div>
|
|
84
|
+
<div class="tw-text-[#00000080] tw-text-[12px] tw-leading-[1.1] tw-mt-[2px]">These cookies are necessary for the site to function properly, including capabilities like logging in and adding items to the cart.</div>
|
|
85
|
+
</div>
|
|
86
|
+
</label>
|
|
87
|
+
|
|
88
|
+
<label class='preferences-checkbox tw-flex'>
|
|
89
|
+
<input id="shopify-pc__prefs__preferences-input-Personalization" type="checkbox" checked>
|
|
90
|
+
<div class="select-div tw-pt-[5px] tw-mr-[14px]">
|
|
91
|
+
<div class="unselect-img tw-w-[16px] tw-h-[16px]">
|
|
92
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
93
|
+
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" stroke="black" stroke-opacity="0.15"/>
|
|
94
|
+
</svg>
|
|
95
|
+
|
|
96
|
+
</div>
|
|
97
|
+
<div class="selected-img tw-w-[16px] tw-h-[16px]">
|
|
98
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
99
|
+
<rect x="0.75" y="0.75" width="14.5" height="14.5" rx="2.25" stroke="black" stroke-width="1.5"/>
|
|
100
|
+
<path d="M4.5 7.65039L7.04152 10.1919L11.567 5.66643" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
101
|
+
</svg>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="tw-font-medium ">
|
|
105
|
+
<div class="tw-text-[#000000] tw-text-[14px]">Personalization</div>
|
|
106
|
+
<div class="tw-text-[#00000080] tw-text-[12px] tw-leading-[1.1] tw-mt-[2px]">These cookies store details about your actions to personalize your next visit to the website.</div>
|
|
107
|
+
</div>
|
|
108
|
+
</label>
|
|
109
|
+
|
|
110
|
+
<label class='preferences-checkbox tw-flex'>
|
|
111
|
+
<input id="shopify-pc__prefs__preferences-input-Marketing" type="checkbox" checked>
|
|
112
|
+
<div class="select-div tw-pt-[5px] tw-mr-[14px]">
|
|
113
|
+
<div class="unselect-img tw-w-[16px] tw-h-[16px]">
|
|
114
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
115
|
+
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" stroke="black" stroke-opacity="0.15"/>
|
|
116
|
+
</svg>
|
|
117
|
+
|
|
118
|
+
</div>
|
|
119
|
+
<div class="selected-img tw-w-[16px] tw-h-[16px]">
|
|
120
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
121
|
+
<rect x="0.75" y="0.75" width="14.5" height="14.5" rx="2.25" stroke="black" stroke-width="1.5"/>
|
|
122
|
+
<path d="M4.5 7.65039L7.04152 10.1919L11.567 5.66643" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
123
|
+
</svg>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
<div>
|
|
127
|
+
<div class="tw-text-[#000000] tw-text-[14px]">Marketing</div>
|
|
128
|
+
<div class="tw-text-[#00000080] tw-text-[12px] tw-leading-[1.1] tw-mt-[2px]">These cookies are used to optimize marketing communications and show you ads on other sites.</div>
|
|
129
|
+
</div>
|
|
130
|
+
</label>
|
|
131
|
+
|
|
132
|
+
<label class='preferences-checkbox tw-flex'>
|
|
133
|
+
<input id="shopify-pc__prefs__preferences-input-Analytics" type="checkbox" checked>
|
|
134
|
+
<div class="select-div tw-pt-[5px] tw-mr-[14px]">
|
|
135
|
+
<div class="unselect-img tw-w-[16px] tw-h-[16px]">
|
|
136
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
137
|
+
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" stroke="black" stroke-opacity="0.15"/>
|
|
138
|
+
</svg>
|
|
139
|
+
|
|
140
|
+
</div>
|
|
141
|
+
<div class="selected-img tw-w-[16px] tw-h-[16px]">
|
|
142
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
143
|
+
<rect x="0.75" y="0.75" width="14.5" height="14.5" rx="2.25" stroke="black" stroke-width="1.5"/>
|
|
144
|
+
<path d="M4.5 7.65039L7.04152 10.1919L11.567 5.66643" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
145
|
+
</svg>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
<div>
|
|
149
|
+
<div class="tw-text-[#000000] tw-text-[14px]">Analytics</div>
|
|
150
|
+
<div class="tw-text-[#00000080] tw-text-[12px] tw-leading-[1.1] tw-mt-[2px]">These cookies help us understand how you interact with the site. We use this data to identify areas to improve.</div>
|
|
151
|
+
</div>
|
|
152
|
+
</label>
|
|
153
|
+
</div>
|
|
154
|
+
<div class="zz-shopify__prefs__dialog_footer tw-py-[20px] tw-px-[20px] lg:tw-px-[32px] tw-flex tw-items-center tw-gap-[12px] max-lg:tw-flex-col lg:tw-justify-end">
|
|
155
|
+
<button class="decline-all-btn tw-w-[133px] max-lg:tw-w-full tw-h-[40px] tw-bg-[#F5F5F6] tw-text-[14px] tw-text-black tw-rounded-[4px]">Decline all</button>
|
|
156
|
+
<button class="accept-all-btn tw-w-[133px] max-lg:tw-w-full tw-h-[40px] tw-bg-[#000000] tw-text-[14px] tw-text-white tw-rounded-[4px]">Accept all</button>
|
|
157
|
+
<button class="save-choices-btn tw-w-[180px] max-lg:tw-w-full tw-h-[40px] tw-bg-[#000000] tw-text-[14px] tw-text-white tw-rounded-[4px]">Save my choices</button>
|
|
158
|
+
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
</div>
|
|
162
|
+
<style>
|
|
163
|
+
.zz-shopify-bottom__banner__dialog {
|
|
164
|
+
position: fixed;
|
|
165
|
+
z-index: 2000000;
|
|
166
|
+
box-shadow: 0px 4px 10px rgb(63 63 68 / 40%);
|
|
167
|
+
max-height: 90%;
|
|
168
|
+
box-sizing: border-box;
|
|
169
|
+
opacity: 1;
|
|
170
|
+
background-color: hsl(0deg, 0%, 100%, 100%);
|
|
171
|
+
overflow: auto;
|
|
172
|
+
-ms-overflow-style: none;
|
|
173
|
+
scrollbar-width: none;
|
|
174
|
+
border: none;
|
|
175
|
+
text-align: left;
|
|
176
|
+
bottom: 0;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* 选中后的样式 */
|
|
180
|
+
.zz-hovercare-choose-modal input[type="checkbox"]:checked + .radio-label-border {
|
|
181
|
+
border: 2px solid #FC6C0F;
|
|
182
|
+
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.zz-shopify__prefs__overlay {
|
|
186
|
+
z-index: 2000001;
|
|
187
|
+
position: fixed;
|
|
188
|
+
top: 0;
|
|
189
|
+
left: 0;
|
|
190
|
+
width: 100%;
|
|
191
|
+
height: 100%;
|
|
192
|
+
background-color: rgba(0, 0, 0, 0.6);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.zz-shopify__prefs__dialog_header {
|
|
196
|
+
border-bottom: 1px solid #D9D9D9;
|
|
197
|
+
}
|
|
198
|
+
.zz-shopify__prefs__dialog .select-div .selected-img {
|
|
199
|
+
display: none;
|
|
200
|
+
}
|
|
201
|
+
.zz-shopify__prefs__dialog_footer {
|
|
202
|
+
border-top: 1px solid #DDDDDD;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.zz-shopify__prefs__dialog input[type="checkbox"] {
|
|
206
|
+
display: none;
|
|
207
|
+
}
|
|
208
|
+
.zz-shopify__prefs__dialog input[type="checkbox"]:checked + .select-div .selected-img {
|
|
209
|
+
display: block !important;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.zz-shopify__prefs__dialog input[type="checkbox"]:checked + .select-div .unselect-img {
|
|
213
|
+
display: none;
|
|
214
|
+
}
|
|
215
|
+
.preferences-checkbox {
|
|
216
|
+
border: 1.5px solid #00000026;
|
|
217
|
+
border-radius: 12px;
|
|
218
|
+
padding: 20px;
|
|
219
|
+
margin-bottom: 12px;
|
|
220
|
+
transition: border-color 0.2s ease;
|
|
221
|
+
cursor: pointer;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/* 根据 input checked 状态改变 border 颜色 */
|
|
225
|
+
.preferences-checkbox:has(input[type="checkbox"]:checked) {
|
|
226
|
+
border-color: #000000;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
@media (min-width: 1024px) {
|
|
230
|
+
.zz-shopify__prefs__dialog {
|
|
231
|
+
box-shadow: 0 5px 10px rgb(63 63 68 / 50%);
|
|
232
|
+
position: fixed;
|
|
233
|
+
z-index: 2000002;
|
|
234
|
+
opacity: 1;
|
|
235
|
+
background-color: hsl(0deg, 0%, 100%, 100%);
|
|
236
|
+
max-height: 80%;
|
|
237
|
+
overflow-y: auto;
|
|
238
|
+
top: 50%;
|
|
239
|
+
transform: translate(0, -50%);
|
|
240
|
+
min-width: 280px;
|
|
241
|
+
border-radius: 3px;
|
|
242
|
+
display: flex;
|
|
243
|
+
flex-direction: column;
|
|
244
|
+
left: 25%;
|
|
245
|
+
width: 50%;
|
|
246
|
+
text-align: left;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
/* 移动端样式 */
|
|
253
|
+
@media (max-width: 1024px) {
|
|
254
|
+
.zz-shopify__prefs__dialog {
|
|
255
|
+
box-shadow: 0 5px 10px rgb(63 63 68 / 50%);
|
|
256
|
+
position: fixed;
|
|
257
|
+
z-index: 2000002;
|
|
258
|
+
opacity: 1;
|
|
259
|
+
background-color: hsl(0deg, 0%, 100%, 100%);
|
|
260
|
+
overflow-y: auto;
|
|
261
|
+
bottom: 0;
|
|
262
|
+
border-radius: 10px 10px 0 0;
|
|
263
|
+
display: flex;
|
|
264
|
+
flex-direction: column;
|
|
265
|
+
left: 0%;
|
|
266
|
+
width: 100%;
|
|
267
|
+
text-align: left;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
</style>
|
|
273
|
+
|
|
274
|
+
<script>
|
|
275
|
+
(function() {
|
|
276
|
+
|
|
277
|
+
const section = document.querySelector('#shopify-section-{{ section.id }}');
|
|
278
|
+
const banner = section.querySelector('.zz-shopify-bottom__banner__dialog');
|
|
279
|
+
const prefsOverlay = section.querySelector('.zz-shopify__prefs__overlay');
|
|
280
|
+
const prefsDialog = document.querySelector('.zz-shopify__prefs__dialog');
|
|
281
|
+
const bannerAcceptButton = banner.querySelector('.banner-accept-btn');
|
|
282
|
+
const bannerDeclineButton = banner.querySelector('.banner-decline-btn');
|
|
283
|
+
const declineAllButton = prefsDialog.querySelector('.decline-all-btn');
|
|
284
|
+
const acceptAllButton = prefsDialog.querySelector('.accept-all-btn');
|
|
285
|
+
const saveChoicesButton = prefsDialog.querySelector('.save-choices-btn');
|
|
286
|
+
const customCookiePreferences = section.querySelector('#custom-cookie-preferences');
|
|
287
|
+
const closeDialog = prefsDialog.querySelector('.close-dialog');
|
|
288
|
+
customCookiePreferences.addEventListener('click', function() {
|
|
289
|
+
// 打开偏好设置对话框
|
|
290
|
+
prefsOverlay.classList.remove('!tw-hidden');
|
|
291
|
+
prefsDialog.classList.remove('!tw-hidden');
|
|
292
|
+
window.zzLockBodyScroll && zzLockBodyScroll();
|
|
293
|
+
});
|
|
294
|
+
closeDialog.addEventListener('click', function() {
|
|
295
|
+
// 关闭偏好设置对话框
|
|
296
|
+
prefsOverlay.classList.add('!tw-hidden');
|
|
297
|
+
prefsDialog.classList.add('!tw-hidden');
|
|
298
|
+
window.zzUnlockBodyScroll && zzUnlockBodyScroll();
|
|
299
|
+
});
|
|
300
|
+
bannerAcceptButton.addEventListener('click', function() {
|
|
301
|
+
// 接受所有
|
|
302
|
+
handleConfirmation("AcceptAll");
|
|
303
|
+
});
|
|
304
|
+
bannerDeclineButton.addEventListener('click', function() {
|
|
305
|
+
// 拒绝所有
|
|
306
|
+
handleConfirmation("DeclineAll");
|
|
307
|
+
});
|
|
308
|
+
|
|
309
|
+
declineAllButton.addEventListener('click', function() {
|
|
310
|
+
// 拒绝所有
|
|
311
|
+
|
|
312
|
+
handleConfirmation("DeclineAll");
|
|
313
|
+
});
|
|
314
|
+
|
|
315
|
+
acceptAllButton.addEventListener('click', function() {
|
|
316
|
+
// 接受所有
|
|
317
|
+
handleConfirmation("AcceptAll");
|
|
318
|
+
});
|
|
319
|
+
|
|
320
|
+
saveChoicesButton.addEventListener('click', function() {
|
|
321
|
+
// 保存选择
|
|
322
|
+
// 获取用户选择的偏好设置
|
|
323
|
+
const personalizationChecked = prefsDialog.querySelector('#shopify-pc__prefs__preferences-input-Personalization').checked;
|
|
324
|
+
const marketingChecked = prefsDialog.querySelector('#shopify-pc__prefs__preferences-input-Marketing').checked;
|
|
325
|
+
const analyticsChecked = prefsDialog.querySelector('#shopify-pc__prefs__preferences-input-Analytics').checked;
|
|
326
|
+
let consentValue = "Required";
|
|
327
|
+
if (personalizationChecked) {
|
|
328
|
+
consentValue += "&Personalization";
|
|
329
|
+
}
|
|
330
|
+
if (marketingChecked) {
|
|
331
|
+
consentValue += "&Marketing";
|
|
332
|
+
}
|
|
333
|
+
if (analyticsChecked) {
|
|
334
|
+
consentValue += "&Analytics";
|
|
335
|
+
}
|
|
336
|
+
handleConfirmation(consentValue);
|
|
337
|
+
|
|
338
|
+
});
|
|
339
|
+
|
|
340
|
+
function handleConfirmation(consentValue) {
|
|
341
|
+
// 处理用户确认逻辑
|
|
342
|
+
setConsent(consentValue);
|
|
343
|
+
window.zzUnlockBodyScroll && zzUnlockBodyScroll();
|
|
344
|
+
prefsOverlay.classList.add('!tw-hidden');
|
|
345
|
+
prefsDialog.classList.add('!tw-hidden');
|
|
346
|
+
banner.classList.add('!tw-hidden');
|
|
347
|
+
if(!window.Shopify || !Shopify.customerPrivacy || !Shopify.customerPrivacy.setTrackingConsent) {
|
|
348
|
+
return;
|
|
349
|
+
}
|
|
350
|
+
if(consentValue === "AcceptAll") {
|
|
351
|
+
// 接受所有
|
|
352
|
+
Shopify.customerPrivacy.setTrackingConsent({
|
|
353
|
+
preferences: true,
|
|
354
|
+
marketing: true,
|
|
355
|
+
analytics: true
|
|
356
|
+
});
|
|
357
|
+
return;
|
|
358
|
+
} else if(consentValue === "DeclineAll") {
|
|
359
|
+
// 拒绝所有
|
|
360
|
+
Shopify.customerPrivacy.setTrackingConsent({
|
|
361
|
+
preferences: false,
|
|
362
|
+
marketing: false,
|
|
363
|
+
analytics: false
|
|
364
|
+
});
|
|
365
|
+
return;
|
|
366
|
+
} else {
|
|
367
|
+
// 根据用户选择设置偏好
|
|
368
|
+
Shopify.customerPrivacy.setTrackingConsent({
|
|
369
|
+
preferences: consentValue.includes("Personalization"),
|
|
370
|
+
marketing: consentValue.includes("Marketing"),
|
|
371
|
+
analytics: consentValue.includes("Analytics")
|
|
372
|
+
});
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
function getCookie(name) {
|
|
379
|
+
return document.cookie.split("; ").find(row => row.startsWith(name));
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
function setConsent(value) {
|
|
383
|
+
// 生成 “Cookie 偏好记录”，有效期1个月，有效期内同一浏览器 / 设备不再弹出。
|
|
384
|
+
// value 值 Personalization&Marketing&Analytics 、 DeclineAll、 AcceptAll
|
|
385
|
+
document.cookie =
|
|
386
|
+
`zz_cookie_consent=${value}; path=/; max-age=2592000; SameSite=Lax; Secure`;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
|
|
390
|
+
function checkCookieConsent() {
|
|
391
|
+
// 生成 “Cookie 偏好记录”，有效期1个月，有效期内同一浏览器 / 设备不再弹出。
|
|
392
|
+
const consent = getCookie("zz_cookie_consent");
|
|
393
|
+
if(!consent) {
|
|
394
|
+
// 弹出弹窗
|
|
395
|
+
setTimeout(() => {
|
|
396
|
+
window.Shopify.loadFeatures(
|
|
397
|
+
[
|
|
398
|
+
{
|
|
399
|
+
name: 'consent-tracking-api',
|
|
400
|
+
version: '0.1',
|
|
401
|
+
},
|
|
402
|
+
],
|
|
403
|
+
error => {
|
|
404
|
+
console.log('Consent Tracking API loaded', error);
|
|
405
|
+
if (!error) {
|
|
406
|
+
banner.classList.remove('!tw-hidden');
|
|
407
|
+
// Rescue error
|
|
408
|
+
}
|
|
409
|
+
},
|
|
410
|
+
);
|
|
411
|
+
}, 1000);
|
|
412
|
+
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
document.addEventListener("DOMContentLoaded", checkCookieConsent);
|
|
418
|
+
})();
|
|
419
|
+
</script>
|
|
@@ -9,6 +9,13 @@
|
|
|
9
9
|
"label": "背景颜色",
|
|
10
10
|
"default": "#000000"
|
|
11
11
|
},
|
|
12
|
+
{
|
|
13
|
+
"type": "number",
|
|
14
|
+
"id": "show_after_scroll_vh",
|
|
15
|
+
"label": "下滑多少视口高度(vh)后出现",
|
|
16
|
+
"default": 0,
|
|
17
|
+
"info": "默认为0，表示一直显示。例如设置为 100，则滑动超过 100vh 后导航栏才会滑出显示。"
|
|
18
|
+
},
|
|
12
19
|
{
|
|
13
20
|
"type": "image_picker",
|
|
14
21
|
"id": "icon",
|
|
@@ -179,6 +186,25 @@
|
|
|
179
186
|
<script>
|
|
180
187
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
181
188
|
const isDesktop = window.innerWidth > 1024;
|
|
189
|
+
const currentSection = document.getElementById('shopify-section-{{section.id}}');
|
|
190
|
+
|
|
191
|
+
// 滚动显示逻辑
|
|
192
|
+
const showAfterVh = {{ section.settings.show_after_scroll_vh | default: 0 }};
|
|
193
|
+
if (showAfterVh > 0) {
|
|
194
|
+
const threshold = window.innerHeight * (showAfterVh / 100);
|
|
195
|
+
|
|
196
|
+
const handleScroll = () => {
|
|
197
|
+
if (window.scrollY > threshold) {
|
|
198
|
+
currentSection.classList.add('is-visible');
|
|
199
|
+
} else {
|
|
200
|
+
currentSection.classList.remove('is-visible');
|
|
201
|
+
}
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
205
|
+
// 初始化检查一次
|
|
206
|
+
handleScroll();
|
|
207
|
+
}
|
|
182
208
|
|
|
183
209
|
function scrollPaginationToCenter() {
|
|
184
210
|
// 获取当前section
|
|
@@ -203,9 +229,6 @@
|
|
|
203
229
|
}
|
|
204
230
|
}
|
|
205
231
|
|
|
206
|
-
const currentSection = document.getElementById(
|
|
207
|
-
'shopify-section-{{section.id}}'
|
|
208
|
-
);
|
|
209
232
|
// 获取通知栏以及顶部弹窗 调整sticky的top。id="IPTipsBox"，id="zz-quick-announcement-bar-container"
|
|
210
233
|
const iptipsBox = document.getElementById('IPTipsBox');
|
|
211
234
|
const pcDropdowns = document.querySelectorAll('.menu-wrapper');
|
|
@@ -345,7 +368,25 @@
|
|
|
345
368
|
position: sticky;
|
|
346
369
|
width: 100%;
|
|
347
370
|
background-color: {{ section.settings.background_color }};
|
|
371
|
+
{% if section.settings.show_after_scroll_vh > 0 %}
|
|
372
|
+
transform: translateY(-200%);
|
|
373
|
+
transition: transform 0.3s ease-in-out, height 0s linear 0.3s; /* 延迟高度变化，等动画做完 */
|
|
374
|
+
pointer-events: none;
|
|
375
|
+
z-index: -1 !important;
|
|
376
|
+
height: 0 !important; /* 关键：隐藏时不占位 */
|
|
377
|
+
overflow: hidden;
|
|
378
|
+
{% endif %}
|
|
348
379
|
}
|
|
380
|
+
{% if section.settings.show_after_scroll_vh > 0 %}
|
|
381
|
+
#shopify-section-{{ section.id }}.is-visible {
|
|
382
|
+
transform: translateY(0);
|
|
383
|
+
pointer-events: auto;
|
|
384
|
+
z-index: 501 !important;
|
|
385
|
+
height: auto !important; /* 恢复高度 */
|
|
386
|
+
overflow: visible;
|
|
387
|
+
transition: transform 0.3s ease-in-out; /* 恢复时高度立即变回来，然后做位移 */
|
|
388
|
+
}
|
|
389
|
+
{% endif %}
|
|
349
390
|
body {
|
|
350
391
|
overflow-x: hidden;
|
|
351
392
|
}
|
|
@@ -2,8 +2,10 @@
|
|
|
2
2
|
| reject: 'type', 'video'
|
|
3
3
|
%}
|
|
4
4
|
{% assign swiper_blocks = section.blocks | where: 'type', 'video' %}
|
|
5
|
-
{% assign
|
|
6
|
-
|
|
5
|
+
{% assign video_loop = false %}
|
|
6
|
+
{% if section.settings.loop_swiper %}
|
|
7
|
+
{% assign video_loop = true %}
|
|
8
|
+
{% endif %}
|
|
7
9
|
<style>
|
|
8
10
|
#shopify-section-{{ section.id }} {
|
|
9
11
|
background: {{ section.settings.bg_color }};
|
|
@@ -246,7 +248,7 @@
|
|
|
246
248
|
lazy: true,
|
|
247
249
|
class: 'tw-w-full tw-h-full tw-object-cover',
|
|
248
250
|
autoplay: true,
|
|
249
|
-
loop:
|
|
251
|
+
loop: video_loop,
|
|
250
252
|
muted: true
|
|
251
253
|
%}
|
|
252
254
|
{% else %}
|
|
@@ -295,7 +297,7 @@
|
|
|
295
297
|
|
|
296
298
|
const swiperClassName = '.zz-banner-tab-swiper-{{ section.id }}';
|
|
297
299
|
const tabSwiper = new Swiper(swiperClassName, {
|
|
298
|
-
loop:
|
|
300
|
+
loop: {{ section.settings.loop_swiper }},
|
|
299
301
|
slidesPerView: 'auto',
|
|
300
302
|
centeredSlides: true,
|
|
301
303
|
spaceBetween: isDesktop ? 24 : 8,
|
|
@@ -544,6 +546,13 @@
|
|
|
544
546
|
"label": "移动下内边距 (Padding Bottom)",
|
|
545
547
|
"default": 40
|
|
546
548
|
},
|
|
549
|
+
{
|
|
550
|
+
"type": "checkbox",
|
|
551
|
+
"id": "loop_swiper",
|
|
552
|
+
"label": "是否自动循环",
|
|
553
|
+
"default": true,
|
|
554
|
+
"info": "block 少于4个不建议开自动循环"
|
|
555
|
+
},
|
|
547
556
|
{
|
|
548
557
|
"type": "text",
|
|
549
558
|
"id": "module_id",
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<div class='comment-block tw-bg-[#F5F5F5] tw-h-full tw-flex {{ data.video_pos_pc | append: '_pc' }} {{ data.video_pos_mb | append: '_mb' }} {% if data.video_pos_pc == 'top' %}lg:tw-flex-col {% else %}lg:tw-flex-col-reverse {% endif %} {% if data.video_pos_mb == 'top' %}max-lg:tw-flex-col {% else %}max-lg:tw-flex-col-reverse {% endif %} tw-bg-white/10 tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden tw-justify-between'>
|
|
2
|
+
<div
|
|
3
|
+
class='comment-block-media tw-relative tw-w-full tw-h-full tw-overflow-hidden tw-leading-[0px]'
|
|
4
|
+
>
|
|
5
|
+
{% if data.video != blank %}
|
|
6
|
+
{% render 'zz-video',
|
|
7
|
+
pc_video: data.video,
|
|
8
|
+
pc_poster: data.poster,
|
|
9
|
+
mb_video: data.video_mb,
|
|
10
|
+
mb_poster: data.poster_mb,
|
|
11
|
+
lazy: false,
|
|
12
|
+
class: 'comment-block-video click-video-play-pause tw-w-full tw-h-full tw-object-cover tw-cursor-pointer lazy',
|
|
13
|
+
poster: data.poster
|
|
14
|
+
%}
|
|
15
|
+
{% else %}
|
|
16
|
+
{%
|
|
17
|
+
render 'zz-img',
|
|
18
|
+
pc_image: data.poster,
|
|
19
|
+
mb_image: data.poster_mb | default: data.poster,
|
|
20
|
+
image_alt: data.username | escape,
|
|
21
|
+
class: 'comment-block-video tw-w-full tw-h-full tw-object-cover '
|
|
22
|
+
%}
|
|
23
|
+
|
|
24
|
+
{% endif %}
|
|
25
|
+
|
|
26
|
+
{% if data.url != blank %}
|
|
27
|
+
<a href="{{ data.url }}" class="tw-absolute tw-bg-black/20 tw-backdrop-blur-[10px] tw-rounded-[50%] tw-right-[10px] tw-bottom-[10px] lg:tw-right-[14px] lg:tw-bottom-[12px]
|
|
28
|
+
max-lg:tw-w-[36px] max-lg:tw-h-[36px] lg:tw-w-[48px] lg:tw-h-[48px] tw-flex tw-justify-center tw-items-center">
|
|
29
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
30
|
+
<path d="M15.0004 15.5355L18.5359 12L15.0004 8.46447" stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
31
|
+
<path d="M18 12H5.5" stroke="white" stroke-width="1.3" stroke-linecap="round"/>
|
|
32
|
+
</svg>
|
|
33
|
+
|
|
34
|
+
</a>
|
|
35
|
+
{% endif %}
|
|
36
|
+
</div>
|
|
37
|
+
<div class='tw-p-[10px] tw-bg-[#F5F5F5] tw-pr-[6px] tw-pb-[16px] lg:tw-px-[27px] lg:tw-py-[16px] tw-w-full tw-h-fit tw-overflow-hidden'>
|
|
38
|
+
<div class='tw-flex tw-items-center'>
|
|
39
|
+
<div class='tw-w-[20px] tw-h-[20px] lg:tw-w-[36px] lg:tw-h-[36px]'>
|
|
40
|
+
<img
|
|
41
|
+
class='tw-w-full tw-h-full'
|
|
42
|
+
width='40'
|
|
43
|
+
height='40'
|
|
44
|
+
src="{{ data.avatar | image_url }}"
|
|
45
|
+
alt="{{ data.username }}"
|
|
46
|
+
>
|
|
47
|
+
</div>
|
|
48
|
+
<div class='tw-ml-[10px] max-lg:tw-text-[10px] lg:tw-text-[14px] tw-leading-[1.5] tw-font-bold tw-text-black'>
|
|
49
|
+
{{ data.username }}
|
|
50
|
+
<span class="tw-block tw-font-normal tw-text-black/50 tw-leading-[1.5]">{{ data.account }}</span>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
@@ -35,18 +35,32 @@ size：按钮尺寸
|
|
|
35
35
|
%}
|
|
36
36
|
|
|
37
37
|
<div
|
|
38
|
-
class='togglePopup
|
|
38
|
+
class='togglePopup popup tw-flex !tw-hidden tw-bg-[rgba(0,0,0,0.9)] tw-items-center tw-justify-center tw-fixed tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-z-[999] tw-overflow-hidden'
|
|
39
39
|
>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
40
|
+
|
|
41
|
+
<div class="tw-relative tw-w-full tw-h-full tw-flex tw-justify-center tw-items-center">
|
|
42
|
+
<svg
|
|
43
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
44
|
+
aria-hidden="true"
|
|
45
|
+
focusable="false"
|
|
46
|
+
fill="none"
|
|
47
|
+
viewBox="0 0 18 17"
|
|
48
|
+
class="icon icon-close tw-cursor-pointer tw-absolute lg:tw-h-[20px] tw-h-[16px] tw-top-[5%] tw-right-[5%] togglePopup"
|
|
49
|
+
>
|
|
50
|
+
<path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="white">
|
|
51
|
+
</svg>
|
|
52
|
+
|
|
53
|
+
<div class="tw-max-w-[960px]">
|
|
54
|
+
{% render 'zz-video',
|
|
55
|
+
pc_video: video,
|
|
56
|
+
pc_poster: poster,
|
|
57
|
+
lazy: false,
|
|
58
|
+
class: ' tw-w-full tw-h-auto',
|
|
59
|
+
autoplay: false,
|
|
60
|
+
loop: true,
|
|
61
|
+
%}
|
|
62
|
+
|
|
63
|
+
</div>
|
|
50
64
|
</div>
|
|
51
65
|
|
|
52
66
|
</div>
|