@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.
Files changed (18) hide show
  1. package/README.md +14 -12
  2. package/agent-kit/aiditor/add-menu.template.yaml +109 -0
  3. package/agent-kit/aiditor/thumbnails/wix-stores/category-list.svg +12 -0
  4. package/agent-kit/aiditor/thumbnails/wix-stores/category-products.svg +15 -0
  5. package/agent-kit/aiditor/thumbnails/wix-stores/product-page.svg +12 -0
  6. package/agent-kit/aiditor/thumbnails/wix-stores/product-search.svg +17 -0
  7. package/agent-kit/aiditor/thumbnails/wix-stores/related-products.svg +15 -0
  8. package/agent-kit/designer/related-products.md +123 -0
  9. package/dist/agent-kit/aiditor/add-menu.template.yaml +54 -12
  10. package/dist/agent-kit/aiditor/thumbnails/wix-stores/category-list.svg +12 -0
  11. package/dist/agent-kit/aiditor/thumbnails/wix-stores/category-products.svg +15 -0
  12. package/dist/agent-kit/aiditor/thumbnails/wix-stores/product-page.svg +12 -0
  13. package/dist/agent-kit/aiditor/thumbnails/wix-stores/product-search.svg +17 -0
  14. package/dist/agent-kit/aiditor/thumbnails/wix-stores/related-products.svg +15 -0
  15. package/dist/index.client.js +130 -14
  16. package/dist/index.d.ts +38 -10
  17. package/dist/index.js +433 -135
  18. 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 prefix they represent:
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
- prefix: polgat
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 using a fallback chain:
177
+ The category header is always loaded. The component resolves category metadata:
175
178
 
176
- 1. **`category` param** → load category
177
- 2. **`prefix` param** → load root category
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
 
package/agent-kit/aiditor/add-menu.template.yaml ADDED
@@ -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.
package/agent-kit/aiditor/thumbnails/wix-stores/category-list.svg ADDED
@@ -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>
package/agent-kit/aiditor/thumbnails/wix-stores/category-products.svg ADDED
@@ -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>
package/agent-kit/aiditor/thumbnails/wix-stores/product-page.svg ADDED
@@ -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>
package/agent-kit/aiditor/thumbnails/wix-stores/product-search.svg ADDED
@@ -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>
package/agent-kit/aiditor/thumbnails/wix-stores/related-products.svg ADDED
@@ -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>
package/agent-kit/designer/related-products.md ADDED
@@ -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`.
package/dist/agent-kit/aiditor/add-menu.template.yaml CHANGED
@@ -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.png
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 agent-kit/materialized-contracts/wix-stores/product-search.jay-contract.
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.png
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.png
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 agent-kit/materialized-contracts/wix-stores/category-products.jay-contract.
38
- Script key: r
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 agent-kit/materialized-contracts/wix-stores/product-spotlight.jay-contract.
52
- Script key: spotlight
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.png
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 agent-kit/materialized-contracts/wix-stores/category-list.jay-contract.
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.
package/dist/agent-kit/aiditor/thumbnails/wix-stores/category-list.svg ADDED
@@ -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>
package/dist/agent-kit/aiditor/thumbnails/wix-stores/category-products.svg ADDED
@@ -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>
package/dist/agent-kit/aiditor/thumbnails/wix-stores/product-page.svg ADDED
@@ -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>
package/dist/agent-kit/aiditor/thumbnails/wix-stores/product-search.svg ADDED
@@ -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>
package/dist/agent-kit/aiditor/thumbnails/wix-stores/related-products.svg ADDED
@@ -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>