@souldi/try-on 0.1.90 → 0.1.92
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 +48 -4
- package/dist/widget.mjs +1 -1
- package/dist/widget.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -60,10 +60,18 @@ Returning users skip straight to step 4 — their session and photo are remember
|
|
|
60
60
|
The result surface is the widget's and only the widget's: an accessible
|
|
61
61
|
`<dialog>` inside an isolated Shadow DOM, appended to `<body>`. It reads none of
|
|
62
62
|
your CSS selectors and never touches your product images, so a theme change
|
|
63
|
-
cannot break it — and there is nothing to point it at.
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
cannot break it — and there is nothing to point it at. It is also where the
|
|
64
|
+
customer decides: beside the render they are told their size (when the garment
|
|
65
|
+
has a size chart), can add that size to your cart (when you supply
|
|
66
|
+
[`onAddToCart`](#onaddtocart)), can open **Body fit** to see how that size sits
|
|
67
|
+
on their body, can open their profile to retake their photo, edit their
|
|
68
|
+
measurements or sign out, can refine the result, and can switch to the
|
|
69
|
+
garment's back view when there is one. The dialog can be reopened after
|
|
70
|
+
closing; the try-on button becomes **View try-on** once a result exists.
|
|
71
|
+
|
|
72
|
+
Everything optional is simply absent when it does not apply — no size, no
|
|
73
|
+
cart button, no fit detail on a garment without a chart — and nothing is
|
|
74
|
+
said about it. A customer is never told "we can't size this product".
|
|
67
75
|
|
|
68
76
|
---
|
|
69
77
|
|
|
@@ -82,6 +90,7 @@ Call once per page load to configure the widget.
|
|
|
82
90
|
| `onError` | `function(message, info)` | No | Called when something goes wrong |
|
|
83
91
|
| `onLogout` | `function` | No | Called when the user's session ends — by logout, or by a token the backend no longer honours |
|
|
84
92
|
| `onAuthPrompt` | `function` | No | Called just before the widget takes the screen to ask the user to sign in |
|
|
93
|
+
| `onAddToCart` | `async function(intent)` | No | Called when the customer asks to add their recommended size to your cart. Absent, no cart control is drawn anywhere ([details](#onaddtocart)) |
|
|
85
94
|
|
|
86
95
|
#### The `info` argument
|
|
87
96
|
|
|
@@ -114,6 +123,41 @@ and must not outlive the session.
|
|
|
114
123
|
anything of yours that would cover it (a modal, a lightbox) out of the way. It
|
|
115
124
|
says nothing about whether the previous session ended — that is `onLogout`.
|
|
116
125
|
|
|
126
|
+
#### `onAddToCart`
|
|
127
|
+
|
|
128
|
+
The widget knows a customer's size; only you know your cart. Supply
|
|
129
|
+
`onAddToCart` and the result dialog (and the size guide) draw an **Add size X
|
|
130
|
+
to cart** button. Leave it out and there is no cart control at all.
|
|
131
|
+
|
|
132
|
+
It is called with one `intent` and must **resolve** (never reject) to an
|
|
133
|
+
outcome:
|
|
134
|
+
|
|
135
|
+
```js
|
|
136
|
+
onAddToCart: async ({ buttonId, size, sizeRun }) => {
|
|
137
|
+
// buttonId — the containerId of the button this is about
|
|
138
|
+
// size — the size the customer chose, e.g. "M"
|
|
139
|
+
// sizeRun — every size the garment's chart offers, e.g. ["S", "M", "L"]
|
|
140
|
+
const variant = resolveVariant(buttonId, size);
|
|
141
|
+
if (!variant) return { ok: false, message: 'That size is not available in this colour.' };
|
|
142
|
+
await addLineToCart(variant.id);
|
|
143
|
+
return { ok: true, cartUrl: '/cart' };
|
|
144
|
+
},
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
| Field | Present on | Description |
|
|
148
|
+
|-------|-----------|-------------|
|
|
149
|
+
| `ok` | both | Whether the line item is now in the cart |
|
|
150
|
+
| `message` | `ok: false` | What to tell the customer, in their words — out of stock, no such size, a refused add |
|
|
151
|
+
| `cartUrl` | `ok: true` | Optional. A link the confirmation offers so the customer can see the cart |
|
|
152
|
+
| `quantity` | `ok: true` | Optional. How many of this line the cart now holds, for a repeat add |
|
|
153
|
+
| `notice` | `ok: true` | Optional. A caveat when the add was adjusted on the way in (short stock, a cart limit) |
|
|
154
|
+
|
|
155
|
+
Two rules the widget keeps for you: nothing is stated in the past tense until
|
|
156
|
+
you have resolved `{ ok: true }`, and nothing reaches your handler without a
|
|
157
|
+
click on the button — opening the dialog, a new result landing, and changing
|
|
158
|
+
size are never consent. Resolve to `{ ok: false, message }` for every failure
|
|
159
|
+
you can name; a rejection is shown as a generic failure.
|
|
160
|
+
|
|
117
161
|
### `createButton(options)`
|
|
118
162
|
|
|
119
163
|
Add a try-on button for a specific garment. Call once per product on the page.
|