@depict-ai/ui 3.0.3 → 3.0.5
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/ES10/index.cjs +162 -151
- package/ES10/index.d.ts +211 -201
- package/ES10/index.js +164 -153
- package/latest/index.cjs +139 -113
- package/latest/index.d.ts +211 -201
- package/latest/index.js +141 -115
- package/package.json +4 -4
- package/server/ES10/index.cjs +137 -126
- package/server/ES10/index.d.ts +211 -201
- package/server/ES10/index.js +139 -128
- package/server/latest/index.cjs +128 -108
- package/server/latest/index.d.ts +211 -201
- package/server/latest/index.js +130 -110
package/server/latest/index.d.ts
CHANGED
|
@@ -1,16 +1,193 @@
|
|
|
1
|
+
import { ColsAtSize, Display, ModernDisplay, Amazing_Slider, Node_Array, report, Elem } from "@depict-ai/utilishared/latest";
|
|
1
2
|
import { JSX, Signal, Accessor, Setter } from "solid-js";
|
|
2
|
-
import { Amazing_Slider, Node_Array, Display, report, ColsAtSize, Elem, ModernDisplay } from "@depict-ai/utilishared/latest";
|
|
3
3
|
import { SearchFilter, SortModel, SearchRequestV3 } from "@depict-ai/types/api/SearchRequestV3";
|
|
4
|
-
import { SearchFilter as _SearchFilter1,
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
4
|
+
import { ContentLink, SearchFilter as _SearchFilter1, SearchResponse } from "@depict-ai/types/api/SearchResponse";
|
|
5
|
+
import { ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
|
|
6
|
+
import { ProductListing, GetListingResponse } from "@depict-ai/types/api/GetListingResponse";
|
|
7
7
|
import { ProductListingResponseV3 } from "@depict-ai/types/api/ProductListingResponseV3";
|
|
8
8
|
import { SearchSuggestionsRequestV3 } from "@depict-ai/types/api/SearchSuggestionsRequestV3";
|
|
9
9
|
import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequestV3";
|
|
10
10
|
import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
|
|
11
11
|
import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
|
|
12
12
|
import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
|
|
13
|
-
export const version = "3.0.
|
|
13
|
+
export const version = "3.0.5";
|
|
14
|
+
export type SDKColsAtSize = [number, number?][];
|
|
15
|
+
/**
|
|
16
|
+
* Transform SDK ColsAtSize into valid Layout ColsAtSize
|
|
17
|
+
* @param cols_at_size [nbCol, maxWidth]
|
|
18
|
+
* @returns
|
|
19
|
+
*/
|
|
20
|
+
export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
|
|
21
|
+
declare const LISTING_ID = "listingId";
|
|
22
|
+
declare const EXTERNAL_ID = "externalId";
|
|
23
|
+
export type SDKGridSpacing = string | {
|
|
24
|
+
horizontal: string;
|
|
25
|
+
vertical: string;
|
|
26
|
+
};
|
|
27
|
+
export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
|
|
28
|
+
type FilterWithData = WithRequired<SearchFilter, "data">;
|
|
29
|
+
export interface SDKRenderingInfo {
|
|
30
|
+
/**
|
|
31
|
+
* If you call this function with a provided function, the provided function will be called whenever the index of the currently displayed product changes.
|
|
32
|
+
*/
|
|
33
|
+
set_on_index_change: (fn: (index: number) => void) => void;
|
|
34
|
+
}
|
|
35
|
+
export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
|
|
36
|
+
type AddActualFieldToArray<T> = T extends Array<infer U> ? (U & {
|
|
37
|
+
actual_field?: string;
|
|
38
|
+
})[] : never;
|
|
39
|
+
type AddActualFieldToFilters<T extends SearchFilter[] | undefined> = T extends undefined ? undefined : AddActualFieldToArray<T>;
|
|
40
|
+
type DisplayTransformerAlwaysThereData = {
|
|
41
|
+
merchant: string;
|
|
42
|
+
market: string;
|
|
43
|
+
};
|
|
44
|
+
type CanBePromiseWrapped<T> = T | Promise<T>;
|
|
45
|
+
export type ModernDisplayWithPageUrl<T extends ModernDisplay> = { [K in keyof T]: K extends "variant_displays" ? (T[K][number] & {
|
|
46
|
+
page_url: string;
|
|
47
|
+
})[] : T[K] };
|
|
48
|
+
/**
|
|
49
|
+
* DisplayTransformers supersede pageURLCreator
|
|
50
|
+
* DisplayTransformers are functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
|
|
51
|
+
*/
|
|
52
|
+
export type DisplayTransformers<InputDisplay extends ModernDisplay, OutputDisplay extends ModernDisplay | never> = {
|
|
53
|
+
products?: (options: DisplayTransformerAlwaysThereData & {
|
|
54
|
+
displays: InputDisplay[];
|
|
55
|
+
}) => CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
|
|
56
|
+
categories?: <T extends ProductListing | ListingSuggestion>(options: DisplayTransformerAlwaysThereData & {
|
|
57
|
+
data: T[];
|
|
58
|
+
}) => CanBePromiseWrapped<(T & {
|
|
59
|
+
page_url: string;
|
|
60
|
+
})[]>;
|
|
61
|
+
contentResults?: (options: DisplayTransformerAlwaysThereData & {
|
|
62
|
+
data: ContentLink[];
|
|
63
|
+
}) => CanBePromiseWrapped<ContentLink[]>;
|
|
64
|
+
};
|
|
65
|
+
export type SomethingTakingADisplayTransformers<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
|
|
66
|
+
display_transformers: DisplayTransformers<InputDisplay, OutputDisplay>;
|
|
67
|
+
} : {
|
|
68
|
+
display_transformers: DisplayTransformers<InputDisplay, OutputDisplay>;
|
|
69
|
+
} : {
|
|
70
|
+
page_url_creator?: never;
|
|
71
|
+
display_transformers?: never;
|
|
72
|
+
};
|
|
73
|
+
export type BaseProviderConfig<InputDisplay extends Display, PossibleTransformedDisplay extends ModernDisplay | never> = {
|
|
74
|
+
/**
|
|
75
|
+
* The merchant to use for the search.
|
|
76
|
+
* @example "YOUR_MERCHANT", "stronger"
|
|
77
|
+
*/
|
|
78
|
+
merchant: string;
|
|
79
|
+
/**
|
|
80
|
+
* The market to use for the search.
|
|
81
|
+
* @example "YOUR_MARKET", "no", "en-de"
|
|
82
|
+
*/
|
|
83
|
+
market: string;
|
|
84
|
+
/**
|
|
85
|
+
* Optional unique identifer of the user. Only necessary when performing server side requests to Depict. All Depict tooling has a fallback ID that will be used when this isn't specified, but if you make requests to Depict directly, you need to specify this everywhere.
|
|
86
|
+
*/
|
|
87
|
+
sessionId?: string;
|
|
88
|
+
/**
|
|
89
|
+
* Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
|
|
90
|
+
*/
|
|
91
|
+
metaData?: Record<string, string>;
|
|
92
|
+
/**
|
|
93
|
+
* You can't have more than one instance of the same provider on the same page, unless you specify a unique instance key for each one.
|
|
94
|
+
* This is because there's state in the URL and history.state and the state of the different instances would collide.
|
|
95
|
+
* By setting this property, you can specify a unique key for each instance, so that the state of each instance is kept separate.
|
|
96
|
+
* We recommend to just use an incrementing number for this, e.g. "1", "2", "3", ...
|
|
97
|
+
*/
|
|
98
|
+
uniqueInstanceKeyForState?: string;
|
|
99
|
+
} & (InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
|
|
100
|
+
/**
|
|
101
|
+
* Functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
|
|
102
|
+
*/
|
|
103
|
+
displayTransformers: DisplayTransformers<InputDisplay, PossibleTransformedDisplay>;
|
|
104
|
+
} : {
|
|
105
|
+
/**
|
|
106
|
+
* Functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
|
|
107
|
+
*/
|
|
108
|
+
displayTransformers: DisplayTransformers<InputDisplay, PossibleTransformedDisplay>;
|
|
109
|
+
} : {
|
|
110
|
+
/**
|
|
111
|
+
* Functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
|
|
112
|
+
*/
|
|
113
|
+
displayTransformers?: never;
|
|
114
|
+
});
|
|
115
|
+
export type BaseSearchProviderConfig = {
|
|
116
|
+
/**
|
|
117
|
+
* The path to the search page.
|
|
118
|
+
* @example "/search", "/sok"
|
|
119
|
+
*/
|
|
120
|
+
searchPagePath: string;
|
|
121
|
+
/**
|
|
122
|
+
* The name of the url parameter that will be used for the search query.
|
|
123
|
+
* @example "q", "search_query", "query"
|
|
124
|
+
* @default "query"
|
|
125
|
+
*/
|
|
126
|
+
urlParamName?: string;
|
|
127
|
+
/**
|
|
128
|
+
* Whether to enable category suggestions in the search modal and search page.
|
|
129
|
+
* @default false
|
|
130
|
+
*/
|
|
131
|
+
enableCategorySuggestions?: boolean;
|
|
132
|
+
/**
|
|
133
|
+
* Whether to enable content search in the search modal and search page.
|
|
134
|
+
* @default false
|
|
135
|
+
*/
|
|
136
|
+
enableContentSearch?: boolean;
|
|
137
|
+
};
|
|
138
|
+
export type BaseCategoryProviderConfig = {
|
|
139
|
+
/**
|
|
140
|
+
* The parameter `listing_id=` will override the regular category id that you have configured your SDK to use. You can consider the `listing_id` as an escape-hatch if you want to easily set a listing id.
|
|
141
|
+
* However, if your page already sets a listing_id, you can disable this behaviour by setting this property to `true` (to avoid a conflict).
|
|
142
|
+
*/
|
|
143
|
+
disableOverrideListingId?: boolean;
|
|
144
|
+
};
|
|
145
|
+
export interface BaseProductListingConfig {
|
|
146
|
+
/**
|
|
147
|
+
* How many columns to show at each media size.
|
|
148
|
+
* @default
|
|
149
|
+
* [[2, 901], [3, 1024], [4]]
|
|
150
|
+
* @example
|
|
151
|
+
* [[2, 901], [3, 1024], [4]]
|
|
152
|
+
* means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any viewport size.
|
|
153
|
+
*/
|
|
154
|
+
columnsAtSize?: SDKColsAtSize;
|
|
155
|
+
/**
|
|
156
|
+
* The spacing between products.
|
|
157
|
+
* @default "2%"
|
|
158
|
+
* @example
|
|
159
|
+
* "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
|
|
160
|
+
*/
|
|
161
|
+
gridSpacing?: SDKGridSpacing;
|
|
162
|
+
}
|
|
163
|
+
export interface BaseSearchPageConfig extends BaseProductListingConfig {
|
|
164
|
+
/**
|
|
165
|
+
* Whether to show the search input field in the search page.
|
|
166
|
+
* @default true
|
|
167
|
+
*/
|
|
168
|
+
includeInputField?: boolean;
|
|
169
|
+
}
|
|
170
|
+
export interface BaseCategoryPageConfig extends BaseProductListingConfig {
|
|
171
|
+
/**
|
|
172
|
+
* Whether to show the breadcrumbs in the category page.
|
|
173
|
+
* @default true
|
|
174
|
+
*/
|
|
175
|
+
showBreadcrumbs?: boolean;
|
|
176
|
+
/**
|
|
177
|
+
* Whether to show the quicklinks in the category page.
|
|
178
|
+
* @default true
|
|
179
|
+
*/
|
|
180
|
+
showQuicklinks?: boolean;
|
|
181
|
+
}
|
|
182
|
+
/**
|
|
183
|
+
* The listing to query Depict for. `type` can be `"listingId"` or `"externalId"` and `id` is the actual id.
|
|
184
|
+
* If `id` is `"listingId"`, it should be a uuid where Depict is the source of truth, you can get them here: https://api.depict.ai/docs#tag/Listing/operation/Get_Listings_v3_listings_get.
|
|
185
|
+
* If `id` is `"externalId"`, it should be the id of the product listing in your system - whatever was passed to Depict during data ingestion.
|
|
186
|
+
*/
|
|
187
|
+
export type ListingQuery = {
|
|
188
|
+
type: typeof LISTING_ID | typeof EXTERNAL_ID;
|
|
189
|
+
id: string;
|
|
190
|
+
};
|
|
14
191
|
/** @jsxImportSource solid-js */
|
|
15
192
|
export function GenericSliderArrowButton(props?: {
|
|
16
193
|
width_?: number;
|
|
@@ -97,7 +274,7 @@ declare class PseudoRouter {
|
|
|
97
274
|
/**
|
|
98
275
|
* We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
|
|
99
276
|
*/
|
|
100
|
-
|
|
277
|
+
listing_query_state_key: string | undefined;
|
|
101
278
|
navigate_: {
|
|
102
279
|
/**
|
|
103
280
|
* Call this if you *just* want to replace the state object in history.state
|
|
@@ -118,11 +295,11 @@ declare class PseudoRouter {
|
|
|
118
295
|
event_?: MouseEvent | undefined;
|
|
119
296
|
force_spa_navigation_?: boolean | undefined;
|
|
120
297
|
is_replace_: boolean;
|
|
121
|
-
|
|
298
|
+
listing_query_?: ListingQuery | undefined;
|
|
122
299
|
scroll?: boolean | undefined;
|
|
123
300
|
}) => Promise<void | undefined>;
|
|
124
301
|
};
|
|
125
|
-
constructor(on_navigation: OnNavigation,
|
|
302
|
+
constructor(on_navigation: OnNavigation, listing_query_state_key?: string);
|
|
126
303
|
}
|
|
127
304
|
/**
|
|
128
305
|
* Makes signals out of values in history.state so that you can use history state as an intuitive storage of application state.
|
|
@@ -131,23 +308,6 @@ declare class PseudoRouter {
|
|
|
131
308
|
* @returns An object with the same keys as provided with the value being a Signal containing the default value. When the signal is set, history.replaceState is called and the key/value is put into history.state. If something else pushes a new state or the state is poped the signal value will update to always be in-line with the value of history.state.
|
|
132
309
|
*/
|
|
133
310
|
export function history_dot_state_to_state<Param extends string, DefaultValue>(params_to_default_value: Record<Param, DefaultValue>, router_: PseudoRouter): Record<Param, Signal<any>>;
|
|
134
|
-
export type SDKGridSpacing = string | {
|
|
135
|
-
horizontal: string;
|
|
136
|
-
vertical: string;
|
|
137
|
-
};
|
|
138
|
-
export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
|
|
139
|
-
type FilterWithData = WithRequired<SearchFilter, "data">;
|
|
140
|
-
export interface SDKRenderingInfo {
|
|
141
|
-
/**
|
|
142
|
-
* If you call this function with a provided function, the provided function will be called whenever the index of the currently displayed product changes.
|
|
143
|
-
*/
|
|
144
|
-
set_on_index_change: (fn: (index: number) => void) => void;
|
|
145
|
-
}
|
|
146
|
-
export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
|
|
147
|
-
type AddActualFieldToArray<T> = T extends Array<infer U> ? (U & {
|
|
148
|
-
actual_field?: string;
|
|
149
|
-
})[] : never;
|
|
150
|
-
type AddActualFieldToFilters<T extends SearchFilter[] | undefined> = T extends undefined ? undefined : AddActualFieldToArray<T>;
|
|
151
311
|
/**
|
|
152
312
|
* Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
|
|
153
313
|
* @returns A cleanup function to manually re-enable scrolling.
|
|
@@ -193,13 +353,6 @@ type ImagePlaceholderImageOptions = {
|
|
|
193
353
|
* @property style extra styles to add to the placeholder
|
|
194
354
|
*/
|
|
195
355
|
export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
|
|
196
|
-
export type SDKColsAtSize = [number, number?][];
|
|
197
|
-
/**
|
|
198
|
-
* Transform SDK ColsAtSize into valid Layout ColsAtSize
|
|
199
|
-
* @param cols_at_size [nbCol, maxWidth]
|
|
200
|
-
* @returns
|
|
201
|
-
*/
|
|
202
|
-
export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
|
|
203
356
|
/**
|
|
204
357
|
* A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
|
|
205
358
|
* If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
|
|
@@ -586,39 +739,6 @@ export function create_modified_filters({
|
|
|
586
739
|
}[]>;
|
|
587
740
|
local_filter_cache_: Signal<_SearchFilter1[]>;
|
|
588
741
|
}): void;
|
|
589
|
-
type DisplayTransformerAlwaysThereData = {
|
|
590
|
-
merchant: string;
|
|
591
|
-
market: string;
|
|
592
|
-
};
|
|
593
|
-
type CanBePromiseWrapped<T> = T | Promise<T>;
|
|
594
|
-
export type ModernDisplayWithPageUrl<T extends ModernDisplay> = { [K in keyof T]: K extends "variant_displays" ? (T[K][number] & {
|
|
595
|
-
page_url: string;
|
|
596
|
-
})[] : T[K] };
|
|
597
|
-
/**
|
|
598
|
-
* DisplayTransformers supersede pageURLCreator
|
|
599
|
-
* DisplayTransformers are functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
|
|
600
|
-
*/
|
|
601
|
-
export type DisplayTransformers<InputDisplay extends ModernDisplay, OutputDisplay extends ModernDisplay | never> = {
|
|
602
|
-
products?: (options: DisplayTransformerAlwaysThereData & {
|
|
603
|
-
displays: InputDisplay[];
|
|
604
|
-
}) => CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
|
|
605
|
-
categories?: <T extends Breadcrumb | Quicklink | CategorySuggestion>(options: DisplayTransformerAlwaysThereData & {
|
|
606
|
-
data: T[];
|
|
607
|
-
}) => CanBePromiseWrapped<(T & {
|
|
608
|
-
page_url: string;
|
|
609
|
-
})[]>;
|
|
610
|
-
contentResults?: (options: DisplayTransformerAlwaysThereData & {
|
|
611
|
-
data: ContentLink[];
|
|
612
|
-
}) => CanBePromiseWrapped<ContentLink[]>;
|
|
613
|
-
};
|
|
614
|
-
export type SomethingTakingADisplayTransformers<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
|
|
615
|
-
display_transformers: DisplayTransformers<InputDisplay, OutputDisplay>;
|
|
616
|
-
} : {
|
|
617
|
-
display_transformers: DisplayTransformers<InputDisplay, OutputDisplay>;
|
|
618
|
-
} : {
|
|
619
|
-
page_url_creator?: never;
|
|
620
|
-
display_transformers?: never;
|
|
621
|
-
};
|
|
622
742
|
export type ExclusiveId = {
|
|
623
743
|
categoryId: string;
|
|
624
744
|
productId?: undefined;
|
|
@@ -689,33 +809,33 @@ export type InstantCard<T extends Display> = (display: T, context: {
|
|
|
689
809
|
merchant: string;
|
|
690
810
|
market: string;
|
|
691
811
|
}) => JSX.Element;
|
|
692
|
-
type CategorySuggestionAfterURLCreator =
|
|
812
|
+
type CategorySuggestionAfterURLCreator = ListingSuggestion & {
|
|
693
813
|
page_url: string;
|
|
694
814
|
};
|
|
695
|
-
type ReplaceCategorySuggestion<T> = T extends
|
|
815
|
+
type ReplaceCategorySuggestion<T> = T extends ListingSuggestion ? CategorySuggestionAfterURLCreator : T extends ListingSuggestion[] ? CategorySuggestionAfterURLCreator[] : T;
|
|
696
816
|
type SearchSuggestionsResponseAfterURLCreator = { [K in keyof SearchSuggestionsResponseV3]: ReplaceCategorySuggestion<SearchSuggestionsResponseV3[K]> };
|
|
697
817
|
type AddPageUrlToDisplay<T extends any[]> = (T[number] & {
|
|
698
818
|
page_url: string;
|
|
699
819
|
})[];
|
|
700
820
|
type SearchResponseAfterDisplayTransformer = { [K in keyof SearchResponse]: K extends "displays" ? AddPageUrlToDisplay<SearchResponse[K]> : K extends "filters" ? AddActualFieldToFilters<SearchResponse[K]> : SearchResponse[K] };
|
|
701
|
-
type
|
|
821
|
+
type ProductListingWithPageURL = ProductListing & {
|
|
702
822
|
page_url: string;
|
|
703
823
|
};
|
|
704
824
|
type _AddPageUrlToDisplay1<T extends any[]> = (T[number] & {
|
|
705
825
|
page_url: string;
|
|
706
826
|
})[];
|
|
707
827
|
type ProductListingResponseAfterDisplayTransformer = { [K in keyof ProductListingResponseV3]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponseV3[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponseV3[K]> : ProductListingResponseV3[K] };
|
|
708
|
-
type GetListingResponseAfterDisplayTransformer = { [K in keyof GetListingResponse]: K extends "breadcrumbs" ?
|
|
828
|
+
type GetListingResponseAfterDisplayTransformer = { [K in keyof GetListingResponse]: K extends "breadcrumbs" ? ProductListingWithPageURL[] : K extends "quick_links" ? ProductListingWithPageURL[] : GetListingResponse[K] };
|
|
709
829
|
type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
|
|
710
830
|
get_metadata?: () => Promise<{
|
|
711
831
|
[k: string]: string;
|
|
712
832
|
} | undefined>;
|
|
713
833
|
get_session_id?: () => string | undefined;
|
|
714
834
|
} & SomethingTakingADisplayTransformers<InputDisplay, OutputDisplay>;
|
|
715
|
-
interface GetListingOptions extends GetListingRequest {
|
|
716
|
-
listing_id: string;
|
|
835
|
+
interface GetListingOptions extends Omit<GetListingRequest, "listing_id"> {
|
|
717
836
|
session_id?: string;
|
|
718
|
-
|
|
837
|
+
id_to_query_for_: string;
|
|
838
|
+
id_type_: typeof LISTING_ID | typeof EXTERNAL_ID;
|
|
719
839
|
}
|
|
720
840
|
/**
|
|
721
841
|
* Class that handles all communication done in PLP code with the Depict API. (Notably not for recommendations currently).
|
|
@@ -731,11 +851,20 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
|
|
|
731
851
|
query(input_req: SearchRequestV3): Promise<SearchResponseAfterDisplayTransformer & {
|
|
732
852
|
failed?: true;
|
|
733
853
|
}>;
|
|
734
|
-
get_listing(
|
|
854
|
+
get_listing({
|
|
855
|
+
id_type_,
|
|
856
|
+
id_to_query_for_,
|
|
857
|
+
...input_req
|
|
858
|
+
}: GetListingOptions): Promise<GetListingResponseAfterDisplayTransformer & {
|
|
735
859
|
failed?: true;
|
|
736
860
|
}>;
|
|
737
|
-
get_listing_products(
|
|
738
|
-
|
|
861
|
+
get_listing_products({
|
|
862
|
+
id_to_query_for_,
|
|
863
|
+
id_type_,
|
|
864
|
+
...input_req_
|
|
865
|
+
}: ProductListingRequestV3 & {
|
|
866
|
+
id_to_query_for_: string;
|
|
867
|
+
id_type_: typeof LISTING_ID | typeof EXTERNAL_ID;
|
|
739
868
|
}): Promise<ProductListingResponseAfterDisplayTransformer & {
|
|
740
869
|
failed?: true;
|
|
741
870
|
}>;
|
|
@@ -778,7 +907,7 @@ type GeneralCategoryListingOptions = {
|
|
|
778
907
|
localization: category_i18n;
|
|
779
908
|
unique_instance_key_for_state?: string;
|
|
780
909
|
on_navigation?: OnNavigation;
|
|
781
|
-
|
|
910
|
+
listing_query_state_key?: string;
|
|
782
911
|
};
|
|
783
912
|
type CategoryConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralCategoryListingOptions & {
|
|
784
913
|
api: DepictAPI<InputDisplay, OutputDisplay>;
|
|
@@ -794,14 +923,12 @@ export class DepictCategory<InputDisplay extends Display, OutputDisplay extends
|
|
|
794
923
|
#private;
|
|
795
924
|
get localization(): category_i18n;
|
|
796
925
|
set localization(locale_obj: category_i18n);
|
|
797
|
-
get
|
|
798
|
-
set
|
|
926
|
+
get listing_query(): ListingQuery;
|
|
927
|
+
set listing_query(query: ListingQuery);
|
|
799
928
|
get merchant(): string;
|
|
800
929
|
set merchant(merchant: string);
|
|
801
930
|
get market(): string;
|
|
802
931
|
set market(market: string);
|
|
803
|
-
get meta_title_suffix(): string | undefined;
|
|
804
|
-
set meta_title_suffix(new_suffix: string | undefined);
|
|
805
932
|
get disable_override_listing_id(): boolean | undefined;
|
|
806
933
|
set disable_override_listing_id(new_value: boolean | undefined);
|
|
807
934
|
get on_navigation(): OnNavigation;
|
|
@@ -811,7 +938,7 @@ export class DepictCategory<InputDisplay extends Display, OutputDisplay extends
|
|
|
811
938
|
on_navigation,
|
|
812
939
|
display_transformers,
|
|
813
940
|
unique_instance_key_for_state,
|
|
814
|
-
|
|
941
|
+
listing_query_state_key,
|
|
815
942
|
...props_on_class
|
|
816
943
|
}: DepictCategoryConstructorOptions<InputDisplay, OutputDisplay>);
|
|
817
944
|
}
|
|
@@ -828,9 +955,9 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
|
|
|
828
955
|
show_quicklinks?: boolean;
|
|
829
956
|
show_breadcrumbs?: boolean;
|
|
830
957
|
category_title: typeof CategoryTitle | typeof embedded_num_products;
|
|
831
|
-
|
|
958
|
+
on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
|
|
832
959
|
content_blocks_by_row?: ContentBlocksByRow;
|
|
833
|
-
}): import("@depict-ai/utilishared").Node_Array;
|
|
960
|
+
}): import("@depict-ai/utilishared/latest").Node_Array;
|
|
834
961
|
export function BreadCrumbs<T extends Display>({
|
|
835
962
|
depict_category
|
|
836
963
|
}: {
|
|
@@ -844,7 +971,7 @@ export function QuickLinks<T extends Display>({
|
|
|
844
971
|
/**
|
|
845
972
|
* Gets available listings for a given merchant, market and locale
|
|
846
973
|
*/
|
|
847
|
-
export function get_listings(merchant: string, market: string, locale: string): Promise<import("@depict-ai/types/api/
|
|
974
|
+
export function get_listings(merchant: string, market: string, locale: string): Promise<import("@depict-ai/types/api/ListListingsResponseItem").ListListingsResponseItem1[]>;
|
|
848
975
|
export function DefaultInstantCardPlaceholder(): HTMLDivElement;
|
|
849
976
|
/**
|
|
850
977
|
* Useful for aligning the search modal to an element, like an existing input field
|
|
@@ -960,123 +1087,6 @@ interface SearchFieldParams {
|
|
|
960
1087
|
aligner_ref?: HTMLElement | null;
|
|
961
1088
|
}
|
|
962
1089
|
export function SearchField(props: SearchFieldParams): HTMLDivElement[];
|
|
963
|
-
export type BaseProviderConfig<InputDisplay extends Display, PossibleTransformedDisplay extends ModernDisplay | never> = {
|
|
964
|
-
/**
|
|
965
|
-
* The merchant to use for the search.
|
|
966
|
-
* @example "YOUR_MERCHANT", "stronger"
|
|
967
|
-
*/
|
|
968
|
-
merchant: string;
|
|
969
|
-
/**
|
|
970
|
-
* The market to use for the search.
|
|
971
|
-
* @example "YOUR_MARKET", "no", "en-de"
|
|
972
|
-
*/
|
|
973
|
-
market: string;
|
|
974
|
-
/**
|
|
975
|
-
* Optional unique identifer of the user. Only necessary when performing server side requests to Depict. All Depict tooling has a fallback ID that will be used when this isn't specified, but if you make requests to Depict directly, you need to specify this everywhere.
|
|
976
|
-
*/
|
|
977
|
-
sessionId?: string;
|
|
978
|
-
/**
|
|
979
|
-
* Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
|
|
980
|
-
*/
|
|
981
|
-
metaData?: Record<string, string>;
|
|
982
|
-
/**
|
|
983
|
-
* You can't have more than one instance of the same provider on the same page, unless you specify a unique instance key for each one.
|
|
984
|
-
* This is because there's state in the URL and history.state and the state of the different instances would collide.
|
|
985
|
-
* By setting this property, you can specify a unique key for each instance, so that the state of each instance is kept separate.
|
|
986
|
-
* We recommend to just use an incrementing number for this, e.g. "1", "2", "3", ...
|
|
987
|
-
*/
|
|
988
|
-
uniqueInstanceKeyForState?: string;
|
|
989
|
-
} & (InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
|
|
990
|
-
/**
|
|
991
|
-
* Functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
|
|
992
|
-
*/
|
|
993
|
-
displayTransformers: DisplayTransformers<InputDisplay, PossibleTransformedDisplay>;
|
|
994
|
-
} : {
|
|
995
|
-
/**
|
|
996
|
-
* Functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
|
|
997
|
-
*/
|
|
998
|
-
displayTransformers: DisplayTransformers<InputDisplay, PossibleTransformedDisplay>;
|
|
999
|
-
} : {
|
|
1000
|
-
/**
|
|
1001
|
-
* Functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
|
|
1002
|
-
*/
|
|
1003
|
-
displayTransformers?: never;
|
|
1004
|
-
});
|
|
1005
|
-
export type BaseSearchProviderConfig = {
|
|
1006
|
-
/**
|
|
1007
|
-
* The path to the search page.
|
|
1008
|
-
* @example "/search", "/sok"
|
|
1009
|
-
*/
|
|
1010
|
-
searchPagePath: string;
|
|
1011
|
-
/**
|
|
1012
|
-
* The name of the url parameter that will be used for the search query.
|
|
1013
|
-
* @example "q", "search_query", "query"
|
|
1014
|
-
* @default "query"
|
|
1015
|
-
*/
|
|
1016
|
-
urlParamName?: string;
|
|
1017
|
-
/**
|
|
1018
|
-
* Whether to enable category suggestions in the search modal and search page.
|
|
1019
|
-
* @default false
|
|
1020
|
-
*/
|
|
1021
|
-
enableCategorySuggestions?: boolean;
|
|
1022
|
-
/**
|
|
1023
|
-
* Whether to enable content search in the search modal and search page.
|
|
1024
|
-
* @default false
|
|
1025
|
-
*/
|
|
1026
|
-
enableContentSearch?: boolean;
|
|
1027
|
-
};
|
|
1028
|
-
export type BaseCategoryProviderConfig = {
|
|
1029
|
-
/**
|
|
1030
|
-
* Currently used for SEO long tail only.
|
|
1031
|
-
* Read more about SEO collections here https://docs.depict.ai/other-guides/seo-collections-guide/introduction
|
|
1032
|
-
* @default ""
|
|
1033
|
-
* @example
|
|
1034
|
-
* If the generated SEO title is "Blue Jeans", and you specify metaTitleSuffix to " | My Store", the final SEO title will be "Blue Jeans | My Store".
|
|
1035
|
-
*/
|
|
1036
|
-
metaTitleSuffix?: string;
|
|
1037
|
-
/**
|
|
1038
|
-
* The parameter `listing_id=` will override the regular category id that you have configured your SDK to use. You can consider the `listing_id` as an escape-hatch if you want to easily set a listing id.
|
|
1039
|
-
* However, if your page already sets a listing_id, you can disable this behaviour by setting this property to `true` (to avoid a conflict).
|
|
1040
|
-
*/
|
|
1041
|
-
disableOverrideListingId?: boolean;
|
|
1042
|
-
};
|
|
1043
|
-
export interface BaseProductListingConfig {
|
|
1044
|
-
/**
|
|
1045
|
-
* How many columns to show at each media size.
|
|
1046
|
-
* @default
|
|
1047
|
-
* [[2, 901], [3, 1024], [4]]
|
|
1048
|
-
* @example
|
|
1049
|
-
* [[2, 901], [3, 1024], [4]]
|
|
1050
|
-
* means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any viewport size.
|
|
1051
|
-
*/
|
|
1052
|
-
columnsAtSize?: SDKColsAtSize;
|
|
1053
|
-
/**
|
|
1054
|
-
* The spacing between products.
|
|
1055
|
-
* @default "2%"
|
|
1056
|
-
* @example
|
|
1057
|
-
* "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
|
|
1058
|
-
*/
|
|
1059
|
-
gridSpacing?: SDKGridSpacing;
|
|
1060
|
-
}
|
|
1061
|
-
export interface BaseSearchPageConfig extends BaseProductListingConfig {
|
|
1062
|
-
/**
|
|
1063
|
-
* Whether to show the search input field in the search page.
|
|
1064
|
-
* @default true
|
|
1065
|
-
*/
|
|
1066
|
-
includeInputField?: boolean;
|
|
1067
|
-
}
|
|
1068
|
-
export interface BaseCategoryPageConfig extends BaseProductListingConfig {
|
|
1069
|
-
/**
|
|
1070
|
-
* Whether to show the breadcrumbs in the category page.
|
|
1071
|
-
* @default true
|
|
1072
|
-
*/
|
|
1073
|
-
showBreadcrumbs?: boolean;
|
|
1074
|
-
/**
|
|
1075
|
-
* Whether to show the quicklinks in the category page.
|
|
1076
|
-
* @default true
|
|
1077
|
-
*/
|
|
1078
|
-
showQuicklinks?: boolean;
|
|
1079
|
-
}
|
|
1080
1090
|
type CenteredLocation = {
|
|
1081
1091
|
location?: "centered";
|
|
1082
1092
|
};
|