zz-shopify-components 0.0.9 → 0.0.11
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/README.md +20 -3
- package/blocks/zz-button.liquid +23 -1
- package/blocks/zz-price-tag.liquid +49 -0
- package/package.json +1 -1
- package/snippets/zz-price-tag.liquid +21 -0
package/README.md
CHANGED
|
@@ -1,12 +1,29 @@
|
|
|
1
|
-
|
|
1
|
+
## 开发流程
|
|
2
|
+
|
|
3
|
+
本项目为开发仓库，开发公共组件代码。开发流程如下：
|
|
4
|
+
|
|
5
|
+
- 在开发仓库main分支中拉取代码feature/xxx，开发调试完成后并到test分支。
|
|
6
|
+
- 开发仓库在test分支打测试包确定版本号1.0.0-beta（限制打包分支，避免多人同时开发，代码未合并问题）。
|
|
7
|
+
- 站点仓库引入公共代码库，并在站点仓库进行自测和提测。
|
|
8
|
+
- 测试完成后，开发仓库test分支合并到main分支打包正式版本。
|
|
9
|
+
- 站点引入正式版本的公共代码库进入预发回归测试。回归完成走线上流程。
|
|
10
|
+
详细参考： https://zerozero.feishu.cn/docx/WDzudI39NoY1BexSr5cci5sPnsh
|
|
11
|
+
|
|
12
|
+
### 打包要求
|
|
13
|
+
|
|
14
|
+
必须固定分支打包，test分支打包beta版本，比如： 0.0.1-beta.1 。main分支打包正式版本，比如： 0.0.1 。
|
|
15
|
+
|
|
16
|
+
## npm发布流程
|
|
2
17
|
|
|
3
18
|
```
|
|
4
19
|
npm login # 登录
|
|
5
20
|
npm publish # 发布
|
|
6
21
|
```
|
|
7
22
|
|
|
8
|
-
component.config.json # 后续功能扩展作为配置文件。
|
|
9
|
-
|
|
10
23
|
## 注意事项：
|
|
11
24
|
|
|
12
25
|
1、有些插件会插入一些默认的代码，比如：wsg-custom.liquid、wsg-custom-fields.liquid 需要在.npmignore中增加忽略文件。
|
|
26
|
+
2、需要插入layout/theme.liquid的全局文件，需要在各站点手动插入layout/theme.liquid中。
|
|
27
|
+
3、迁移组件时候，注意组件依赖的一些插件/全局的依赖函数是否有迁移。
|
|
28
|
+
4、迁移组件时候，注意旧组件在各个站点可能以及不同，需要注意兼容性。
|
|
29
|
+
3、npmignore中忽略的文件，在发布时，会自动忽略。
|
package/blocks/zz-button.liquid
CHANGED
|
@@ -106,6 +106,16 @@
|
|
|
106
106
|
],
|
|
107
107
|
"default": "medium"
|
|
108
108
|
},
|
|
109
|
+
{
|
|
110
|
+
"type": "select",
|
|
111
|
+
"id": "mobile_width",
|
|
112
|
+
"label": "移动端按钮宽度",
|
|
113
|
+
"options": [
|
|
114
|
+
{ "value": "full", "label": "全宽" },
|
|
115
|
+
{ "value": "auto", "label": "自动" }
|
|
116
|
+
],
|
|
117
|
+
"default": "auto"
|
|
118
|
+
},
|
|
109
119
|
{
|
|
110
120
|
"type": "select",
|
|
111
121
|
"id": "postfix_icon",
|
|
@@ -155,6 +165,18 @@
|
|
|
155
165
|
|
|
156
166
|
{% assign btn_class = 'zz-button' | append: block.id %}
|
|
157
167
|
|
|
168
|
+
<style>
|
|
169
|
+
|
|
170
|
+
{% if block.settings.mobile_width == 'full' %}
|
|
171
|
+
@media (max-width: 1024px) {
|
|
172
|
+
#shopify-block-{{ block.id }} {
|
|
173
|
+
width: 100%;
|
|
174
|
+
box-sizing: border-box;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
{% endif %}
|
|
178
|
+
</style>
|
|
179
|
+
|
|
158
180
|
{% render 'zz-button',
|
|
159
181
|
href: block.settings.url,
|
|
160
182
|
type: block.settings.type,
|
|
@@ -165,12 +187,12 @@
|
|
|
165
187
|
icon_size: block.settings.icon_size,
|
|
166
188
|
icon_left_margin: block.settings.icon_left_margin,
|
|
167
189
|
icon_right_margin: block.settings.icon_right_margin,
|
|
190
|
+
width: block.settings.mobile_width,
|
|
168
191
|
class_name: btn_class
|
|
169
192
|
%}
|
|
170
193
|
|
|
171
194
|
|
|
172
195
|
|
|
173
|
-
|
|
174
196
|
<script>
|
|
175
197
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
176
198
|
const btn = document.getElementsByClassName('{{ btn_class }}')
|
|
@@ -0,0 +1,49 @@
|
|
|
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
|
+
{% comment %} <div class="tw-flex tw-flex-col tw-gap-[8px]">
|
|
6
|
+
{{ product.id }}
|
|
7
|
+
{{ product.title }}
|
|
8
|
+
{{ product.variants }}
|
|
9
|
+
{{ variant.price }}
|
|
10
|
+
{{ variant.compare_at_price }}
|
|
11
|
+
</div> {% endcomment %}
|
|
12
|
+
|
|
13
|
+
{% render 'zz-price-tag',
|
|
14
|
+
price: variant.price,
|
|
15
|
+
compare_at_price: variant.compare_at_price,
|
|
16
|
+
show_discount_percentage_off: block.settings.show_discount_percentage_off
|
|
17
|
+
%}
|
|
18
|
+
|
|
19
|
+
{% schema %}
|
|
20
|
+
{
|
|
21
|
+
"name": "Price Tag",
|
|
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": false
|
|
41
|
+
}
|
|
42
|
+
],
|
|
43
|
+
"presets": [
|
|
44
|
+
{
|
|
45
|
+
"name": "Price Tag"
|
|
46
|
+
}
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
{% endschema %}
|
package/package.json
CHANGED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<div class='tw-flex tw-items-center tw-space-x-2'>
|
|
2
|
+
<span class='tw-font-bold tw-text-[20px] tw-text-black'>
|
|
3
|
+
{{ price | money_without_trailing_zeros }}
|
|
4
|
+
</span>
|
|
5
|
+
{% if compare_at_price > price %}
|
|
6
|
+
<span class='before tw-font-regular tw-text-[16px] tw-text-[rgba(0,0,0,0.3)] tw-line-through'>
|
|
7
|
+
{{ compare_at_price | money_without_trailing_zeros }}
|
|
8
|
+
</span>
|
|
9
|
+
{% assign percent = price | times: 100 | divided_by: compare_at_price %}
|
|
10
|
+
{% assign discount_percentage = 100 | minus: percent %}
|
|
11
|
+
<span class='discount_percentage tw-font-regular tw-px-[10px] tw-pt-[2px] tw-text-[10px] tw-rounded-[6px] tw-text-white tw-bg-[#FC6C0F]'>
|
|
12
|
+
{% if show_discount_percentage_off == true %}
|
|
13
|
+
{{- discount_percentage -}}%OFF
|
|
14
|
+
{% else %}
|
|
15
|
+
-
|
|
16
|
+
{{- discount_percentage -}}
|
|
17
|
+
%
|
|
18
|
+
{% endif %}
|
|
19
|
+
</span>
|
|
20
|
+
{% endif %}
|
|
21
|
+
</div>
|