@magicx-eng/ai-autocomplete-vanilla 0.53.0 → 0.54.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 +34 -0
- package/dist/index.d.mts +49 -2
- package/dist/index.d.ts +49 -2
- package/dist/index.js +114 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +114 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -140,6 +140,7 @@ const ac = new AIAutocomplete(container, {
|
|
|
140
140
|
onFocus: () => { ... },
|
|
141
141
|
onBlur: () => { ... },
|
|
142
142
|
onProductSelect: (product) => { ... }, // see "Product strip"
|
|
143
|
+
onProductAddToCart: (product) => { ... }, // see "Add to cart"
|
|
143
144
|
|
|
144
145
|
// Controlled mode
|
|
145
146
|
value: "initial text",
|
|
@@ -166,6 +167,8 @@ ac.destroy(); // Remove DOM, listeners, timers
|
|
|
166
167
|
ac.setMode("dark"); // Switch color mode
|
|
167
168
|
ac.update({ animations: false, optionsPosition: "above" });
|
|
168
169
|
ac.selectProduct(product); // Emit onProductSelect (Tier 3 / custom strips)
|
|
170
|
+
ac.addProductToCart(product); // Call onProductAddToCart (Tier 3 / custom strips)
|
|
171
|
+
ac.prepareSubmit(); // Prepare the typed word before your own button builds a result
|
|
169
172
|
ac.getResult(); // The AutocompleteResult as it stands right now
|
|
170
173
|
ac.getRequestId(); // The latest applied /suggest request ID, or null
|
|
171
174
|
```
|
|
@@ -277,6 +280,34 @@ without additional SDK options.
|
|
|
277
280
|
}
|
|
278
281
|
```
|
|
279
282
|
|
|
283
|
+
#### Add to cart
|
|
284
|
+
|
|
285
|
+
Pass `onProductAddToCart` and every card that isn't sold out gets a round
|
|
286
|
+
add-to-cart button in the bottom right corner of its image. Sold-out cards
|
|
287
|
+
(`available: false`) get none. Pressing it calls your handler, not
|
|
288
|
+
`onProductSelect`. The card doesn't open, and the panel stays open. The SDK
|
|
289
|
+
never touches a cart; your handler does the adding:
|
|
290
|
+
|
|
291
|
+
```ts
|
|
292
|
+
new AIAutocomplete(container, {
|
|
293
|
+
apiConfig: { apiKey: "..." },
|
|
294
|
+
onProductAddToCart: async (product) => {
|
|
295
|
+
const res = await fetch("/cart/add", { method: "POST", body: JSON.stringify({ id: product.id }) });
|
|
296
|
+
if (!res.ok) throw new Error(`cart ${res.status}`);
|
|
297
|
+
},
|
|
298
|
+
});
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
Return a promise to have the button show progress. It carries
|
|
302
|
+
`data-aia-cart-state="adding"` while the promise is pending, then `"added"`
|
|
303
|
+
(the cart glyph turns into a check) for a moment once it resolves. A rejection
|
|
304
|
+
returns it to rest. Style it with
|
|
305
|
+
`--aia-product-cart-size` (28px), `--aia-product-cart-bg` and
|
|
306
|
+
`--aia-product-cart-color`, or `[data-aia-product-cart]`. In the list layout
|
|
307
|
+
the button sits at the row's right end. Headless consumers rendering
|
|
308
|
+
their own cards call `addProductToCart(product)`, which resolves or rejects
|
|
309
|
+
with the handler.
|
|
310
|
+
|
|
280
311
|
#### The catalog report (`customFields`)
|
|
281
312
|
|
|
282
313
|
Every response that read the catalog also says what it did with the query, and
|
|
@@ -689,6 +720,7 @@ unsub();
|
|
|
689
720
|
| `removeLastParam()` | Remove the last completed param from state. The text stays in the input as plain text. |
|
|
690
721
|
| `clearNewParamId()` | Clear shimmer animation state. |
|
|
691
722
|
| `reset()` | Clear all state, re-fetch initial suggestions, and start a new session (rotates `session_id`). Call this after handling submit. |
|
|
723
|
+
| `prepareSubmit()` | Call before building a submit result from your own button. A typed word that equals exactly one completion candidate becomes a completed param, the same as Enter. Read the updated state with `getState()` to build the result. |
|
|
692
724
|
| `recordSubmit(result)` | Record a submit from a button you render. Enter and the built-in button are recorded for you; call this once per submit from your own button. |
|
|
693
725
|
| `setValue(text)` | Set text (controlled mode). Text set this way is not reported as the user starting a search. |
|
|
694
726
|
| `prefillText(text)` | Fill the field with text the user did not type — e.g. a query carried over from the previous page — and handle it like typing: suggestions are fetched and the text is recognized. Not reported as the user starting a search. |
|
|
@@ -1057,6 +1089,8 @@ Submits from Enter and from the built-in submit button are recorded for you. If
|
|
|
1057
1089
|
|
|
1058
1090
|
## Option Overrides
|
|
1059
1091
|
|
|
1092
|
+
Each suggestion request sends the current `optionOverrides` keys in `data.client_option_parameters` (or `[]` when absent), so the server skips client-supplied parameters that are not listed.
|
|
1093
|
+
|
|
1060
1094
|
Supply the options for a parameter yourself instead of taking the server's. Each entry is keyed by the suggestion `parameter` and is a function of the phrase the user has typed for that parameter:
|
|
1061
1095
|
|
|
1062
1096
|
```ts
|
package/dist/index.d.mts
CHANGED
|
@@ -88,6 +88,8 @@ interface Suggestion {
|
|
|
88
88
|
required: boolean;
|
|
89
89
|
options?: SuggestionOption[];
|
|
90
90
|
type?: SuggestionType;
|
|
91
|
+
/** The server sets this on LLM-written suggestions: true when options complete the typed word, false when they follow the typed text. */
|
|
92
|
+
completes_word?: boolean;
|
|
91
93
|
/**
|
|
92
94
|
* Asks for the Smart Suggestion look (sparkle and shimmer) on an ordinary
|
|
93
95
|
* question, such as one the server curated for a question query. It changes
|
|
@@ -145,6 +147,11 @@ interface AutocompleteRequest {
|
|
|
145
147
|
recently_suggested?: RecentlySuggested[];
|
|
146
148
|
contact_account_count?: number;
|
|
147
149
|
additional_context?: Record<string, unknown>;
|
|
150
|
+
/**
|
|
151
|
+
* Parameters whose options the consumer supplies through `optionOverrides`.
|
|
152
|
+
* The server skips a client-supplied parameter that is not listed.
|
|
153
|
+
*/
|
|
154
|
+
client_option_parameters: string[];
|
|
148
155
|
/** Tells the server this client can show option-value completions of the word being typed. */
|
|
149
156
|
accepts_traditional_autocomplete?: boolean;
|
|
150
157
|
};
|
|
@@ -1181,6 +1188,18 @@ interface CoreOptions {
|
|
|
1181
1188
|
* cmd-click and "copy link address" keep working, and don't fire this.
|
|
1182
1189
|
*/
|
|
1183
1190
|
onProductSelect?: (product: Product) => void;
|
|
1191
|
+
/**
|
|
1192
|
+
* Adds a product to the cart from its card. When set, every card that isn't
|
|
1193
|
+
* sold out (`available: false`) shows an add-to-cart button in the bottom
|
|
1194
|
+
* right corner of its image. When unset, no card has one. Pressing the button
|
|
1195
|
+
* calls this, not `onProductSelect`, and the panel stays open. The SDK never
|
|
1196
|
+
* touches a cart itself; the integration does the adding.
|
|
1197
|
+
*
|
|
1198
|
+
* Return a promise to have the button show progress. It carries
|
|
1199
|
+
* `data-aia-cart-state="adding"` until the promise settles, then `"added"` for
|
|
1200
|
+
* a moment if it resolved. A rejection puts the button back at rest.
|
|
1201
|
+
*/
|
|
1202
|
+
onProductAddToCart?: (product: Product) => void | PromiseLike<unknown>;
|
|
1184
1203
|
value?: string;
|
|
1185
1204
|
completedParams?: CompletedParamState[];
|
|
1186
1205
|
/**
|
|
@@ -1204,7 +1223,7 @@ type AIAutocompleteEvents = {
|
|
|
1204
1223
|
blur: [];
|
|
1205
1224
|
productSelect: [product: Product];
|
|
1206
1225
|
};
|
|
1207
|
-
type CoreUpdateOptions = Partial<Omit<CoreOptions, "onSubmit" | "onResult" | "onError" | "onChange" | "onParamsChange" | "onStateChange" | "onFocus" | "onBlur" | "onProductSelect" | "styleRoot">>;
|
|
1226
|
+
type CoreUpdateOptions = Partial<Omit<CoreOptions, "onSubmit" | "onResult" | "onError" | "onChange" | "onParamsChange" | "onStateChange" | "onFocus" | "onBlur" | "onProductSelect" | "onProductAddToCart" | "styleRoot">>;
|
|
1208
1227
|
declare class AIAutocomplete {
|
|
1209
1228
|
private inputStore;
|
|
1210
1229
|
private store;
|
|
@@ -1375,6 +1394,12 @@ declare class AIAutocomplete {
|
|
|
1375
1394
|
* highlight the keyboard has since moved elsewhere is left alone.
|
|
1376
1395
|
*/
|
|
1377
1396
|
clearHighlight(index: number): void;
|
|
1397
|
+
/**
|
|
1398
|
+
* Call before you build a submit result from your own button.
|
|
1399
|
+
* A typed word that equals exactly one completion candidate becomes a completed param, the same as Enter.
|
|
1400
|
+
* Read the updated state with `getState()` to build the result.
|
|
1401
|
+
*/
|
|
1402
|
+
prepareSubmit(): void;
|
|
1378
1403
|
/**
|
|
1379
1404
|
* Records a submit in telemetry. The SDK does this itself when it runs the
|
|
1380
1405
|
* submit (Enter, or Tier 1's button); call it only from a submit path you
|
|
@@ -1390,6 +1415,15 @@ declare class AIAutocomplete {
|
|
|
1390
1415
|
* means "open the PDP", "add to cart" or "drop the title into the input".
|
|
1391
1416
|
*/
|
|
1392
1417
|
selectProduct(product: Product): void;
|
|
1418
|
+
/**
|
|
1419
|
+
* Add a product to the cart through `onProductAddToCart`. The rendered
|
|
1420
|
+
* cards' cart buttons call this; headless consumers rendering their own
|
|
1421
|
+
* strip call it themselves. Resolves once the handler's promise settles, and
|
|
1422
|
+
* rejects with its error. Without a handler it does nothing.
|
|
1423
|
+
*/
|
|
1424
|
+
addProductToCart(product: Product): Promise<void>;
|
|
1425
|
+
/** Whether cards draw a cart button: an `onProductAddToCart` handler is set. */
|
|
1426
|
+
hasProductAddToCart(): boolean;
|
|
1393
1427
|
handleTextChange(value: string): void;
|
|
1394
1428
|
private applyTextChange;
|
|
1395
1429
|
/** Page the datepicker back one month. No-op unless a date pill is active. */
|
|
@@ -2234,6 +2268,7 @@ declare const en: {
|
|
|
2234
2268
|
skipLabel: string;
|
|
2235
2269
|
products: string;
|
|
2236
2270
|
soldOut: string;
|
|
2271
|
+
addToCart: string;
|
|
2237
2272
|
submit: string;
|
|
2238
2273
|
scrollArrow: string;
|
|
2239
2274
|
keepTyping: string;
|
|
@@ -2362,6 +2397,18 @@ declare const PRODUCT_IMAGE_WIDTH = 360;
|
|
|
2362
2397
|
* stays relative.
|
|
2363
2398
|
*/
|
|
2364
2399
|
declare function shopifyImageSrc(url: string, width: number): string;
|
|
2400
|
+
/**
|
|
2401
|
+
* How much of a product card's square tile a photo fills, across and down:
|
|
2402
|
+
* the tile shows it whole (`object-fit: contain`), so a tall photo leaves a
|
|
2403
|
+
* margin either side and a wide one a margin above and below. The add-to-cart
|
|
2404
|
+
* button reads these (as `--aia-product-photo-fill-x` / `-y` on the card) to
|
|
2405
|
+
* sit inside the photo's own corner rather than the tile's. Null for a size
|
|
2406
|
+
* that isn't known yet.
|
|
2407
|
+
*/
|
|
2408
|
+
declare function productPhotoFill(naturalWidth: number, naturalHeight: number): {
|
|
2409
|
+
x: number;
|
|
2410
|
+
y: number;
|
|
2411
|
+
} | null;
|
|
2365
2412
|
/**
|
|
2366
2413
|
* The URLs a product card tries for `imageUrl`, in order (`imageSources` at
|
|
2367
2414
|
* the card width): trimmed, sized down when it is a Shopify-hosted PNG or WebP, with
|
|
@@ -2687,4 +2734,4 @@ declare const SMART_SUGGESTION_SPARKLE_SVG: string;
|
|
|
2687
2734
|
/** True when some pill is a question the shopper can decline. */
|
|
2688
2735
|
declare function hasSkippablePill(suggestions: Suggestion[]): boolean;
|
|
2689
2736
|
|
|
2690
|
-
export { AIAutocomplete, type APIConfig, type APIKeyConfig, ATTRIBUTION_URL, type AccessTokenConfig, type AccessTokenResult, type AppearanceMode, type AutocompleteRequest, type AutocompleteResponse, type AutocompleteResult, type CompletedParam, type CompletedParamState, type CoreOptions, type CoreState, type CurrencyOptions, type CustomFieldsReport, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, type DateMonthView, type DateRange, type DateSelection, type ExpressedFilter, type FilterOp, type FormatType, type IdentifiedParam, type IdentifiedParamState, type InputItem, type LooseDateOptions, type MatchedItem, type MatchedItems, ModeController, OPTIONS_GRID_MOBILE_QUERY, OPTION_ENTER_DELAY_VAR, OPTION_ENTER_FADE_MS, OPTION_ENTER_RISE_MS, OPTION_ENTER_RISE_PX, OPTION_ENTER_STAGGER_MS, OPTION_IMAGE_WIDTH, type OptionOverride, type OptionOverrides, type OptionsGridLayout, type OptionsGridPlan, PLACEHOLDER_FADE_OUT_MS, PLACEHOLDER_LEAVING_ATTR, PLACEHOLDER_SWAP_GAP_MS, PLACEHOLDER_TYPE_MS, PLACEHOLDER_WORD_PAUSE_MS, PRODUCT_IMAGE_WIDTH, PRODUCT_PATH_PREFIX, PRODUCT_ROW_PX_PER_LINE, type PhraseMatch, type Product, type ProductImageFallback, type ProductRowMetrics, type ProductRowWheel, type ProductsConfig, type ProductsLayout, RANGE_SEPARATOR, type RecentlySuggested, type RenderMode, SCHEMA_VERSION, SCROLL_ARROW_ATTR, SCROLL_ARROW_BOTTOM_VAR, SCROLL_ARROW_CLASS, SCROLL_ARROW_FADE_MS, SCROLL_ARROW_LABEL, SCROLL_ARROW_SCROLL_IDLE_MS, SCROLL_ARROW_VISIBLE_ATTR, SKIPPED_PARAM_TEXT, SMART_SUGGESTION_SPARKLE_SVG, type ScrollArrowArgs, type ScrollArrowController, type Segment, type SkippedParamState, type Store, type SubmitResultExtras, type Suggestion, type SuggestionOption, type SuggestionType, type TaskKind, type TextPart, type UIStrings, VIEWPORT_FIT_ATTR, VIEWPORT_FIT_HEIGHT_VAR, type ViewportFitArgs, type ViewportFitController, WEEKDAY_LABELS, addMonths, attachProductRowWheel, attachScrollArrow, attachViewportFit, buildAttributionUrl, buildDateOptions, buildQuery, buildSubmitResult, cellDay, cellIso, chipIdFromTap, computeOptionsGridLayout, containScroll, createStore, cursorIsAtEnd, dateCellMarks, dateSelectionFor, extractPlainText, formatAbsoluteDate, formatDate, formatDateRange, formatOptionCount, getCursorOffset, getFooterHint, hasSkippablePill, highlightParts, identifiedParamLabel, isCalendarFormat, isOptionsGridMobileViewport, isSmartSuggestion, isTraditionalAutocompleteSuggestion, isoDate, keepCaretOnChip, labelTraditionalAutocomplete, matchTypedPhrase, measureOptionsGrid, monthLabel, needsOptionsGridMeasurement, optionCountLabel, optionEnterDelayMs, optionHasImage, optionImageSources, optionImageSrc, optionLabel, optionsEntranceDurationMs, optionsGridTemplateColumns, optionsShowLeadingVisuals, parseDate, parseLooseDate, parseLooseDateRange, plainTextLength, planOptionsGrid, previousGraphemeBoundary, productFromMatchedItem, productImageSources, productImageSrc, productInitial, productRowWheelTarget, productsFromCustomFields, renderEditableContent, resolveFormatType, resolveIdentifiedDate, sameOptionRows, sanitizeOptionIconSvg, scrollCaretIntoView, selectedIsoFromText, selectedRangeFor, setCursorOffset, shopifyImageSrc, toWireIdentifiedParams, typedFragment, uiStringsFor, visibleDateRange, withSkippedParams, withoutTraditionalAutocomplete };
|
|
2737
|
+
export { AIAutocomplete, type APIConfig, type APIKeyConfig, ATTRIBUTION_URL, type AccessTokenConfig, type AccessTokenResult, type AppearanceMode, type AutocompleteRequest, type AutocompleteResponse, type AutocompleteResult, type CompletedParam, type CompletedParamState, type CoreOptions, type CoreState, type CurrencyOptions, type CustomFieldsReport, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, type DateMonthView, type DateRange, type DateSelection, type ExpressedFilter, type FilterOp, type FormatType, type IdentifiedParam, type IdentifiedParamState, type InputItem, type LooseDateOptions, type MatchedItem, type MatchedItems, ModeController, OPTIONS_GRID_MOBILE_QUERY, OPTION_ENTER_DELAY_VAR, OPTION_ENTER_FADE_MS, OPTION_ENTER_RISE_MS, OPTION_ENTER_RISE_PX, OPTION_ENTER_STAGGER_MS, OPTION_IMAGE_WIDTH, type OptionOverride, type OptionOverrides, type OptionsGridLayout, type OptionsGridPlan, PLACEHOLDER_FADE_OUT_MS, PLACEHOLDER_LEAVING_ATTR, PLACEHOLDER_SWAP_GAP_MS, PLACEHOLDER_TYPE_MS, PLACEHOLDER_WORD_PAUSE_MS, PRODUCT_IMAGE_WIDTH, PRODUCT_PATH_PREFIX, PRODUCT_ROW_PX_PER_LINE, type PhraseMatch, type Product, type ProductImageFallback, type ProductRowMetrics, type ProductRowWheel, type ProductsConfig, type ProductsLayout, RANGE_SEPARATOR, type RecentlySuggested, type RenderMode, SCHEMA_VERSION, SCROLL_ARROW_ATTR, SCROLL_ARROW_BOTTOM_VAR, SCROLL_ARROW_CLASS, SCROLL_ARROW_FADE_MS, SCROLL_ARROW_LABEL, SCROLL_ARROW_SCROLL_IDLE_MS, SCROLL_ARROW_VISIBLE_ATTR, SKIPPED_PARAM_TEXT, SMART_SUGGESTION_SPARKLE_SVG, type ScrollArrowArgs, type ScrollArrowController, type Segment, type SkippedParamState, type Store, type SubmitResultExtras, type Suggestion, type SuggestionOption, type SuggestionType, type TaskKind, type TextPart, type UIStrings, VIEWPORT_FIT_ATTR, VIEWPORT_FIT_HEIGHT_VAR, type ViewportFitArgs, type ViewportFitController, WEEKDAY_LABELS, addMonths, attachProductRowWheel, attachScrollArrow, attachViewportFit, buildAttributionUrl, buildDateOptions, buildQuery, buildSubmitResult, cellDay, cellIso, chipIdFromTap, computeOptionsGridLayout, containScroll, createStore, cursorIsAtEnd, dateCellMarks, dateSelectionFor, extractPlainText, formatAbsoluteDate, formatDate, formatDateRange, formatOptionCount, getCursorOffset, getFooterHint, hasSkippablePill, highlightParts, identifiedParamLabel, isCalendarFormat, isOptionsGridMobileViewport, isSmartSuggestion, isTraditionalAutocompleteSuggestion, isoDate, keepCaretOnChip, labelTraditionalAutocomplete, matchTypedPhrase, measureOptionsGrid, monthLabel, needsOptionsGridMeasurement, optionCountLabel, optionEnterDelayMs, optionHasImage, optionImageSources, optionImageSrc, optionLabel, optionsEntranceDurationMs, optionsGridTemplateColumns, optionsShowLeadingVisuals, parseDate, parseLooseDate, parseLooseDateRange, plainTextLength, planOptionsGrid, previousGraphemeBoundary, productFromMatchedItem, productImageSources, productImageSrc, productInitial, productPhotoFill, productRowWheelTarget, productsFromCustomFields, renderEditableContent, resolveFormatType, resolveIdentifiedDate, sameOptionRows, sanitizeOptionIconSvg, scrollCaretIntoView, selectedIsoFromText, selectedRangeFor, setCursorOffset, shopifyImageSrc, toWireIdentifiedParams, typedFragment, uiStringsFor, visibleDateRange, withSkippedParams, withoutTraditionalAutocomplete };
|
package/dist/index.d.ts
CHANGED
|
@@ -88,6 +88,8 @@ interface Suggestion {
|
|
|
88
88
|
required: boolean;
|
|
89
89
|
options?: SuggestionOption[];
|
|
90
90
|
type?: SuggestionType;
|
|
91
|
+
/** The server sets this on LLM-written suggestions: true when options complete the typed word, false when they follow the typed text. */
|
|
92
|
+
completes_word?: boolean;
|
|
91
93
|
/**
|
|
92
94
|
* Asks for the Smart Suggestion look (sparkle and shimmer) on an ordinary
|
|
93
95
|
* question, such as one the server curated for a question query. It changes
|
|
@@ -145,6 +147,11 @@ interface AutocompleteRequest {
|
|
|
145
147
|
recently_suggested?: RecentlySuggested[];
|
|
146
148
|
contact_account_count?: number;
|
|
147
149
|
additional_context?: Record<string, unknown>;
|
|
150
|
+
/**
|
|
151
|
+
* Parameters whose options the consumer supplies through `optionOverrides`.
|
|
152
|
+
* The server skips a client-supplied parameter that is not listed.
|
|
153
|
+
*/
|
|
154
|
+
client_option_parameters: string[];
|
|
148
155
|
/** Tells the server this client can show option-value completions of the word being typed. */
|
|
149
156
|
accepts_traditional_autocomplete?: boolean;
|
|
150
157
|
};
|
|
@@ -1181,6 +1188,18 @@ interface CoreOptions {
|
|
|
1181
1188
|
* cmd-click and "copy link address" keep working, and don't fire this.
|
|
1182
1189
|
*/
|
|
1183
1190
|
onProductSelect?: (product: Product) => void;
|
|
1191
|
+
/**
|
|
1192
|
+
* Adds a product to the cart from its card. When set, every card that isn't
|
|
1193
|
+
* sold out (`available: false`) shows an add-to-cart button in the bottom
|
|
1194
|
+
* right corner of its image. When unset, no card has one. Pressing the button
|
|
1195
|
+
* calls this, not `onProductSelect`, and the panel stays open. The SDK never
|
|
1196
|
+
* touches a cart itself; the integration does the adding.
|
|
1197
|
+
*
|
|
1198
|
+
* Return a promise to have the button show progress. It carries
|
|
1199
|
+
* `data-aia-cart-state="adding"` until the promise settles, then `"added"` for
|
|
1200
|
+
* a moment if it resolved. A rejection puts the button back at rest.
|
|
1201
|
+
*/
|
|
1202
|
+
onProductAddToCart?: (product: Product) => void | PromiseLike<unknown>;
|
|
1184
1203
|
value?: string;
|
|
1185
1204
|
completedParams?: CompletedParamState[];
|
|
1186
1205
|
/**
|
|
@@ -1204,7 +1223,7 @@ type AIAutocompleteEvents = {
|
|
|
1204
1223
|
blur: [];
|
|
1205
1224
|
productSelect: [product: Product];
|
|
1206
1225
|
};
|
|
1207
|
-
type CoreUpdateOptions = Partial<Omit<CoreOptions, "onSubmit" | "onResult" | "onError" | "onChange" | "onParamsChange" | "onStateChange" | "onFocus" | "onBlur" | "onProductSelect" | "styleRoot">>;
|
|
1226
|
+
type CoreUpdateOptions = Partial<Omit<CoreOptions, "onSubmit" | "onResult" | "onError" | "onChange" | "onParamsChange" | "onStateChange" | "onFocus" | "onBlur" | "onProductSelect" | "onProductAddToCart" | "styleRoot">>;
|
|
1208
1227
|
declare class AIAutocomplete {
|
|
1209
1228
|
private inputStore;
|
|
1210
1229
|
private store;
|
|
@@ -1375,6 +1394,12 @@ declare class AIAutocomplete {
|
|
|
1375
1394
|
* highlight the keyboard has since moved elsewhere is left alone.
|
|
1376
1395
|
*/
|
|
1377
1396
|
clearHighlight(index: number): void;
|
|
1397
|
+
/**
|
|
1398
|
+
* Call before you build a submit result from your own button.
|
|
1399
|
+
* A typed word that equals exactly one completion candidate becomes a completed param, the same as Enter.
|
|
1400
|
+
* Read the updated state with `getState()` to build the result.
|
|
1401
|
+
*/
|
|
1402
|
+
prepareSubmit(): void;
|
|
1378
1403
|
/**
|
|
1379
1404
|
* Records a submit in telemetry. The SDK does this itself when it runs the
|
|
1380
1405
|
* submit (Enter, or Tier 1's button); call it only from a submit path you
|
|
@@ -1390,6 +1415,15 @@ declare class AIAutocomplete {
|
|
|
1390
1415
|
* means "open the PDP", "add to cart" or "drop the title into the input".
|
|
1391
1416
|
*/
|
|
1392
1417
|
selectProduct(product: Product): void;
|
|
1418
|
+
/**
|
|
1419
|
+
* Add a product to the cart through `onProductAddToCart`. The rendered
|
|
1420
|
+
* cards' cart buttons call this; headless consumers rendering their own
|
|
1421
|
+
* strip call it themselves. Resolves once the handler's promise settles, and
|
|
1422
|
+
* rejects with its error. Without a handler it does nothing.
|
|
1423
|
+
*/
|
|
1424
|
+
addProductToCart(product: Product): Promise<void>;
|
|
1425
|
+
/** Whether cards draw a cart button: an `onProductAddToCart` handler is set. */
|
|
1426
|
+
hasProductAddToCart(): boolean;
|
|
1393
1427
|
handleTextChange(value: string): void;
|
|
1394
1428
|
private applyTextChange;
|
|
1395
1429
|
/** Page the datepicker back one month. No-op unless a date pill is active. */
|
|
@@ -2234,6 +2268,7 @@ declare const en: {
|
|
|
2234
2268
|
skipLabel: string;
|
|
2235
2269
|
products: string;
|
|
2236
2270
|
soldOut: string;
|
|
2271
|
+
addToCart: string;
|
|
2237
2272
|
submit: string;
|
|
2238
2273
|
scrollArrow: string;
|
|
2239
2274
|
keepTyping: string;
|
|
@@ -2362,6 +2397,18 @@ declare const PRODUCT_IMAGE_WIDTH = 360;
|
|
|
2362
2397
|
* stays relative.
|
|
2363
2398
|
*/
|
|
2364
2399
|
declare function shopifyImageSrc(url: string, width: number): string;
|
|
2400
|
+
/**
|
|
2401
|
+
* How much of a product card's square tile a photo fills, across and down:
|
|
2402
|
+
* the tile shows it whole (`object-fit: contain`), so a tall photo leaves a
|
|
2403
|
+
* margin either side and a wide one a margin above and below. The add-to-cart
|
|
2404
|
+
* button reads these (as `--aia-product-photo-fill-x` / `-y` on the card) to
|
|
2405
|
+
* sit inside the photo's own corner rather than the tile's. Null for a size
|
|
2406
|
+
* that isn't known yet.
|
|
2407
|
+
*/
|
|
2408
|
+
declare function productPhotoFill(naturalWidth: number, naturalHeight: number): {
|
|
2409
|
+
x: number;
|
|
2410
|
+
y: number;
|
|
2411
|
+
} | null;
|
|
2365
2412
|
/**
|
|
2366
2413
|
* The URLs a product card tries for `imageUrl`, in order (`imageSources` at
|
|
2367
2414
|
* the card width): trimmed, sized down when it is a Shopify-hosted PNG or WebP, with
|
|
@@ -2687,4 +2734,4 @@ declare const SMART_SUGGESTION_SPARKLE_SVG: string;
|
|
|
2687
2734
|
/** True when some pill is a question the shopper can decline. */
|
|
2688
2735
|
declare function hasSkippablePill(suggestions: Suggestion[]): boolean;
|
|
2689
2736
|
|
|
2690
|
-
export { AIAutocomplete, type APIConfig, type APIKeyConfig, ATTRIBUTION_URL, type AccessTokenConfig, type AccessTokenResult, type AppearanceMode, type AutocompleteRequest, type AutocompleteResponse, type AutocompleteResult, type CompletedParam, type CompletedParamState, type CoreOptions, type CoreState, type CurrencyOptions, type CustomFieldsReport, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, type DateMonthView, type DateRange, type DateSelection, type ExpressedFilter, type FilterOp, type FormatType, type IdentifiedParam, type IdentifiedParamState, type InputItem, type LooseDateOptions, type MatchedItem, type MatchedItems, ModeController, OPTIONS_GRID_MOBILE_QUERY, OPTION_ENTER_DELAY_VAR, OPTION_ENTER_FADE_MS, OPTION_ENTER_RISE_MS, OPTION_ENTER_RISE_PX, OPTION_ENTER_STAGGER_MS, OPTION_IMAGE_WIDTH, type OptionOverride, type OptionOverrides, type OptionsGridLayout, type OptionsGridPlan, PLACEHOLDER_FADE_OUT_MS, PLACEHOLDER_LEAVING_ATTR, PLACEHOLDER_SWAP_GAP_MS, PLACEHOLDER_TYPE_MS, PLACEHOLDER_WORD_PAUSE_MS, PRODUCT_IMAGE_WIDTH, PRODUCT_PATH_PREFIX, PRODUCT_ROW_PX_PER_LINE, type PhraseMatch, type Product, type ProductImageFallback, type ProductRowMetrics, type ProductRowWheel, type ProductsConfig, type ProductsLayout, RANGE_SEPARATOR, type RecentlySuggested, type RenderMode, SCHEMA_VERSION, SCROLL_ARROW_ATTR, SCROLL_ARROW_BOTTOM_VAR, SCROLL_ARROW_CLASS, SCROLL_ARROW_FADE_MS, SCROLL_ARROW_LABEL, SCROLL_ARROW_SCROLL_IDLE_MS, SCROLL_ARROW_VISIBLE_ATTR, SKIPPED_PARAM_TEXT, SMART_SUGGESTION_SPARKLE_SVG, type ScrollArrowArgs, type ScrollArrowController, type Segment, type SkippedParamState, type Store, type SubmitResultExtras, type Suggestion, type SuggestionOption, type SuggestionType, type TaskKind, type TextPart, type UIStrings, VIEWPORT_FIT_ATTR, VIEWPORT_FIT_HEIGHT_VAR, type ViewportFitArgs, type ViewportFitController, WEEKDAY_LABELS, addMonths, attachProductRowWheel, attachScrollArrow, attachViewportFit, buildAttributionUrl, buildDateOptions, buildQuery, buildSubmitResult, cellDay, cellIso, chipIdFromTap, computeOptionsGridLayout, containScroll, createStore, cursorIsAtEnd, dateCellMarks, dateSelectionFor, extractPlainText, formatAbsoluteDate, formatDate, formatDateRange, formatOptionCount, getCursorOffset, getFooterHint, hasSkippablePill, highlightParts, identifiedParamLabel, isCalendarFormat, isOptionsGridMobileViewport, isSmartSuggestion, isTraditionalAutocompleteSuggestion, isoDate, keepCaretOnChip, labelTraditionalAutocomplete, matchTypedPhrase, measureOptionsGrid, monthLabel, needsOptionsGridMeasurement, optionCountLabel, optionEnterDelayMs, optionHasImage, optionImageSources, optionImageSrc, optionLabel, optionsEntranceDurationMs, optionsGridTemplateColumns, optionsShowLeadingVisuals, parseDate, parseLooseDate, parseLooseDateRange, plainTextLength, planOptionsGrid, previousGraphemeBoundary, productFromMatchedItem, productImageSources, productImageSrc, productInitial, productRowWheelTarget, productsFromCustomFields, renderEditableContent, resolveFormatType, resolveIdentifiedDate, sameOptionRows, sanitizeOptionIconSvg, scrollCaretIntoView, selectedIsoFromText, selectedRangeFor, setCursorOffset, shopifyImageSrc, toWireIdentifiedParams, typedFragment, uiStringsFor, visibleDateRange, withSkippedParams, withoutTraditionalAutocomplete };
|
|
2737
|
+
export { AIAutocomplete, type APIConfig, type APIKeyConfig, ATTRIBUTION_URL, type AccessTokenConfig, type AccessTokenResult, type AppearanceMode, type AutocompleteRequest, type AutocompleteResponse, type AutocompleteResult, type CompletedParam, type CompletedParamState, type CoreOptions, type CoreState, type CurrencyOptions, type CustomFieldsReport, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, type DateMonthView, type DateRange, type DateSelection, type ExpressedFilter, type FilterOp, type FormatType, type IdentifiedParam, type IdentifiedParamState, type InputItem, type LooseDateOptions, type MatchedItem, type MatchedItems, ModeController, OPTIONS_GRID_MOBILE_QUERY, OPTION_ENTER_DELAY_VAR, OPTION_ENTER_FADE_MS, OPTION_ENTER_RISE_MS, OPTION_ENTER_RISE_PX, OPTION_ENTER_STAGGER_MS, OPTION_IMAGE_WIDTH, type OptionOverride, type OptionOverrides, type OptionsGridLayout, type OptionsGridPlan, PLACEHOLDER_FADE_OUT_MS, PLACEHOLDER_LEAVING_ATTR, PLACEHOLDER_SWAP_GAP_MS, PLACEHOLDER_TYPE_MS, PLACEHOLDER_WORD_PAUSE_MS, PRODUCT_IMAGE_WIDTH, PRODUCT_PATH_PREFIX, PRODUCT_ROW_PX_PER_LINE, type PhraseMatch, type Product, type ProductImageFallback, type ProductRowMetrics, type ProductRowWheel, type ProductsConfig, type ProductsLayout, RANGE_SEPARATOR, type RecentlySuggested, type RenderMode, SCHEMA_VERSION, SCROLL_ARROW_ATTR, SCROLL_ARROW_BOTTOM_VAR, SCROLL_ARROW_CLASS, SCROLL_ARROW_FADE_MS, SCROLL_ARROW_LABEL, SCROLL_ARROW_SCROLL_IDLE_MS, SCROLL_ARROW_VISIBLE_ATTR, SKIPPED_PARAM_TEXT, SMART_SUGGESTION_SPARKLE_SVG, type ScrollArrowArgs, type ScrollArrowController, type Segment, type SkippedParamState, type Store, type SubmitResultExtras, type Suggestion, type SuggestionOption, type SuggestionType, type TaskKind, type TextPart, type UIStrings, VIEWPORT_FIT_ATTR, VIEWPORT_FIT_HEIGHT_VAR, type ViewportFitArgs, type ViewportFitController, WEEKDAY_LABELS, addMonths, attachProductRowWheel, attachScrollArrow, attachViewportFit, buildAttributionUrl, buildDateOptions, buildQuery, buildSubmitResult, cellDay, cellIso, chipIdFromTap, computeOptionsGridLayout, containScroll, createStore, cursorIsAtEnd, dateCellMarks, dateSelectionFor, extractPlainText, formatAbsoluteDate, formatDate, formatDateRange, formatOptionCount, getCursorOffset, getFooterHint, hasSkippablePill, highlightParts, identifiedParamLabel, isCalendarFormat, isOptionsGridMobileViewport, isSmartSuggestion, isTraditionalAutocompleteSuggestion, isoDate, keepCaretOnChip, labelTraditionalAutocomplete, matchTypedPhrase, measureOptionsGrid, monthLabel, needsOptionsGridMeasurement, optionCountLabel, optionEnterDelayMs, optionHasImage, optionImageSources, optionImageSrc, optionLabel, optionsEntranceDurationMs, optionsGridTemplateColumns, optionsShowLeadingVisuals, parseDate, parseLooseDate, parseLooseDateRange, plainTextLength, planOptionsGrid, previousGraphemeBoundary, productFromMatchedItem, productImageSources, productImageSrc, productInitial, productPhotoFill, productRowWheelTarget, productsFromCustomFields, renderEditableContent, resolveFormatType, resolveIdentifiedDate, sameOptionRows, sanitizeOptionIconSvg, scrollCaretIntoView, selectedIsoFromText, selectedRangeFor, setCursorOffset, shopifyImageSrc, toWireIdentifiedParams, typedFragment, uiStringsFor, visibleDateRange, withSkippedParams, withoutTraditionalAutocomplete };
|