@ruebenfox/liquefaction 2.0.2 → 3.0.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/components/lib-atc-button/lib-atc-button.js +11 -0
- package/components/lib-atc-button/lib-atc-button.liquid +32 -0
- package/components/lib-atc-button/manifest.json +60 -0
- package/components/lib-description/lib-description.liquid +40 -0
- package/components/lib-description/manifest.json +66 -0
- package/components/lib-image/lib-image.liquid +39 -0
- package/components/lib-image/manifest.json +66 -0
- package/components/lib-price/lib-price.liquid +35 -0
- package/components/lib-price/manifest.json +55 -0
- package/components/lib-tags/lib-tags.liquid +37 -0
- package/components/lib-tags/manifest.json +52 -0
- package/components/lib-title/lib-title.liquid +28 -0
- package/components/lib-title/manifest.json +52 -0
- package/package.json +2 -2
- package/registry.json +713 -13
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
// lib-atc-button.js
|
|
2
|
+
// Basic JS for Add to Cart button (P1 test)
|
|
3
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
4
|
+
document.querySelectorAll('.atc-btn[data-lib="atc-button"]')
|
|
5
|
+
.forEach(function(btn) {
|
|
6
|
+
btn.addEventListener('click', function() {
|
|
7
|
+
// Basic test: show alert (replace with real ATC logic later)
|
|
8
|
+
alert('Added to cart!');
|
|
9
|
+
});
|
|
10
|
+
});
|
|
11
|
+
});
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{%- comment -%}
|
|
2
|
+
Component: lib-atc-button
|
|
3
|
+
Type: snippet-component
|
|
4
|
+
|
|
5
|
+
Props (snake_case with leading underscore). Use a default filter to mark required:
|
|
6
|
+
- _atc_button_content: string (required)
|
|
7
|
+
- _aria_label: string (optional)
|
|
8
|
+
- _atc_button_id: string (optional)
|
|
9
|
+
|
|
10
|
+
Description
|
|
11
|
+
- @description: Basic add to cart button.
|
|
12
|
+
|
|
13
|
+
Scope (theme contexts):
|
|
14
|
+
- @scope= product, collection
|
|
15
|
+
|
|
16
|
+
Docs (inline prop descriptions):
|
|
17
|
+
- @prop _content: The button label (e.g. "Add to cart").
|
|
18
|
+
- @prop _id: Optional id for the button.
|
|
19
|
+
- @prop _classes: Additional classes for the button styling.
|
|
20
|
+
{%- endcomment -%}
|
|
21
|
+
|
|
22
|
+
{% assign _id = _id %}
|
|
23
|
+
{% assign _classes = _classes | default: 'bg-red-600 hover:bg-red-700 text-white font-semibold rounded px-5 py-3 shadow focus:outline-none focus:ring-2 focus:ring-red-400 transition' %}
|
|
24
|
+
{% assign _content = _atc_button_content | default: 'Add to cart' %}
|
|
25
|
+
|
|
26
|
+
<button
|
|
27
|
+
{% if _id %}id="{{ _id }}"{% endif %}
|
|
28
|
+
class="atc-btn {{ _classes }}"
|
|
29
|
+
type="button"
|
|
30
|
+
data-lib="atc-button">
|
|
31
|
+
{{ _content }}
|
|
32
|
+
</button>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "lib-atc-button",
|
|
3
|
+
"type": "snippet-component",
|
|
4
|
+
"version": "2.0.0",
|
|
5
|
+
"description": "Basic add to cart button.",
|
|
6
|
+
"primary": {
|
|
7
|
+
"path": "lib-atc-button.liquid",
|
|
8
|
+
"hash": "8a349e5812cbef6697f3f13cd7ec7580"
|
|
9
|
+
},
|
|
10
|
+
"files": [
|
|
11
|
+
{
|
|
12
|
+
"src": "components/lib-atc-button/lib-atc-button.liquid",
|
|
13
|
+
"destDir": "snippets",
|
|
14
|
+
"hash": "8a349e5812cbef6697f3f13cd7ec7580"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"src": "components/lib-atc-button/lib-atc-button.js",
|
|
18
|
+
"destDir": "assets"
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"assets": {
|
|
22
|
+
"js": [
|
|
23
|
+
"lib-atc-button.js"
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
"props": [
|
|
27
|
+
{
|
|
28
|
+
"name": "_content",
|
|
29
|
+
"type": "string",
|
|
30
|
+
"required": true,
|
|
31
|
+
"description": "The button label (e.g. \"Add to cart\").",
|
|
32
|
+
"placeholder": "'Add to cart'"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"name": "_id",
|
|
36
|
+
"type": "string",
|
|
37
|
+
"required": false,
|
|
38
|
+
"description": "Optional id for the button."
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"name": "_classes",
|
|
42
|
+
"type": "string",
|
|
43
|
+
"required": true,
|
|
44
|
+
"description": "Additional classes for the button styling.",
|
|
45
|
+
"placeholder": "'bg-red-600 hover:bg-red-700 text-white font-semibold rounded px-5 py-3 shadow focus:outline-none focus:ring-2 focus:ring-red-400 transition'"
|
|
46
|
+
}
|
|
47
|
+
],
|
|
48
|
+
"dependencies": [],
|
|
49
|
+
"scope": [
|
|
50
|
+
"product",
|
|
51
|
+
"collection"
|
|
52
|
+
],
|
|
53
|
+
"registry": {
|
|
54
|
+
"createdAt": "2026-02-01T19:39:52.718Z",
|
|
55
|
+
"hash": "8a349e5812cbef6697f3f13cd7ec7580"
|
|
56
|
+
},
|
|
57
|
+
"build": {
|
|
58
|
+
"lastAuditAt": "2026-02-01T20:36:25.298Z"
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{%- comment -%}
|
|
2
|
+
Component: lib-description
|
|
3
|
+
Type: snippet-component
|
|
4
|
+
|
|
5
|
+
Props (snake_case with leading underscore). Use a default filter to mark required:
|
|
6
|
+
- _description_content: string (required)
|
|
7
|
+
- _aria_label: string (optional)
|
|
8
|
+
- _description_id: string (optional)
|
|
9
|
+
|
|
10
|
+
Description
|
|
11
|
+
- @description: Describe what this component does.
|
|
12
|
+
|
|
13
|
+
Scope (theme contexts):
|
|
14
|
+
- @scope= all
|
|
15
|
+
|
|
16
|
+
Docs (inline prop descriptions):
|
|
17
|
+
- @prop _content: The item description you wish to display.
|
|
18
|
+
- @prop _classes: Additional classes for the description styling.
|
|
19
|
+
- @prop _enable_truncate: Boolean to enable truncation of text.
|
|
20
|
+
- @prop _enable_strip_html: Boolean to enable stripping HTML tags.
|
|
21
|
+
{%- endcomment -%}
|
|
22
|
+
|
|
23
|
+
{% assign _content = _content | default: product.description %}
|
|
24
|
+
{% assign _classes = _classes | default: 'mb-4' %}
|
|
25
|
+
{% assign _enable_truncate = _enable_truncate | default: true %}
|
|
26
|
+
{% assign _truncate_length = _truncate_length | default: 100 %}
|
|
27
|
+
{% assign _enable_strip_html = _enable_strip_html | default: true %}
|
|
28
|
+
|
|
29
|
+
<div class="description-wrapper {{ _classes }}">
|
|
30
|
+
{% assign description_text = _content %}
|
|
31
|
+
{% if _enable_strip_html %}
|
|
32
|
+
{% assign description_text = description_text | strip_html %}
|
|
33
|
+
{% endif %}
|
|
34
|
+
{% if _enable_truncate %}
|
|
35
|
+
{% assign description_text = description_text | truncate: _truncate_length %}
|
|
36
|
+
{% endif %}
|
|
37
|
+
<p data-lib="description">
|
|
38
|
+
{{ description_text }}
|
|
39
|
+
</p>
|
|
40
|
+
</div>
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "lib-description",
|
|
3
|
+
"type": "snippet-component",
|
|
4
|
+
"version": "2.0.0",
|
|
5
|
+
"description": "Describe what this component does.",
|
|
6
|
+
"primary": {
|
|
7
|
+
"path": "lib-description.liquid",
|
|
8
|
+
"hash": "854f1fc5f48159e00bbfa5675eb97814"
|
|
9
|
+
},
|
|
10
|
+
"files": [
|
|
11
|
+
{
|
|
12
|
+
"src": "components/lib-description/lib-description.liquid",
|
|
13
|
+
"destDir": "snippets",
|
|
14
|
+
"hash": "854f1fc5f48159e00bbfa5675eb97814"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"assets": {},
|
|
18
|
+
"props": [
|
|
19
|
+
{
|
|
20
|
+
"name": "_content",
|
|
21
|
+
"type": "string",
|
|
22
|
+
"required": true,
|
|
23
|
+
"description": "The item description you wish to display.",
|
|
24
|
+
"placeholder": "product.description"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "_classes",
|
|
28
|
+
"type": "string",
|
|
29
|
+
"required": true,
|
|
30
|
+
"description": "Additional classes for the description styling.",
|
|
31
|
+
"placeholder": "'mb-4'"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "_enable_truncate",
|
|
35
|
+
"type": "string",
|
|
36
|
+
"required": true,
|
|
37
|
+
"description": "Boolean to enable truncation of text.",
|
|
38
|
+
"placeholder": "true"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"name": "_truncate_length",
|
|
42
|
+
"type": "string",
|
|
43
|
+
"required": true,
|
|
44
|
+
"description": "",
|
|
45
|
+
"placeholder": "100"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "_enable_strip_html",
|
|
49
|
+
"type": "string",
|
|
50
|
+
"required": true,
|
|
51
|
+
"description": "Boolean to enable stripping HTML tags.",
|
|
52
|
+
"placeholder": "true"
|
|
53
|
+
}
|
|
54
|
+
],
|
|
55
|
+
"dependencies": [],
|
|
56
|
+
"scope": [
|
|
57
|
+
"all"
|
|
58
|
+
],
|
|
59
|
+
"registry": {
|
|
60
|
+
"createdAt": "2026-02-01T19:39:42.311Z",
|
|
61
|
+
"hash": "854f1fc5f48159e00bbfa5675eb97814"
|
|
62
|
+
},
|
|
63
|
+
"build": {
|
|
64
|
+
"lastAuditAt": "2026-02-02T11:10:09.484Z"
|
|
65
|
+
}
|
|
66
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{%- comment -%}
|
|
2
|
+
Component: lib-image
|
|
3
|
+
Type: snippet-component
|
|
4
|
+
|
|
5
|
+
Props (snake_case with leading underscore). Use a default filter to mark required:
|
|
6
|
+
- _image_content: string (required)
|
|
7
|
+
- _aria_label: string (optional)
|
|
8
|
+
- _image_id: string (optional)
|
|
9
|
+
|
|
10
|
+
Description
|
|
11
|
+
- @description: A component for rendering an image.
|
|
12
|
+
|
|
13
|
+
Scope (theme contexts):
|
|
14
|
+
- @scope= all
|
|
15
|
+
|
|
16
|
+
Docs (inline prop descriptions):
|
|
17
|
+
- @prop _image: The image to display.
|
|
18
|
+
- @prop _alt_text: The alt text for the image.
|
|
19
|
+
- @prop _classes: Additional classes for the image styling.
|
|
20
|
+
- @prop _width: The width of the image.
|
|
21
|
+
-@prop _height: The height of the image.
|
|
22
|
+
{%- endcomment -%}
|
|
23
|
+
|
|
24
|
+
{% assign _image = _image | default: product.featured_image | image_url: width: _width, height: _height %}
|
|
25
|
+
{% assign _alt_text = _alt_text | default: product.title %}
|
|
26
|
+
{% assign _classes = _classes | default: 'w-full aspect-square object-cover rounded-md mb-2' %}
|
|
27
|
+
{% assign _width = _width | default: 250 %}
|
|
28
|
+
{% assign _height = _height | default: 250 %}
|
|
29
|
+
|
|
30
|
+
<div class="image-container {{ _classes }}" style="width: {{ _width }}px; height: {{ _height }}px;">
|
|
31
|
+
{% if _image %}
|
|
32
|
+
<img
|
|
33
|
+
class="w-full h-full object-cover block {{ _classes }}"
|
|
34
|
+
src="{{ _image }}"
|
|
35
|
+
width="{{ _width }}"
|
|
36
|
+
height="{{ _height }}"
|
|
37
|
+
alt="{{ _alt_text }}" />
|
|
38
|
+
{% endif %}
|
|
39
|
+
</div>
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "lib-image",
|
|
3
|
+
"type": "snippet-component",
|
|
4
|
+
"version": "4.0.0",
|
|
5
|
+
"description": "A component for rendering an image.",
|
|
6
|
+
"primary": {
|
|
7
|
+
"path": "lib-image.liquid",
|
|
8
|
+
"hash": "87bd8f070a3fc42161957d506feeab54"
|
|
9
|
+
},
|
|
10
|
+
"files": [
|
|
11
|
+
{
|
|
12
|
+
"src": "components/lib-image/lib-image.liquid",
|
|
13
|
+
"destDir": "snippets",
|
|
14
|
+
"hash": "87bd8f070a3fc42161957d506feeab54"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"assets": {},
|
|
18
|
+
"props": [
|
|
19
|
+
{
|
|
20
|
+
"name": "_image",
|
|
21
|
+
"type": "string",
|
|
22
|
+
"required": true,
|
|
23
|
+
"description": "The image to display.",
|
|
24
|
+
"placeholder": "product.featured_image | image_url: width: _width, height: _height"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "_alt_text",
|
|
28
|
+
"type": "string",
|
|
29
|
+
"required": true,
|
|
30
|
+
"description": "The alt text for the image.",
|
|
31
|
+
"placeholder": "product.title"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "_classes",
|
|
35
|
+
"type": "string",
|
|
36
|
+
"required": true,
|
|
37
|
+
"description": "Additional classes for the image styling.",
|
|
38
|
+
"placeholder": "'w-full aspect-square object-cover rounded-md mb-2'"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"name": "_width",
|
|
42
|
+
"type": "string",
|
|
43
|
+
"required": true,
|
|
44
|
+
"description": "The width of the image.",
|
|
45
|
+
"placeholder": "250"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "_height",
|
|
49
|
+
"type": "string",
|
|
50
|
+
"required": true,
|
|
51
|
+
"description": "The height of the image.",
|
|
52
|
+
"placeholder": "250"
|
|
53
|
+
}
|
|
54
|
+
],
|
|
55
|
+
"dependencies": [],
|
|
56
|
+
"scope": [
|
|
57
|
+
"all"
|
|
58
|
+
],
|
|
59
|
+
"registry": {
|
|
60
|
+
"createdAt": "2026-02-01T19:39:23.849Z",
|
|
61
|
+
"hash": "87bd8f070a3fc42161957d506feeab54"
|
|
62
|
+
},
|
|
63
|
+
"build": {
|
|
64
|
+
"lastAuditAt": "2026-02-02T11:01:58.315Z"
|
|
65
|
+
}
|
|
66
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{%- comment -%}
|
|
2
|
+
Component: lib-price
|
|
3
|
+
Type: snippet-component
|
|
4
|
+
|
|
5
|
+
Props (snake_case with leading underscore). Use a default filter to mark required:
|
|
6
|
+
- _price_content: string (required)
|
|
7
|
+
- _aria_label: string (optional)
|
|
8
|
+
- _price_id: string (optional)
|
|
9
|
+
|
|
10
|
+
Description
|
|
11
|
+
- @description: Show a products price.
|
|
12
|
+
|
|
13
|
+
Scope (theme contexts):
|
|
14
|
+
- @scope= product, collection, search, cart
|
|
15
|
+
|
|
16
|
+
Docs (inline prop descriptions):
|
|
17
|
+
- @prop _price: The products price to display.
|
|
18
|
+
- @prop _show_compare_at: Whether to show the compare at price.
|
|
19
|
+
- @prop _classes: Whether to show the compare at price.
|
|
20
|
+
{%- endcomment -%}
|
|
21
|
+
|
|
22
|
+
{% assign _price = _price | default: product.selected_or_first_available_variant.price %}
|
|
23
|
+
{% assign _classes = _classes | default: 'm-4' %}
|
|
24
|
+
{% assign _show_compare_at = _show_compare_at | default: true %}
|
|
25
|
+
|
|
26
|
+
<div class="price-wrap {{ _classes }}">
|
|
27
|
+
<span>
|
|
28
|
+
{{ _price | money }}
|
|
29
|
+
</span>
|
|
30
|
+
{%- if _show_compare_at and product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price -%}
|
|
31
|
+
<span class="line-through ml-2">
|
|
32
|
+
{{ product.selected_or_first_available_variant.compare_at_price | money }}
|
|
33
|
+
</span>
|
|
34
|
+
{%- endif -%}
|
|
35
|
+
</div>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "lib-price",
|
|
3
|
+
"type": "snippet-component",
|
|
4
|
+
"version": "4.0.0",
|
|
5
|
+
"description": "Show a products price.",
|
|
6
|
+
"primary": {
|
|
7
|
+
"path": "lib-price.liquid",
|
|
8
|
+
"hash": "38a260348195688cf0a45dff8c73fe8f"
|
|
9
|
+
},
|
|
10
|
+
"files": [
|
|
11
|
+
{
|
|
12
|
+
"src": "components/lib-price/lib-price.liquid",
|
|
13
|
+
"destDir": "snippets",
|
|
14
|
+
"hash": "38a260348195688cf0a45dff8c73fe8f"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"assets": {},
|
|
18
|
+
"props": [
|
|
19
|
+
{
|
|
20
|
+
"name": "_price",
|
|
21
|
+
"type": "string",
|
|
22
|
+
"required": true,
|
|
23
|
+
"description": "The products price to display.",
|
|
24
|
+
"placeholder": "product.selected_or_first_available_variant.price"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "_classes",
|
|
28
|
+
"type": "string",
|
|
29
|
+
"required": true,
|
|
30
|
+
"description": "Whether to show the compare at price.",
|
|
31
|
+
"placeholder": "'m-4'"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "_show_compare_at",
|
|
35
|
+
"type": "string",
|
|
36
|
+
"required": true,
|
|
37
|
+
"description": "Whether to show the compare at price.",
|
|
38
|
+
"placeholder": "true"
|
|
39
|
+
}
|
|
40
|
+
],
|
|
41
|
+
"dependencies": [],
|
|
42
|
+
"scope": [
|
|
43
|
+
"product",
|
|
44
|
+
"collection",
|
|
45
|
+
"search",
|
|
46
|
+
"cart"
|
|
47
|
+
],
|
|
48
|
+
"registry": {
|
|
49
|
+
"createdAt": "2026-02-01T19:39:01.207Z",
|
|
50
|
+
"hash": "38a260348195688cf0a45dff8c73fe8f"
|
|
51
|
+
},
|
|
52
|
+
"build": {
|
|
53
|
+
"lastAuditAt": "2026-02-02T11:10:33.370Z"
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{%- comment -%}
|
|
2
|
+
Component: lib-tags
|
|
3
|
+
Type: snippet-component
|
|
4
|
+
|
|
5
|
+
Props (snake_case with leading underscore). Use a default filter to mark required:
|
|
6
|
+
- _tags_content: string (required)
|
|
7
|
+
- _aria_label: string (optional)
|
|
8
|
+
- _tags_id: string (optional)
|
|
9
|
+
|
|
10
|
+
Description
|
|
11
|
+
- @description: Show the product tags.
|
|
12
|
+
|
|
13
|
+
Scope (theme contexts):
|
|
14
|
+
- @scope= all
|
|
15
|
+
|
|
16
|
+
Docs (inline prop descriptions):
|
|
17
|
+
- @prop _number_of_tags: Determine how many tags to show.
|
|
18
|
+
- @prop _classes: Additional classes for the tags styling.
|
|
19
|
+
- @prop _tags: The list of tags to display.
|
|
20
|
+
{%- endcomment -%}
|
|
21
|
+
|
|
22
|
+
{% assign _classes = _classes | default: 'tag-list flex flex-wrap gap-2 mb-2 text-xs text-gray-600' %}
|
|
23
|
+
{% assign _number_of_tags = _number_of_tags | default: 3 %}
|
|
24
|
+
{% assign _tags = _tags | default: product.tags %}
|
|
25
|
+
|
|
26
|
+
<ul class="{{ _classes }}">
|
|
27
|
+
{% if _number_of_tags %}
|
|
28
|
+
{% assign tag_limit = _number_of_tags | plus: 0 %}
|
|
29
|
+
{% for tag in _tags limit: tag_limit %}
|
|
30
|
+
<li>{{ tag }}</li>
|
|
31
|
+
{% endfor %}
|
|
32
|
+
{% else %}
|
|
33
|
+
{% for tag in _tags %}
|
|
34
|
+
<li>{{ tag }}</li>
|
|
35
|
+
{% endfor %}
|
|
36
|
+
{% endif %}
|
|
37
|
+
</ul>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "lib-tags",
|
|
3
|
+
"type": "snippet-component",
|
|
4
|
+
"version": "4.0.0",
|
|
5
|
+
"description": "Show the product tags.",
|
|
6
|
+
"primary": {
|
|
7
|
+
"path": "lib-tags.liquid",
|
|
8
|
+
"hash": "eba86dd5b4d671cca41af6e142ca5c7b"
|
|
9
|
+
},
|
|
10
|
+
"files": [
|
|
11
|
+
{
|
|
12
|
+
"src": "components/lib-tags/lib-tags.liquid",
|
|
13
|
+
"destDir": "snippets",
|
|
14
|
+
"hash": "eba86dd5b4d671cca41af6e142ca5c7b"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"assets": {},
|
|
18
|
+
"props": [
|
|
19
|
+
{
|
|
20
|
+
"name": "_classes",
|
|
21
|
+
"type": "string",
|
|
22
|
+
"required": true,
|
|
23
|
+
"description": "Additional classes for the tags styling.",
|
|
24
|
+
"placeholder": "'tag-list flex flex-wrap gap-2 mb-2 text-xs text-gray-600'"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "_number_of_tags",
|
|
28
|
+
"type": "string",
|
|
29
|
+
"required": true,
|
|
30
|
+
"description": "Determine how many tags to show.",
|
|
31
|
+
"placeholder": "3"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "_tags",
|
|
35
|
+
"type": "string",
|
|
36
|
+
"required": true,
|
|
37
|
+
"description": "The list of tags to display.",
|
|
38
|
+
"placeholder": "product.tags"
|
|
39
|
+
}
|
|
40
|
+
],
|
|
41
|
+
"dependencies": [],
|
|
42
|
+
"scope": [
|
|
43
|
+
"all"
|
|
44
|
+
],
|
|
45
|
+
"registry": {
|
|
46
|
+
"createdAt": "2026-02-01T20:38:27.819Z",
|
|
47
|
+
"hash": "eba86dd5b4d671cca41af6e142ca5c7b"
|
|
48
|
+
},
|
|
49
|
+
"build": {
|
|
50
|
+
"lastAuditAt": "2026-02-02T11:10:09.545Z"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{%- comment -%}
|
|
2
|
+
Component: lib-title
|
|
3
|
+
Type: snippet-component
|
|
4
|
+
|
|
5
|
+
Props (snake_case with leading underscore). Use a default filter to mark required:
|
|
6
|
+
- _title_content: string (required)
|
|
7
|
+
- _aria_label: string (optional)
|
|
8
|
+
- _title_id: string (optional)
|
|
9
|
+
|
|
10
|
+
Description
|
|
11
|
+
- @description: This component, can be used to display any title passed to it.
|
|
12
|
+
|
|
13
|
+
Scope (theme contexts):
|
|
14
|
+
- @scope= all
|
|
15
|
+
|
|
16
|
+
Docs (inline prop descriptions):
|
|
17
|
+
- @prop _title_content: The title to display.
|
|
18
|
+
- @prop _classes: The classes used to style the component.
|
|
19
|
+
- @prop _tag_type: The HTML tag type to use for the title (e.g., h1, h2, h3).
|
|
20
|
+
{%- endcomment -%}
|
|
21
|
+
|
|
22
|
+
{% assign _classes = _classes | default: 'mb-4' %}
|
|
23
|
+
{% assign _title_content = _title_content | default: product.title %}
|
|
24
|
+
{% assign _tag_type = _tag_type | default: 'h3' %}
|
|
25
|
+
|
|
26
|
+
<{{ _tag_type }} class="{{ _classes }}">
|
|
27
|
+
<span>{{ _title_content }}</span>
|
|
28
|
+
</{{ _tag_type }}>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "lib-title",
|
|
3
|
+
"type": "snippet-component",
|
|
4
|
+
"version": "3.0.0",
|
|
5
|
+
"description": "This component, can be used to display any title passed to it.",
|
|
6
|
+
"primary": {
|
|
7
|
+
"path": "lib-title.liquid",
|
|
8
|
+
"hash": "86ff1b35646d0defe4ef47ef33b27299"
|
|
9
|
+
},
|
|
10
|
+
"files": [
|
|
11
|
+
{
|
|
12
|
+
"src": "components/lib-title/lib-title.liquid",
|
|
13
|
+
"destDir": "snippets",
|
|
14
|
+
"hash": "86ff1b35646d0defe4ef47ef33b27299"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"assets": {},
|
|
18
|
+
"props": [
|
|
19
|
+
{
|
|
20
|
+
"name": "_tag_type",
|
|
21
|
+
"type": "string",
|
|
22
|
+
"required": true,
|
|
23
|
+
"description": "The HTML tag type to use for the title (e.g., h1, h2, h3).",
|
|
24
|
+
"placeholder": "'h3'"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "_title_content",
|
|
28
|
+
"type": "string",
|
|
29
|
+
"required": true,
|
|
30
|
+
"description": "The title to display.",
|
|
31
|
+
"placeholder": "product.title"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "_classes",
|
|
35
|
+
"type": "string",
|
|
36
|
+
"required": true,
|
|
37
|
+
"description": "The classes used to style the component.",
|
|
38
|
+
"placeholder": "'mb-4'"
|
|
39
|
+
}
|
|
40
|
+
],
|
|
41
|
+
"dependencies": [],
|
|
42
|
+
"scope": [
|
|
43
|
+
"all"
|
|
44
|
+
],
|
|
45
|
+
"registry": {
|
|
46
|
+
"createdAt": "2026-02-01T19:38:46.676Z",
|
|
47
|
+
"hash": "86ff1b35646d0defe4ef47ef33b27299"
|
|
48
|
+
},
|
|
49
|
+
"build": {
|
|
50
|
+
"lastAuditAt": "2026-02-01T19:55:40.375Z"
|
|
51
|
+
}
|
|
52
|
+
}
|