@snowcone-app/canvas 0.40.0 → 0.40.2
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 +6 -6
- package/dist/api/embed.d.ts +3 -3
- package/dist/default-editor/SnowconeEditor.d.ts +1 -1
- package/dist/design/product-config.d.ts +1 -1
- package/dist/embed-BY6gMPTK.js.map +1 -1
- package/example/README.md +2 -2
- package/example/package.json +1 -1
- package/example/src/Widget.tsx +6 -6
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -59,12 +59,12 @@ const nameDrop = design({ name: 'Front', width: 1480, height: 2328 })
|
|
|
59
59
|
.text('YOUR NAME', { anchor: 'top', name: 'name' });
|
|
60
60
|
|
|
61
61
|
const product = {
|
|
62
|
-
productId: '
|
|
63
|
-
mockupIds: ['
|
|
62
|
+
productId: 'BC43BE',
|
|
63
|
+
mockupIds: ['947QAD'],
|
|
64
64
|
placements: ['Front'],
|
|
65
|
-
//
|
|
65
|
+
// The variant you render. A product with a COLOR axis REQUIRES variantId, or
|
|
66
66
|
// a live render times out. Read real ids from the catalog with getProduct().
|
|
67
|
-
variantId: '
|
|
67
|
+
variantId: 'e92f40',
|
|
68
68
|
};
|
|
69
69
|
|
|
70
70
|
export function PersonalizationWidget({
|
|
@@ -79,7 +79,7 @@ export function PersonalizationWidget({
|
|
|
79
79
|
return (
|
|
80
80
|
<Editor.Root shop={SHOP_KEY} product={product} design={nameDrop} grantUrl="/api/realtime/grant">
|
|
81
81
|
<div style={{ display: 'grid', gap: 12, maxWidth: 320 }}>
|
|
82
|
-
<Editor.Preview alt="Your personalized
|
|
82
|
+
<Editor.Preview alt="Your personalized case" fallback={<div aria-busy="true">Rendering…</div>} />
|
|
83
83
|
<Editor.TextField layer={nameDrop.layer('name')} placeholder="Your name" />
|
|
84
84
|
<Editor.Buy
|
|
85
85
|
onAddToCart={
|
|
@@ -91,7 +91,7 @@ export function PersonalizationWidget({
|
|
|
91
91
|
})
|
|
92
92
|
}
|
|
93
93
|
>
|
|
94
|
-
Add to cart · $
|
|
94
|
+
Add to cart · $37.72
|
|
95
95
|
</Editor.Buy>
|
|
96
96
|
</div>
|
|
97
97
|
</Editor.Root>
|
package/dist/api/embed.d.ts
CHANGED
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
* <RealtimeEmbed
|
|
18
18
|
* shop="YOUR_SHOP_ID"
|
|
19
19
|
* grantUrl="/api/realtime/grant"
|
|
20
|
-
* // variantId is REQUIRED when the product has a color/variant axis (
|
|
21
|
-
* //
|
|
22
|
-
* product={{ productId: '
|
|
20
|
+
* // variantId is REQUIRED when the product has a color/variant axis (a frame
|
|
21
|
+
* // or garment colour) — omit it and the render hangs. Read it + options from getProduct().
|
|
22
|
+
* product={{ productId: 'BC43BE', mockupIds: ['947QAD'], variantId: 'e92f40', placements: ['Front'] }}
|
|
23
23
|
* design={d}
|
|
24
24
|
* >
|
|
25
25
|
* <RealtimeCanvas />
|
|
@@ -24,7 +24,7 @@ export declare function formatBuyPrice(cents: number): string;
|
|
|
24
24
|
*
|
|
25
25
|
* <SnowconeEditor
|
|
26
26
|
* shop={SHOP_KEY}
|
|
27
|
-
* product={{ productId: '
|
|
27
|
+
* product={{ productId: 'BC43BE', mockupIds: ['947QAD'], variantId: 'e92f40', placements: ['Front'] }}
|
|
28
28
|
* design={design({ name: 'Front', width: 1480, height: 2328 }).text('hello', { name: 'headline' })}
|
|
29
29
|
* grantUrl="/api/realtime/grant"
|
|
30
30
|
* onAddToCart={(payload) => persist(payload.designState)}
|
|
@@ -44,7 +44,7 @@ export interface ProductRenderConfig {
|
|
|
44
44
|
* Derive the full embed wiring from one `getProduct()` payload.
|
|
45
45
|
*
|
|
46
46
|
* ```ts
|
|
47
|
-
* const config = productToRenderConfig(await getProduct('
|
|
47
|
+
* const config = productToRenderConfig(await getProduct('BC43BE'));
|
|
48
48
|
* const seed = design({ name: config.placement.label, ...config.placement })
|
|
49
49
|
* .text('hello', { anchor: 'center', name: 'headline' });
|
|
50
50
|
*
|