@jay-framework/wix-stores 0.19.7 → 0.21.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/README.md +14 -12
- package/agent-kit/aiditor/add-menu.template.yaml +109 -0
- package/agent-kit/aiditor/thumbnails/wix-stores/category-list.svg +12 -0
- package/agent-kit/aiditor/thumbnails/wix-stores/category-products.svg +15 -0
- package/agent-kit/aiditor/thumbnails/wix-stores/product-page.svg +12 -0
- package/agent-kit/aiditor/thumbnails/wix-stores/product-search.svg +17 -0
- package/agent-kit/aiditor/thumbnails/wix-stores/related-products.svg +15 -0
- package/agent-kit/designer/related-products.md +123 -0
- package/dist/agent-kit/aiditor/add-menu.template.yaml +54 -12
- package/dist/agent-kit/aiditor/thumbnails/wix-stores/category-list.svg +12 -0
- package/dist/agent-kit/aiditor/thumbnails/wix-stores/category-products.svg +15 -0
- package/dist/agent-kit/aiditor/thumbnails/wix-stores/product-page.svg +12 -0
- package/dist/agent-kit/aiditor/thumbnails/wix-stores/product-search.svg +17 -0
- package/dist/agent-kit/aiditor/thumbnails/wix-stores/related-products.svg +15 -0
- package/dist/index.client.js +130 -14
- package/dist/index.d.ts +38 -10
- package/dist/index.js +433 -135
- package/package.json +18 -21
package/README.md
CHANGED
|
@@ -40,6 +40,12 @@ Supports three roles depending on route params:
|
|
|
40
40
|
|
|
41
41
|
Lists all store categories for navigation.
|
|
42
42
|
|
|
43
|
+
### Category Products (`category-products`)
|
|
44
|
+
|
|
45
|
+
Product grid from a specific category. Props: `categorySlug`, optional `productId` (exclude one product), optional `limit` (default 4).
|
|
46
|
+
|
|
47
|
+
**Related products on a product page:** bind `productId="{p._id}"` and `categorySlug="{p.categorySlug}"` from an existing `product-page` key. Same-category siblings — not machine-learning recommendations. See `agent-kit/designer/related-products.md` (copied to the project on `jay-stack agent-kit`) and Add Menu item `wix-stores:related-products`.
|
|
48
|
+
|
|
43
49
|
## Configuration
|
|
44
50
|
|
|
45
51
|
### Setup
|
|
@@ -50,12 +56,13 @@ The plugin requires `@jay-framework/wix-server-client` to be configured with Wix
|
|
|
50
56
|
jay-stack setup wix-stores
|
|
51
57
|
```
|
|
52
58
|
|
|
53
|
-
This creates `config/.wix-stores.yaml` and writes static AIditor Add Menu component items to `agent-kit/aiditor/add-menu/wix-stores.yaml
|
|
59
|
+
This creates `config/.wix-stores.yaml` and writes static AIditor Add Menu component items to `agent-kit/aiditor/add-menu/wix-stores.yaml` (includes **Related products** — `wix-stores:related-products`).
|
|
54
60
|
|
|
55
61
|
Run `jay-stack agent-kit` (or `yarn agent-kit`) to index the live category tree and refresh:
|
|
56
62
|
|
|
57
63
|
- `agent-kit/references/wix-stores/categories.yaml` — full hierarchy for agent discovery
|
|
58
64
|
- `agent-kit/aiditor/add-menu/wix-stores.generated.yaml` — one Add Menu item per category (Store → Categories)
|
|
65
|
+
- `agent-kit/designer/related-products.md` — recipe for related products on product pages (from this package)
|
|
59
66
|
|
|
60
67
|
### Config File (`config/.wix-stores.yaml`)
|
|
61
68
|
|
|
@@ -64,9 +71,6 @@ Run `jay-stack agent-kit` (or `yarn agent-kit`) to index the live category tree
|
|
|
64
71
|
urls:
|
|
65
72
|
product: '/products/{slug}' # default
|
|
66
73
|
category: null # no category pages by default
|
|
67
|
-
|
|
68
|
-
# Fallback category for pages without category context
|
|
69
|
-
defaultCategory: 'all-products' # slug of the fallback category
|
|
70
74
|
```
|
|
71
75
|
|
|
72
76
|
URL templates use three placeholders:
|
|
@@ -114,7 +118,6 @@ src/pages/products/
|
|
|
114
118
|
urls:
|
|
115
119
|
product: '/products/{prefix}/{category}/{slug}'
|
|
116
120
|
category: '/products/{prefix}/{category}'
|
|
117
|
-
defaultCategory: 'all-products'
|
|
118
121
|
```
|
|
119
122
|
|
|
120
123
|
```
|
|
@@ -154,12 +157,12 @@ src/pages/products/polgat/
|
|
|
154
157
|
|
|
155
158
|
### Setting Params for Static Routes
|
|
156
159
|
|
|
157
|
-
Static route directories use `jay-params` to tell the component which
|
|
160
|
+
Static route directories use `jay-params` to tell the component which category they represent:
|
|
158
161
|
|
|
159
162
|
```html
|
|
160
|
-
<!-- src/pages/products/polgat/page.jay-html -->
|
|
163
|
+
<!-- src/pages/products/polgat/page.jay-html (root category) -->
|
|
161
164
|
<script type="application/jay-params">
|
|
162
|
-
|
|
165
|
+
category: polgat
|
|
163
166
|
</script>
|
|
164
167
|
<script
|
|
165
168
|
type="application/jay-headless"
|
|
@@ -171,11 +174,10 @@ Static route directories use `jay-params` to tell the component which prefix the
|
|
|
171
174
|
|
|
172
175
|
## Category Header
|
|
173
176
|
|
|
174
|
-
The category header is always loaded. The component resolves category metadata
|
|
177
|
+
The category header is always loaded. The component resolves category metadata:
|
|
175
178
|
|
|
176
|
-
1. **`category` param** → load category
|
|
177
|
-
2.
|
|
178
|
-
3. **Neither** → load `defaultCategory` from config
|
|
179
|
+
1. **`category` param** → load category (always the active category slug)
|
|
180
|
+
2. **No `category`** → load the "All Products" system category via `getAllProductsCategory()` (header only, no base filter)
|
|
179
181
|
|
|
180
182
|
If the resolved category is missing image, description, or SEO data, the component walks up the parent chain until it finds the data. Each field inherits independently.
|
|
181
183
|
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
items:
|
|
2
|
+
- id: wix-stores:product-search
|
|
3
|
+
title: Product search
|
|
4
|
+
category: Store
|
|
5
|
+
subCategory: Components
|
|
6
|
+
pluginName: wix-stores
|
|
7
|
+
packageName: "@jay-framework/wix-stores"
|
|
8
|
+
thumbnail: thumbnails/wix-stores/product-search.svg
|
|
9
|
+
interaction:
|
|
10
|
+
mode: stage-place
|
|
11
|
+
stagePromptTemplate: |
|
|
12
|
+
Add a product search component at this marker location on the page.
|
|
13
|
+
prompt: |
|
|
14
|
+
Use headless component @jay-framework/wix-stores / contract product-search.
|
|
15
|
+
Read node_modules/@jay-framework/wix-stores/dist/contracts/product-search.jay-contract.
|
|
16
|
+
Script key: search
|
|
17
|
+
Bind ViewState and refs per agent-kit/designer/INSTRUCTIONS.md.
|
|
18
|
+
|
|
19
|
+
- id: wix-stores:product-page
|
|
20
|
+
title: Product page
|
|
21
|
+
category: Store
|
|
22
|
+
subCategory: Components
|
|
23
|
+
pluginName: wix-stores
|
|
24
|
+
packageName: "@jay-framework/wix-stores"
|
|
25
|
+
thumbnail: thumbnails/wix-stores/product-page.svg
|
|
26
|
+
interaction:
|
|
27
|
+
mode: stage-place
|
|
28
|
+
stagePromptTemplate: |
|
|
29
|
+
Add a product page component at this marker location on the page.
|
|
30
|
+
prompt: |
|
|
31
|
+
Use headless component @jay-framework/wix-stores / contract product-page.
|
|
32
|
+
Read agent-kit/materialized-contracts/wix-stores/product-page.jay-contract.
|
|
33
|
+
Script key: p
|
|
34
|
+
Bind ViewState and refs per agent-kit/designer/INSTRUCTIONS.md.
|
|
35
|
+
|
|
36
|
+
- id: wix-stores:related-products
|
|
37
|
+
title: Related products
|
|
38
|
+
category: Store
|
|
39
|
+
subCategory: Components
|
|
40
|
+
pluginName: wix-stores
|
|
41
|
+
packageName: "@jay-framework/wix-stores"
|
|
42
|
+
thumbnail: thumbnails/wix-stores/related-products.svg
|
|
43
|
+
interaction:
|
|
44
|
+
mode: stage-place
|
|
45
|
+
stagePromptTemplate: |
|
|
46
|
+
Add a related products section at this marker location on the page.
|
|
47
|
+
prompt: |
|
|
48
|
+
"Related products" uses contract category-products (no separate related-products contract).
|
|
49
|
+
Read agent-kit/designer/related-products.md for the full recipe.
|
|
50
|
+
Read node_modules/@jay-framework/wix-stores/dist/contracts/category-products.jay-contract.
|
|
51
|
+
On a product page that already has product-page (key "p"):
|
|
52
|
+
1. Add headless import for category-products in <head> (no key attribute).
|
|
53
|
+
2. Place <jay:category-products productId="{p._id}" categorySlug="{p.categorySlug}" limit="4"> at the marker.
|
|
54
|
+
3. Inside the wrapper: forEach="products" with product-card fields; refs use products.* prefix.
|
|
55
|
+
Same-category siblings excluding the current product — not ML recommendations.
|
|
56
|
+
|
|
57
|
+
- id: wix-stores:category-products
|
|
58
|
+
title: Category products
|
|
59
|
+
category: Store
|
|
60
|
+
subCategory: Components
|
|
61
|
+
pluginName: wix-stores
|
|
62
|
+
packageName: "@jay-framework/wix-stores"
|
|
63
|
+
thumbnail: thumbnails/wix-stores/category-products.svg
|
|
64
|
+
interaction:
|
|
65
|
+
mode: stage-place
|
|
66
|
+
stagePromptTemplate: |
|
|
67
|
+
Add a category products grid at this marker location on the page.
|
|
68
|
+
prompt: |
|
|
69
|
+
Use headless component @jay-framework/wix-stores / contract category-products.
|
|
70
|
+
Read node_modules/@jay-framework/wix-stores/dist/contracts/category-products.jay-contract.
|
|
71
|
+
Instance pattern: declare import in <head> without key, then <jay:category-products categorySlug="...">.
|
|
72
|
+
Pass categorySlug to show products from a category. Pass productId to exclude a product.
|
|
73
|
+
On product pages for "related products", see agent-kit/designer/related-products.md instead.
|
|
74
|
+
Bind ViewState and refs per agent-kit/designer/INSTRUCTIONS.md.
|
|
75
|
+
|
|
76
|
+
- id: wix-stores:product-spotlight
|
|
77
|
+
title: Product spotlight
|
|
78
|
+
category: Store
|
|
79
|
+
subCategory: Components
|
|
80
|
+
pluginName: wix-stores
|
|
81
|
+
packageName: "@jay-framework/wix-stores"
|
|
82
|
+
thumbnail: thumbnails/wix-stores/product-spotlight.png
|
|
83
|
+
interaction:
|
|
84
|
+
mode: stage-place
|
|
85
|
+
stagePromptTemplate: |
|
|
86
|
+
Add a product spotlight at this marker location on the page.
|
|
87
|
+
prompt: |
|
|
88
|
+
Use headless component @jay-framework/wix-stores / contract product-spotlight.
|
|
89
|
+
Read node_modules/@jay-framework/wix-stores/dist/contracts/product-spotlight.jay-contract.
|
|
90
|
+
Instance pattern: declare import in <head> without key, then <jay:product-spotlight slug="...">.
|
|
91
|
+
Pass slug as a prop to specify which product to display.
|
|
92
|
+
Bind ViewState and refs per agent-kit/designer/INSTRUCTIONS.md.
|
|
93
|
+
|
|
94
|
+
- id: wix-stores:category-list
|
|
95
|
+
title: Category list
|
|
96
|
+
category: Store
|
|
97
|
+
subCategory: Components
|
|
98
|
+
pluginName: wix-stores
|
|
99
|
+
packageName: "@jay-framework/wix-stores"
|
|
100
|
+
thumbnail: thumbnails/wix-stores/category-list.svg
|
|
101
|
+
interaction:
|
|
102
|
+
mode: stage-place
|
|
103
|
+
stagePromptTemplate: |
|
|
104
|
+
Add a category list at this marker location on the page.
|
|
105
|
+
prompt: |
|
|
106
|
+
Use headless component @jay-framework/wix-stores / contract category-list.
|
|
107
|
+
Read node_modules/@jay-framework/wix-stores/dist/contracts/category-list.jay-contract.
|
|
108
|
+
Script key: categories
|
|
109
|
+
Bind ViewState and refs per agent-kit/designer/INSTRUCTIONS.md.
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240" fill="none">
|
|
2
|
+
<rect width="320" height="240" fill="#f8fafc"/>
|
|
3
|
+
<rect x="16" y="20" width="288" height="36" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
4
|
+
<rect x="28" y="32" width="120" height="12" rx="3" fill="#cbd5e1"/>
|
|
5
|
+
<rect x="16" y="72" width="136" height="14" rx="4" fill="#e2e8f0"/>
|
|
6
|
+
<rect x="16" y="98" width="288" height="1" fill="#e2e8f0"/>
|
|
7
|
+
<rect x="16" y="112" width="200" height="12" rx="3" fill="#cbd5e1"/>
|
|
8
|
+
<rect x="16" y="136" width="160" height="10" rx="3" fill="#e2e8f0"/>
|
|
9
|
+
<rect x="16" y="168" width="288" height="1" fill="#e2e8f0"/>
|
|
10
|
+
<rect x="16" y="182" width="184" height="12" rx="3" fill="#cbd5e1"/>
|
|
11
|
+
<rect x="16" y="206" width="128" height="10" rx="3" fill="#e2e8f0"/>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240" fill="none">
|
|
2
|
+
<rect width="320" height="240" fill="#f8fafc"/>
|
|
3
|
+
<rect x="16" y="24" width="120" height="12" rx="3" fill="#cbd5e1"/>
|
|
4
|
+
<rect x="16" y="56" width="72" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
5
|
+
<rect x="24" y="64" width="56" height="48" rx="4" fill="#dbeafe"/>
|
|
6
|
+
<rect x="24" y="120" width="48" height="8" rx="2" fill="#cbd5e1"/>
|
|
7
|
+
<rect x="96" y="56" width="72" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
8
|
+
<rect x="104" y="64" width="56" height="48" rx="4" fill="#fce7f3"/>
|
|
9
|
+
<rect x="104" y="120" width="48" height="8" rx="2" fill="#cbd5e1"/>
|
|
10
|
+
<rect x="176" y="56" width="72" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
11
|
+
<rect x="184" y="64" width="56" height="48" rx="4" fill="#dcfce7"/>
|
|
12
|
+
<rect x="184" y="120" width="48" height="8" rx="2" fill="#cbd5e1"/>
|
|
13
|
+
<rect x="248" y="56" width="56" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
14
|
+
<rect x="256" y="64" width="40" height="48" rx="4" fill="#fef3c7"/>
|
|
15
|
+
</svg>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240" fill="none">
|
|
2
|
+
<rect width="320" height="240" fill="#f4f7fb"/>
|
|
3
|
+
<rect x="16" y="16" width="288" height="28" rx="6" fill="#e2e8f0"/>
|
|
4
|
+
<rect x="16" y="56" width="120" height="12" rx="3" fill="#cbd5e1"/>
|
|
5
|
+
<rect x="16" y="76" width="88" height="10" rx="3" fill="#e2e8f0"/>
|
|
6
|
+
<rect x="16" y="104" width="136" height="120" rx="8" fill="#dbeafe" stroke="#93c5fd"/>
|
|
7
|
+
<rect x="168" y="104" width="136" height="16" rx="4" fill="#cbd5e1"/>
|
|
8
|
+
<rect x="168" y="128" width="96" height="10" rx="3" fill="#e2e8f0"/>
|
|
9
|
+
<rect x="168" y="148" width="72" height="10" rx="3" fill="#e2e8f0"/>
|
|
10
|
+
<rect x="168" y="180" width="88" height="28" rx="6" fill="#2563eb"/>
|
|
11
|
+
<text x="188" y="198" fill="#fff" font-family="system-ui,sans-serif" font-size="11">Add to cart</text>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240" fill="none">
|
|
2
|
+
<rect width="320" height="240" fill="#f8fafc"/>
|
|
3
|
+
<rect x="16" y="16" width="200" height="24" rx="6" fill="#fff" stroke="#cbd5e1"/>
|
|
4
|
+
<rect x="24" y="24" width="64" height="8" rx="2" fill="#e2e8f0"/>
|
|
5
|
+
<g>
|
|
6
|
+
<rect x="16" y="56" width="88" height="88" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
7
|
+
<rect x="24" y="64" width="72" height="48" rx="4" fill="#dbeafe"/>
|
|
8
|
+
<rect x="24" y="120" width="56" height="8" rx="2" fill="#cbd5e1"/>
|
|
9
|
+
<rect x="112" y="56" width="88" height="88" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
10
|
+
<rect x="120" y="64" width="72" height="48" rx="4" fill="#fce7f3"/>
|
|
11
|
+
<rect x="120" y="120" width="56" height="8" rx="2" fill="#cbd5e1"/>
|
|
12
|
+
<rect x="208" y="56" width="88" height="88" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
13
|
+
<rect x="216" y="64" width="72" height="48" rx="4" fill="#dcfce7"/>
|
|
14
|
+
<rect x="216" y="120" width="56" height="8" rx="2" fill="#cbd5e1"/>
|
|
15
|
+
</g>
|
|
16
|
+
<rect x="16" y="160" width="288" height="64" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
17
|
+
</svg>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240" fill="none">
|
|
2
|
+
<rect width="320" height="240" fill="#f8fafc"/>
|
|
3
|
+
<rect x="16" y="24" width="120" height="12" rx="3" fill="#cbd5e1"/>
|
|
4
|
+
<rect x="16" y="56" width="72" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
5
|
+
<rect x="24" y="64" width="56" height="48" rx="4" fill="#dbeafe"/>
|
|
6
|
+
<rect x="24" y="120" width="48" height="8" rx="2" fill="#cbd5e1"/>
|
|
7
|
+
<rect x="96" y="56" width="72" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
8
|
+
<rect x="104" y="64" width="56" height="48" rx="4" fill="#fce7f3"/>
|
|
9
|
+
<rect x="104" y="120" width="48" height="8" rx="2" fill="#cbd5e1"/>
|
|
10
|
+
<rect x="176" y="56" width="72" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
11
|
+
<rect x="184" y="64" width="56" height="48" rx="4" fill="#dcfce7"/>
|
|
12
|
+
<rect x="184" y="120" width="48" height="8" rx="2" fill="#cbd5e1"/>
|
|
13
|
+
<rect x="248" y="56" width="56" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
14
|
+
<rect x="256" y="64" width="40" height="48" rx="4" fill="#fef3c7"/>
|
|
15
|
+
</svg>
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
# Related Products (Product Page)
|
|
2
|
+
|
|
3
|
+
Show a row of product cards at the bottom of a product detail page — same-category siblings, excluding the product being viewed.
|
|
4
|
+
|
|
5
|
+
**Synonym:** user requests for "Related Products", "You may also like", or "More from this category" on a product page all map to the **`category-products`** contract. There is no separate `related-products` contract.
|
|
6
|
+
|
|
7
|
+
**Data model:** products from the displayed product's category (`product-page.categorySlug`), excluding the current product (`product-page._id`). This is **not** machine-learning recommendations — it is same-category catalog browsing.
|
|
8
|
+
|
|
9
|
+
## Prerequisites
|
|
10
|
+
|
|
11
|
+
The page already imports **`product-page`** with a script key (convention: `p`):
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<script
|
|
15
|
+
type="application/jay-headless"
|
|
16
|
+
plugin="@jay-framework/wix-stores"
|
|
17
|
+
contract="product-page"
|
|
18
|
+
key="p"
|
|
19
|
+
></script>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
`p.categorySlug` and `p._id` must be available from the product-page contract.
|
|
23
|
+
|
|
24
|
+
## Import
|
|
25
|
+
|
|
26
|
+
Add a **second** headless import — **no `key`** (instance-based pattern):
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<script
|
|
30
|
+
type="application/jay-headless"
|
|
31
|
+
plugin="@jay-framework/wix-stores"
|
|
32
|
+
contract="category-products"
|
|
33
|
+
></script>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Template
|
|
37
|
+
|
|
38
|
+
Place after the main product layout, typically before the footer:
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<jay:category-products productId="{p._id}" categorySlug="{p.categorySlug}" limit="4">
|
|
42
|
+
<section class="related-section" if="hasProducts">
|
|
43
|
+
<h2>Related products</h2>
|
|
44
|
+
<div class="related-grid">
|
|
45
|
+
<article class="related-card" forEach="products" trackBy="_id" ref="products.cardContainer">
|
|
46
|
+
<a href="{productUrl}" class="related-card-image">
|
|
47
|
+
<img src="{thumbnail.url}" alt="{thumbnail.altText}" loading="lazy" />
|
|
48
|
+
<span class="related-ribbon" if="hasRibbon">{ribbon.name}</span>
|
|
49
|
+
</a>
|
|
50
|
+
<div class="related-card-body">
|
|
51
|
+
<h3 class="related-card-name">
|
|
52
|
+
<a href="{productUrl}" ref="products.productLink">{name}</a>
|
|
53
|
+
</h3>
|
|
54
|
+
<div class="related-card-price">
|
|
55
|
+
<span class="original" if="hasDiscount">{strikethroughPrice}</span>
|
|
56
|
+
<span>{price}</span>
|
|
57
|
+
</div>
|
|
58
|
+
<button
|
|
59
|
+
class="btn-add"
|
|
60
|
+
ref="products.addToCartButton"
|
|
61
|
+
if="quickAddType===SIMPLE && inventory.availabilityStatus===IN_STOCK"
|
|
62
|
+
disabled="isAddingToCart"
|
|
63
|
+
>
|
|
64
|
+
<span if="!isAddingToCart">Add to Cart</span>
|
|
65
|
+
<span if="isAddingToCart">Adding...</span>
|
|
66
|
+
</button>
|
|
67
|
+
<a
|
|
68
|
+
href="{productUrl}"
|
|
69
|
+
class="btn-add btn-options"
|
|
70
|
+
ref="products.viewOptionsButton"
|
|
71
|
+
if="quickAddType!==SIMPLE && inventory.availabilityStatus!==OUT_OF_STOCK"
|
|
72
|
+
>View Options</a>
|
|
73
|
+
</div>
|
|
74
|
+
</article>
|
|
75
|
+
</div>
|
|
76
|
+
</section>
|
|
77
|
+
</jay:category-products>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Inside `<jay:category-products>`, bindings resolve to **that instance's** contract tags (`products`, `hasProducts`, `categoryName`) — not the parent `p` key.
|
|
81
|
+
|
|
82
|
+
## Props
|
|
83
|
+
|
|
84
|
+
| Prop | Value on product page | Purpose |
|
|
85
|
+
| --- | --- | --- |
|
|
86
|
+
| `productId` | `{p._id}` | Exclude the current product from results |
|
|
87
|
+
| `categorySlug` | `{p.categorySlug}` | Load siblings from the same category |
|
|
88
|
+
| `limit` | `4` (optional) | Max cards to show (default 4) |
|
|
89
|
+
|
|
90
|
+
## Refs
|
|
91
|
+
|
|
92
|
+
Product cards use the `product-card` sub-contract. Prefix refs with `products.`:
|
|
93
|
+
|
|
94
|
+
| Ref | Element |
|
|
95
|
+
| --- | --- |
|
|
96
|
+
| `products.productLink` | Product name link |
|
|
97
|
+
| `products.addToCartButton` | Quick add (SIMPLE products) |
|
|
98
|
+
| `products.viewOptionsButton` | Link to product page (configured products) |
|
|
99
|
+
| `products.cardContainer` | Card root (variant stock preload on hover) |
|
|
100
|
+
|
|
101
|
+
See [product-card example](../contracts/examples/product-card.md) for all available fields.
|
|
102
|
+
|
|
103
|
+
## Contract paths
|
|
104
|
+
|
|
105
|
+
| Contract | Path |
|
|
106
|
+
| --- | --- |
|
|
107
|
+
| `category-products` | `node_modules/@jay-framework/wix-stores/dist/contracts/category-products.jay-contract` |
|
|
108
|
+
| `product-page` | `agent-kit/materialized-contracts/wix-stores/product-page.jay-contract` (dynamic — materialized on setup) |
|
|
109
|
+
| `product-card` | Linked sub-contract inside `category-products` |
|
|
110
|
+
|
|
111
|
+
Or read paths from `agent-kit/plugins-index.yaml`.
|
|
112
|
+
|
|
113
|
+
## Category showcases (not product page)
|
|
114
|
+
|
|
115
|
+
To show products from a **specific** category on any page (homepage, landing page), use the same `category-products` contract with a static or param-driven `categorySlug`. Omit `productId` when there is no product to exclude. See Add Menu item **Category products** (`wix-stores:category-products`).
|
|
116
|
+
|
|
117
|
+
## Reference implementation
|
|
118
|
+
|
|
119
|
+
`examples/store-light/src/pages/products/[slug]/page.jay-html` in the wix-stores package repo — Related Products section at page bottom.
|
|
120
|
+
|
|
121
|
+
## AIditor Add Menu
|
|
122
|
+
|
|
123
|
+
Attach **Related products** (`wix-stores:related-products`) when marking an area on a product page. The item prompt includes this recipe; `jay-stack setup wix-stores` writes the catalog to `agent-kit/aiditor/add-menu/wix-stores.yaml`.
|
|
@@ -5,10 +5,14 @@ items:
|
|
|
5
5
|
subCategory: Components
|
|
6
6
|
pluginName: wix-stores
|
|
7
7
|
packageName: "@jay-framework/wix-stores"
|
|
8
|
-
thumbnail: thumbnails/wix-stores/product-search.
|
|
8
|
+
thumbnail: thumbnails/wix-stores/product-search.svg
|
|
9
|
+
interaction:
|
|
10
|
+
mode: stage-place
|
|
11
|
+
stagePromptTemplate: |
|
|
12
|
+
Add a product search component at this marker location on the page.
|
|
9
13
|
prompt: |
|
|
10
14
|
Use headless component @jay-framework/wix-stores / contract product-search.
|
|
11
|
-
Read
|
|
15
|
+
Read node_modules/@jay-framework/wix-stores/dist/contracts/product-search.jay-contract.
|
|
12
16
|
Script key: search
|
|
13
17
|
Bind ViewState and refs per agent-kit/designer/INSTRUCTIONS.md.
|
|
14
18
|
|
|
@@ -18,26 +22,56 @@ items:
|
|
|
18
22
|
subCategory: Components
|
|
19
23
|
pluginName: wix-stores
|
|
20
24
|
packageName: "@jay-framework/wix-stores"
|
|
21
|
-
thumbnail: thumbnails/wix-stores/product-page.
|
|
25
|
+
thumbnail: thumbnails/wix-stores/product-page.svg
|
|
26
|
+
interaction:
|
|
27
|
+
mode: stage-place
|
|
28
|
+
stagePromptTemplate: |
|
|
29
|
+
Add a product page component at this marker location on the page.
|
|
22
30
|
prompt: |
|
|
23
31
|
Use headless component @jay-framework/wix-stores / contract product-page.
|
|
24
32
|
Read agent-kit/materialized-contracts/wix-stores/product-page.jay-contract.
|
|
25
33
|
Script key: p
|
|
26
34
|
Bind ViewState and refs per agent-kit/designer/INSTRUCTIONS.md.
|
|
27
35
|
|
|
36
|
+
- id: wix-stores:related-products
|
|
37
|
+
title: Related products
|
|
38
|
+
category: Store
|
|
39
|
+
subCategory: Components
|
|
40
|
+
pluginName: wix-stores
|
|
41
|
+
packageName: "@jay-framework/wix-stores"
|
|
42
|
+
thumbnail: thumbnails/wix-stores/related-products.svg
|
|
43
|
+
interaction:
|
|
44
|
+
mode: stage-place
|
|
45
|
+
stagePromptTemplate: |
|
|
46
|
+
Add a related products section at this marker location on the page.
|
|
47
|
+
prompt: |
|
|
48
|
+
"Related products" uses contract category-products (no separate related-products contract).
|
|
49
|
+
Read agent-kit/designer/related-products.md for the full recipe.
|
|
50
|
+
Read node_modules/@jay-framework/wix-stores/dist/contracts/category-products.jay-contract.
|
|
51
|
+
On a product page that already has product-page (key "p"):
|
|
52
|
+
1. Add headless import for category-products in <head> (no key attribute).
|
|
53
|
+
2. Place <jay:category-products productId="{p._id}" categorySlug="{p.categorySlug}" limit="4"> at the marker.
|
|
54
|
+
3. Inside the wrapper: forEach="products" with product-card fields; refs use products.* prefix.
|
|
55
|
+
Same-category siblings excluding the current product — not ML recommendations.
|
|
56
|
+
|
|
28
57
|
- id: wix-stores:category-products
|
|
29
58
|
title: Category products
|
|
30
59
|
category: Store
|
|
31
60
|
subCategory: Components
|
|
32
61
|
pluginName: wix-stores
|
|
33
62
|
packageName: "@jay-framework/wix-stores"
|
|
34
|
-
thumbnail: thumbnails/wix-stores/category-products.
|
|
63
|
+
thumbnail: thumbnails/wix-stores/category-products.svg
|
|
64
|
+
interaction:
|
|
65
|
+
mode: stage-place
|
|
66
|
+
stagePromptTemplate: |
|
|
67
|
+
Add a category products grid at this marker location on the page.
|
|
35
68
|
prompt: |
|
|
36
69
|
Use headless component @jay-framework/wix-stores / contract category-products.
|
|
37
|
-
Read
|
|
38
|
-
|
|
70
|
+
Read node_modules/@jay-framework/wix-stores/dist/contracts/category-products.jay-contract.
|
|
71
|
+
Instance pattern: declare import in <head> without key, then <jay:category-products categorySlug="...">.
|
|
72
|
+
Pass categorySlug to show products from a category. Pass productId to exclude a product.
|
|
73
|
+
On product pages for "related products", see agent-kit/designer/related-products.md instead.
|
|
39
74
|
Bind ViewState and refs per agent-kit/designer/INSTRUCTIONS.md.
|
|
40
|
-
Pass categorySlug to show products from a category. Pass productId to exclude a product (e.g. on a product page).
|
|
41
75
|
|
|
42
76
|
- id: wix-stores:product-spotlight
|
|
43
77
|
title: Product spotlight
|
|
@@ -46,12 +80,16 @@ items:
|
|
|
46
80
|
pluginName: wix-stores
|
|
47
81
|
packageName: "@jay-framework/wix-stores"
|
|
48
82
|
thumbnail: thumbnails/wix-stores/product-spotlight.png
|
|
83
|
+
interaction:
|
|
84
|
+
mode: stage-place
|
|
85
|
+
stagePromptTemplate: |
|
|
86
|
+
Add a product spotlight at this marker location on the page.
|
|
49
87
|
prompt: |
|
|
50
88
|
Use headless component @jay-framework/wix-stores / contract product-spotlight.
|
|
51
|
-
Read
|
|
52
|
-
|
|
53
|
-
Bind ViewState and refs per agent-kit/designer/INSTRUCTIONS.md.
|
|
89
|
+
Read node_modules/@jay-framework/wix-stores/dist/contracts/product-spotlight.jay-contract.
|
|
90
|
+
Instance pattern: declare import in <head> without key, then <jay:product-spotlight slug="...">.
|
|
54
91
|
Pass slug as a prop to specify which product to display.
|
|
92
|
+
Bind ViewState and refs per agent-kit/designer/INSTRUCTIONS.md.
|
|
55
93
|
|
|
56
94
|
- id: wix-stores:category-list
|
|
57
95
|
title: Category list
|
|
@@ -59,9 +97,13 @@ items:
|
|
|
59
97
|
subCategory: Components
|
|
60
98
|
pluginName: wix-stores
|
|
61
99
|
packageName: "@jay-framework/wix-stores"
|
|
62
|
-
thumbnail: thumbnails/wix-stores/category-list.
|
|
100
|
+
thumbnail: thumbnails/wix-stores/category-list.svg
|
|
101
|
+
interaction:
|
|
102
|
+
mode: stage-place
|
|
103
|
+
stagePromptTemplate: |
|
|
104
|
+
Add a category list at this marker location on the page.
|
|
63
105
|
prompt: |
|
|
64
106
|
Use headless component @jay-framework/wix-stores / contract category-list.
|
|
65
|
-
Read
|
|
107
|
+
Read node_modules/@jay-framework/wix-stores/dist/contracts/category-list.jay-contract.
|
|
66
108
|
Script key: categories
|
|
67
109
|
Bind ViewState and refs per agent-kit/designer/INSTRUCTIONS.md.
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240" fill="none">
|
|
2
|
+
<rect width="320" height="240" fill="#f8fafc"/>
|
|
3
|
+
<rect x="16" y="20" width="288" height="36" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
4
|
+
<rect x="28" y="32" width="120" height="12" rx="3" fill="#cbd5e1"/>
|
|
5
|
+
<rect x="16" y="72" width="136" height="14" rx="4" fill="#e2e8f0"/>
|
|
6
|
+
<rect x="16" y="98" width="288" height="1" fill="#e2e8f0"/>
|
|
7
|
+
<rect x="16" y="112" width="200" height="12" rx="3" fill="#cbd5e1"/>
|
|
8
|
+
<rect x="16" y="136" width="160" height="10" rx="3" fill="#e2e8f0"/>
|
|
9
|
+
<rect x="16" y="168" width="288" height="1" fill="#e2e8f0"/>
|
|
10
|
+
<rect x="16" y="182" width="184" height="12" rx="3" fill="#cbd5e1"/>
|
|
11
|
+
<rect x="16" y="206" width="128" height="10" rx="3" fill="#e2e8f0"/>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240" fill="none">
|
|
2
|
+
<rect width="320" height="240" fill="#f8fafc"/>
|
|
3
|
+
<rect x="16" y="24" width="120" height="12" rx="3" fill="#cbd5e1"/>
|
|
4
|
+
<rect x="16" y="56" width="72" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
5
|
+
<rect x="24" y="64" width="56" height="48" rx="4" fill="#dbeafe"/>
|
|
6
|
+
<rect x="24" y="120" width="48" height="8" rx="2" fill="#cbd5e1"/>
|
|
7
|
+
<rect x="96" y="56" width="72" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
8
|
+
<rect x="104" y="64" width="56" height="48" rx="4" fill="#fce7f3"/>
|
|
9
|
+
<rect x="104" y="120" width="48" height="8" rx="2" fill="#cbd5e1"/>
|
|
10
|
+
<rect x="176" y="56" width="72" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
11
|
+
<rect x="184" y="64" width="56" height="48" rx="4" fill="#dcfce7"/>
|
|
12
|
+
<rect x="184" y="120" width="48" height="8" rx="2" fill="#cbd5e1"/>
|
|
13
|
+
<rect x="248" y="56" width="56" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
14
|
+
<rect x="256" y="64" width="40" height="48" rx="4" fill="#fef3c7"/>
|
|
15
|
+
</svg>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240" fill="none">
|
|
2
|
+
<rect width="320" height="240" fill="#f4f7fb"/>
|
|
3
|
+
<rect x="16" y="16" width="288" height="28" rx="6" fill="#e2e8f0"/>
|
|
4
|
+
<rect x="16" y="56" width="120" height="12" rx="3" fill="#cbd5e1"/>
|
|
5
|
+
<rect x="16" y="76" width="88" height="10" rx="3" fill="#e2e8f0"/>
|
|
6
|
+
<rect x="16" y="104" width="136" height="120" rx="8" fill="#dbeafe" stroke="#93c5fd"/>
|
|
7
|
+
<rect x="168" y="104" width="136" height="16" rx="4" fill="#cbd5e1"/>
|
|
8
|
+
<rect x="168" y="128" width="96" height="10" rx="3" fill="#e2e8f0"/>
|
|
9
|
+
<rect x="168" y="148" width="72" height="10" rx="3" fill="#e2e8f0"/>
|
|
10
|
+
<rect x="168" y="180" width="88" height="28" rx="6" fill="#2563eb"/>
|
|
11
|
+
<text x="188" y="198" fill="#fff" font-family="system-ui,sans-serif" font-size="11">Add to cart</text>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240" fill="none">
|
|
2
|
+
<rect width="320" height="240" fill="#f8fafc"/>
|
|
3
|
+
<rect x="16" y="16" width="200" height="24" rx="6" fill="#fff" stroke="#cbd5e1"/>
|
|
4
|
+
<rect x="24" y="24" width="64" height="8" rx="2" fill="#e2e8f0"/>
|
|
5
|
+
<g>
|
|
6
|
+
<rect x="16" y="56" width="88" height="88" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
7
|
+
<rect x="24" y="64" width="72" height="48" rx="4" fill="#dbeafe"/>
|
|
8
|
+
<rect x="24" y="120" width="56" height="8" rx="2" fill="#cbd5e1"/>
|
|
9
|
+
<rect x="112" y="56" width="88" height="88" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
10
|
+
<rect x="120" y="64" width="72" height="48" rx="4" fill="#fce7f3"/>
|
|
11
|
+
<rect x="120" y="120" width="56" height="8" rx="2" fill="#cbd5e1"/>
|
|
12
|
+
<rect x="208" y="56" width="88" height="88" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
13
|
+
<rect x="216" y="64" width="72" height="48" rx="4" fill="#dcfce7"/>
|
|
14
|
+
<rect x="216" y="120" width="56" height="8" rx="2" fill="#cbd5e1"/>
|
|
15
|
+
</g>
|
|
16
|
+
<rect x="16" y="160" width="288" height="64" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
17
|
+
</svg>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240" fill="none">
|
|
2
|
+
<rect width="320" height="240" fill="#f8fafc"/>
|
|
3
|
+
<rect x="16" y="24" width="120" height="12" rx="3" fill="#cbd5e1"/>
|
|
4
|
+
<rect x="16" y="56" width="72" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
5
|
+
<rect x="24" y="64" width="56" height="48" rx="4" fill="#dbeafe"/>
|
|
6
|
+
<rect x="24" y="120" width="48" height="8" rx="2" fill="#cbd5e1"/>
|
|
7
|
+
<rect x="96" y="56" width="72" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
8
|
+
<rect x="104" y="64" width="56" height="48" rx="4" fill="#fce7f3"/>
|
|
9
|
+
<rect x="104" y="120" width="48" height="8" rx="2" fill="#cbd5e1"/>
|
|
10
|
+
<rect x="176" y="56" width="72" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
11
|
+
<rect x="184" y="64" width="56" height="48" rx="4" fill="#dcfce7"/>
|
|
12
|
+
<rect x="184" y="120" width="48" height="8" rx="2" fill="#cbd5e1"/>
|
|
13
|
+
<rect x="248" y="56" width="56" height="96" rx="8" fill="#fff" stroke="#e2e8f0"/>
|
|
14
|
+
<rect x="256" y="64" width="40" height="48" rx="4" fill="#fef3c7"/>
|
|
15
|
+
</svg>
|