@useinsider/guido 2.0.0-beta.1c331b8 → 2.0.0-beta.1f72712
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/dist/extensions/Blocks/Recommendation/block.js +40 -6
- package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js +64 -0
- package/dist/extensions/Blocks/Recommendation/constants/layout.js +9 -4
- package/dist/extensions/Blocks/Recommendation/constants/selectors.js +17 -9
- package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +48 -54
- package/dist/extensions/Blocks/Recommendation/controls/layout/index.js +42 -36
- package/dist/extensions/Blocks/Recommendation/controls/main/algorithm.js +51 -27
- package/dist/extensions/Blocks/Recommendation/controls/main/currency.js +146 -73
- package/dist/extensions/Blocks/Recommendation/controls/main/index.js +49 -35
- package/dist/extensions/Blocks/Recommendation/controls/main/locale.js +23 -13
- package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +41 -41
- package/dist/extensions/Blocks/Recommendation/controls/main/shuffle.js +27 -16
- package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +79 -67
- package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/textAfter.js +1 -1
- package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/textBefore.js +3 -3
- package/dist/extensions/Blocks/Recommendation/controls/spacing/index.js +85 -79
- package/dist/extensions/Blocks/Recommendation/recommendation.css.js +8 -4
- package/dist/extensions/Blocks/Recommendation/services/configService.js +239 -0
- package/dist/extensions/Blocks/Recommendation/store/recommendation.js +30 -28
- package/dist/extensions/Blocks/Recommendation/templates/horizontal/elementRenderer.js +49 -25
- package/dist/extensions/Blocks/Recommendation/templates/horizontal/template.js +18 -19
- package/dist/extensions/Blocks/Recommendation/templates/utils.js +44 -101
- package/dist/extensions/Blocks/Recommendation/templates/vertical/elementRenderer.js +60 -35
- package/dist/extensions/Blocks/Recommendation/types/nodeConfig.js +6 -0
- package/dist/extensions/Blocks/Recommendation/utils/priceFormatter.js +29 -0
- package/dist/extensions/Blocks/Recommendation/utils/tagName.js +46 -0
- package/dist/extensions/Blocks/common-control.js +1 -1
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +214 -157
- package/dist/src/components/wrappers/WpDrawer.vue.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/block.d.ts +34 -0
- package/dist/src/extensions/Blocks/Recommendation/constants/defaultConfig.d.ts +49 -0
- package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +3 -2
- package/dist/src/extensions/Blocks/Recommendation/constants/layout.d.ts +10 -0
- package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +12 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/layout/index.d.ts +3 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/main/algorithm.d.ts +13 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/main/currency.d.ts +30 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts +19 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/main/locale.d.ts +9 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts +4 -2
- package/dist/src/extensions/Blocks/Recommendation/controls/main/shuffle.d.ts +8 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +19 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/spacing/index.d.ts +13 -2
- package/dist/src/extensions/Blocks/Recommendation/services/configService.d.ts +151 -0
- package/dist/src/extensions/Blocks/Recommendation/services/index.d.ts +6 -0
- package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +1 -0
- package/dist/src/extensions/Blocks/Recommendation/types/index.d.ts +7 -0
- package/dist/src/extensions/Blocks/Recommendation/types/nodeConfig.d.ts +154 -0
- package/dist/src/extensions/Blocks/Recommendation/utils/priceFormatter.d.ts +33 -0
- package/dist/src/extensions/Blocks/Recommendation/utils/stylePreserver.d.ts +113 -0
- package/dist/src/extensions/Blocks/Recommendation/utils/tagName.d.ts +77 -0
- package/package.json +1 -1
|
@@ -33,8 +33,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
|
|
|
33
33
|
descriptionStatus: boolean;
|
|
34
34
|
descriptionText: string;
|
|
35
35
|
}>>>, {
|
|
36
|
-
className: string;
|
|
37
36
|
size: "small" | "medium" | "large";
|
|
37
|
+
className: string;
|
|
38
38
|
closeOnOutsideClick: boolean;
|
|
39
39
|
descriptionStatus: boolean;
|
|
40
40
|
descriptionText: string;
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Recommendation Block
|
|
3
|
+
*
|
|
4
|
+
* Main block class for the Recommendation extension.
|
|
5
|
+
* Handles block lifecycle including configuration initialization and migration.
|
|
6
|
+
*/
|
|
7
|
+
import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
1
8
|
import { Block, BlockCompositionType } from '@stripoinc/ui-editor-extensions';
|
|
2
9
|
export declare const BLOCK_ID = "recommendation-block";
|
|
3
10
|
export declare class RecommendationBlock extends Block {
|
|
@@ -8,4 +15,31 @@ export declare class RecommendationBlock extends Block {
|
|
|
8
15
|
getName(): string;
|
|
9
16
|
getDescription(): string;
|
|
10
17
|
getTemplate(): string;
|
|
18
|
+
/**
|
|
19
|
+
* Called when a new block is dropped into the template
|
|
20
|
+
*
|
|
21
|
+
* Initializes the block with default configuration stored via node config.
|
|
22
|
+
* This ensures the configuration persists with the template.
|
|
23
|
+
* @param node - The newly created block node
|
|
24
|
+
*/
|
|
25
|
+
onCreated(node: ImmutableHtmlNode): void;
|
|
26
|
+
/**
|
|
27
|
+
* Called when the document changes or template is loaded
|
|
28
|
+
*
|
|
29
|
+
* Handles migration from legacy templates that don't have node config.
|
|
30
|
+
* Also handles config version upgrades for future migrations.
|
|
31
|
+
* @param node - The block node that may need migration
|
|
32
|
+
*/
|
|
33
|
+
onDocumentChanged(node: ImmutableHtmlNode): void;
|
|
34
|
+
/**
|
|
35
|
+
* Migrate configuration from legacy format
|
|
36
|
+
*
|
|
37
|
+
* Legacy templates may store configuration in:
|
|
38
|
+
* - data-attributes (data-layout, data-card-composition, etc.)
|
|
39
|
+
* - Pinia store (lost on reload - this is what we're fixing)
|
|
40
|
+
*
|
|
41
|
+
* This method reads what we can from the DOM and initializes proper node config.
|
|
42
|
+
* @param node - The block node to migrate
|
|
43
|
+
*/
|
|
44
|
+
private _migrateFromLegacy;
|
|
11
45
|
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Default Configuration for Recommendation Block
|
|
3
|
+
*
|
|
4
|
+
* This module provides the default values for RecommendationNodeConfig.
|
|
5
|
+
* These values are used when:
|
|
6
|
+
* - A new block is dropped into the template
|
|
7
|
+
* - Migrating legacy templates without stored config
|
|
8
|
+
* - Merging partial updates with existing config
|
|
9
|
+
*/
|
|
10
|
+
import type { RecommendationNodeConfig, CurrencyConfig, OmnibusTextConfig } from '../types/nodeConfig';
|
|
11
|
+
/**
|
|
12
|
+
* Default currency configuration
|
|
13
|
+
* Uses USD as the base currency with standard formatting
|
|
14
|
+
* Note: symbol stores the currency code (e.g., 'USD'), not the symbol character ('$')
|
|
15
|
+
* This matches the Currency Symbol dropdown which shows currency codes
|
|
16
|
+
*/
|
|
17
|
+
export declare const DEFAULT_CURRENCY: CurrencyConfig;
|
|
18
|
+
/**
|
|
19
|
+
* Default omnibus price text configuration
|
|
20
|
+
* Pre-filled with common EU Omnibus Directive text
|
|
21
|
+
*/
|
|
22
|
+
export declare const DEFAULT_OMNIBUS_PRICE: OmnibusTextConfig;
|
|
23
|
+
/**
|
|
24
|
+
* Default omnibus discount text configuration
|
|
25
|
+
*/
|
|
26
|
+
export declare const DEFAULT_OMNIBUS_DISCOUNT: OmnibusTextConfig;
|
|
27
|
+
/**
|
|
28
|
+
* Default card composition order
|
|
29
|
+
* Defines the visual order of elements in product cards
|
|
30
|
+
*/
|
|
31
|
+
export declare const DEFAULT_COMPOSITION: string[];
|
|
32
|
+
/**
|
|
33
|
+
* Default visibility settings for card elements
|
|
34
|
+
* Omnibus elements are hidden by default (not all regions require them)
|
|
35
|
+
*/
|
|
36
|
+
export declare const DEFAULT_VISIBILITY: Record<string, boolean>;
|
|
37
|
+
/**
|
|
38
|
+
* Complete default configuration for Recommendation Block
|
|
39
|
+
*
|
|
40
|
+
* This is the single source of truth for default values.
|
|
41
|
+
* All other code should import and use this constant.
|
|
42
|
+
*/
|
|
43
|
+
export declare const DEFAULT_NODE_CONFIG: RecommendationNodeConfig;
|
|
44
|
+
/**
|
|
45
|
+
* Current configuration version
|
|
46
|
+
* Increment this when making breaking changes to the schema
|
|
47
|
+
* Used for migration detection
|
|
48
|
+
*/
|
|
49
|
+
export declare const CURRENT_CONFIG_VERSION = 1;
|
|
@@ -8,5 +8,6 @@
|
|
|
8
8
|
*/
|
|
9
9
|
export { RecommendationBlockId } from './blockIds';
|
|
10
10
|
export { RecommendationControlId } from './controlIds';
|
|
11
|
-
export { CONTAINER_SELECTOR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, } from './selectors';
|
|
12
|
-
export { DEFAULT_PRODUCTS_PER_ROW, DEFAULT_CARDS_IN_ROW, MAX_PRODUCT_COUNT, MIN_PRODUCT_COUNT, MAX_PRODUCTS_PER_ROW, MIN_PRODUCTS_PER_ROW, } from './layout';
|
|
11
|
+
export { CONTAINER_SELECTOR, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, } from './selectors';
|
|
12
|
+
export { DEFAULT_PRODUCTS_PER_ROW, DEFAULT_CARDS_IN_ROW, MAX_PRODUCT_COUNT, MIN_PRODUCT_COUNT, MAX_PRODUCTS_PER_ROW, MIN_PRODUCTS_PER_ROW, DEFAULT_COLUMN_SPACING, DEFAULT_ROW_SPACING, MIN_SPACING, MAX_SPACING, SPACING_STEP, } from './layout';
|
|
13
|
+
export { DEFAULT_NODE_CONFIG, DEFAULT_CURRENCY, DEFAULT_COMPOSITION, DEFAULT_VISIBILITY, CURRENT_CONFIG_VERSION, } from './defaultConfig';
|
|
@@ -15,3 +15,13 @@ export declare const MIN_PRODUCT_COUNT = 1;
|
|
|
15
15
|
export declare const MAX_PRODUCTS_PER_ROW = 4;
|
|
16
16
|
/** Minimum number of products per row in vertical layout */
|
|
17
17
|
export declare const MIN_PRODUCTS_PER_ROW = 1;
|
|
18
|
+
/** Default column spacing between product cards (5px on each side = 10px total) */
|
|
19
|
+
export declare const DEFAULT_COLUMN_SPACING = 10;
|
|
20
|
+
/** Default row spacing between product rows */
|
|
21
|
+
export declare const DEFAULT_ROW_SPACING = 20;
|
|
22
|
+
/** Minimum spacing value */
|
|
23
|
+
export declare const MIN_SPACING = 0;
|
|
24
|
+
/** Maximum spacing value */
|
|
25
|
+
export declare const MAX_SPACING = 50;
|
|
26
|
+
/** Spacing adjustment step */
|
|
27
|
+
export declare const SPACING_STEP = 5;
|
|
@@ -6,6 +6,18 @@
|
|
|
6
6
|
* Used across controls to target elements within the recommendation block
|
|
7
7
|
*/
|
|
8
8
|
export declare const CONTAINER_SELECTOR = ".ins-recommendation-product-container";
|
|
9
|
+
/**
|
|
10
|
+
* Currency HTML attributes set on the block element
|
|
11
|
+
* These are read by the HTML compiler at runtime to format prices
|
|
12
|
+
*/
|
|
13
|
+
export declare const CURRENCY_ATTR: {
|
|
14
|
+
readonly CURRENCY: "currency";
|
|
15
|
+
readonly SYMBOL: "currency-symbol";
|
|
16
|
+
readonly ALIGNMENT: "currency-alignment";
|
|
17
|
+
readonly THOUSAND_SEPARATOR: "currency-thousand-separator";
|
|
18
|
+
readonly DECIMAL_SEPARATOR: "currency-decimal-separator";
|
|
19
|
+
readonly DECIMAL_COUNT: "currency-decimal-count";
|
|
20
|
+
};
|
|
9
21
|
/**
|
|
10
22
|
* Attribute type constants used in templates
|
|
11
23
|
* These are used as keys in ElementRenderer and composition arrays
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Manages recommendation block layout orientation
|
|
5
5
|
* Allows switching between vertical (grid) and horizontal (list) layouts
|
|
6
|
+
*
|
|
7
|
+
* Configuration is stored via node config (persists with template).
|
|
6
8
|
*/
|
|
7
9
|
import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
8
10
|
import { CommonControl } from '../../../common-control';
|
|
@@ -22,7 +24,7 @@ export declare class LayoutControl extends CommonControl {
|
|
|
22
24
|
_setFormValues(): void;
|
|
23
25
|
/**
|
|
24
26
|
* Handles layout change
|
|
25
|
-
* Updates
|
|
27
|
+
* Updates node config, data attribute and regenerates product rows
|
|
26
28
|
*/
|
|
27
29
|
_onLayoutChange(layout: Orientation): void;
|
|
28
30
|
/**
|
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Algorithm Selection Control
|
|
3
|
+
*
|
|
4
|
+
* Handles recommendation algorithm selection and product IDs for manual merchandising:
|
|
5
|
+
* - Algorithm/strategy selection
|
|
6
|
+
* - Product IDs input (visible only for manual merchandising)
|
|
7
|
+
*
|
|
8
|
+
* Configuration is stored via node config (persists with template).
|
|
9
|
+
* Algorithm options are fetched from API and cached in Pinia store.
|
|
10
|
+
*/
|
|
11
|
+
import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
1
12
|
import { CommonControl } from '../../../common-control';
|
|
2
13
|
export declare const ALGORITHM_CONTROL_ID = "recommendation-algorithm-control";
|
|
3
14
|
/**
|
|
@@ -8,9 +19,10 @@ export declare class AlgorithmControl extends CommonControl {
|
|
|
8
19
|
getId(): string;
|
|
9
20
|
getTemplate(): string;
|
|
10
21
|
onRender(): void;
|
|
22
|
+
onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
|
|
11
23
|
_setFormValues(): void;
|
|
12
24
|
_initializeSelectItems(): void;
|
|
13
|
-
_setProductIdsVisibility(): void;
|
|
25
|
+
_setProductIdsVisibility(strategy?: string): void;
|
|
14
26
|
_onAlgorithmChange(value: string): void;
|
|
15
27
|
_onProductIdsChange(value: string): void;
|
|
16
28
|
_listenToFormUpdates(): void;
|
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Currency Settings Control
|
|
3
|
+
*
|
|
4
|
+
* Handles all currency-related configuration for recommendation products:
|
|
5
|
+
* - Currency type
|
|
6
|
+
* - Currency location (before/after)
|
|
7
|
+
* - Currency symbol
|
|
8
|
+
* - Thousand separator
|
|
9
|
+
* - Decimal separator
|
|
10
|
+
* - Decimal count
|
|
11
|
+
*
|
|
12
|
+
* Configuration is stored via node config (persists with template).
|
|
13
|
+
* Currency options are fetched from API and cached in Pinia store.
|
|
14
|
+
*/
|
|
15
|
+
import type { CurrencyConfig } from '../../types/nodeConfig';
|
|
16
|
+
import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
1
17
|
import { CommonControl } from '../../../common-control';
|
|
2
18
|
export declare const CURRENCY_CONTROL_ID = "recommendation-currency-control";
|
|
3
19
|
/**
|
|
@@ -5,12 +21,25 @@ export declare const CURRENCY_CONTROL_ID = "recommendation-currency-control";
|
|
|
5
21
|
*/
|
|
6
22
|
export declare class CurrencyControl extends CommonControl {
|
|
7
23
|
private store;
|
|
24
|
+
private storeUnsubscription;
|
|
8
25
|
getId(): string;
|
|
9
26
|
getTemplate(): string;
|
|
10
27
|
onRender(): void;
|
|
28
|
+
onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
|
|
29
|
+
onDestroy(): void;
|
|
11
30
|
_setFormValues(): void;
|
|
12
31
|
_initializeSelectItems(): void;
|
|
32
|
+
_updateCurrency(updates: Partial<CurrencyConfig>): void;
|
|
13
33
|
_onCurrencyChange(value: string): void;
|
|
14
|
-
|
|
34
|
+
_onCurrencyLocationChange(value: string): void;
|
|
35
|
+
_onCurrencySymbolChange(value: string): void;
|
|
36
|
+
_onThousandSeparatorChange(value: string): void;
|
|
37
|
+
_onDecimalSeparatorChange(value: string): void;
|
|
38
|
+
_onDecimalCountChange(value: string): void;
|
|
15
39
|
_listenToFormUpdates(): void;
|
|
40
|
+
/**
|
|
41
|
+
* Subscribe to store changes to update currency selects when API data arrives
|
|
42
|
+
* This handles the case where the control renders before currency list is loaded
|
|
43
|
+
*/
|
|
44
|
+
_subscribeToStoreChanges(): void;
|
|
16
45
|
}
|
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Main Recommendation Block Control
|
|
3
|
+
*
|
|
4
|
+
* This is a coordinator control that composes all recommendation configuration
|
|
5
|
+
* sub-controls into a single settings panel. It handles:
|
|
6
|
+
* - Initial API data fetching
|
|
7
|
+
* - Store subscriptions for product refresh
|
|
8
|
+
* - Coordinating lifecycle of sub-controls
|
|
9
|
+
*
|
|
10
|
+
* Sub-controls are also exported individually for flexibility:
|
|
11
|
+
* - AlgorithmControl: Strategy and product IDs
|
|
12
|
+
* - LocaleControl: Language selection
|
|
13
|
+
* - CurrencyControl: Currency formatting settings
|
|
14
|
+
* - ProductLayoutControl: Product count and grid layout
|
|
15
|
+
* - FiltersControl: Filter selection
|
|
16
|
+
* - ShuffleControl: Product shuffle toggle
|
|
17
|
+
*/
|
|
18
|
+
import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
1
19
|
import { CommonControl } from '../../../common-control';
|
|
2
20
|
import { AlgorithmControl, ALGORITHM_CONTROL_ID } from './algorithm';
|
|
3
21
|
import { CurrencyControl, CURRENCY_CONTROL_ID } from './currency';
|
|
@@ -24,6 +42,7 @@ export declare class RecommendationBlockControl extends CommonControl {
|
|
|
24
42
|
getId(): string;
|
|
25
43
|
getTemplate(): string;
|
|
26
44
|
onRender(): Promise<void>;
|
|
45
|
+
onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
|
|
27
46
|
onDestroy(): void;
|
|
28
47
|
/**
|
|
29
48
|
* Initialize all sub-controls with the shared API context
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Locale Selection Control
|
|
3
|
+
*
|
|
4
|
+
* Handles locale/language selection for recommendation products.
|
|
5
|
+
* Configuration is stored via node config (persists with template).
|
|
6
|
+
* Language options are fetched from API and cached in Pinia store.
|
|
7
|
+
*/
|
|
8
|
+
import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
1
9
|
import { CommonControl } from '../../../common-control';
|
|
2
10
|
export declare const LOCALE_CONTROL_ID = "recommendation-locale-control";
|
|
3
11
|
/**
|
|
@@ -8,6 +16,7 @@ export declare class LocaleControl extends CommonControl {
|
|
|
8
16
|
getId(): string;
|
|
9
17
|
getTemplate(): string;
|
|
10
18
|
onRender(): void;
|
|
19
|
+
onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
|
|
11
20
|
_setFormValues(): void;
|
|
12
21
|
_initializeSelectItems(): void;
|
|
13
22
|
_onLocaleChange(value: string): void;
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
* - Number of products to show
|
|
6
6
|
* - Products per row (hidden for horizontal layout)
|
|
7
7
|
* - Triggers product row regeneration on changes
|
|
8
|
+
*
|
|
9
|
+
* Configuration is stored via node config (persists with template).
|
|
8
10
|
*/
|
|
9
11
|
import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
10
12
|
import { CommonControl } from '../../../common-control';
|
|
@@ -21,11 +23,10 @@ export declare class ProductLayoutControl extends CommonControl {
|
|
|
21
23
|
onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
|
|
22
24
|
onDestroy(): void;
|
|
23
25
|
_setFormValues(): void;
|
|
24
|
-
_initializeCounterValues(): void;
|
|
25
26
|
/**
|
|
26
27
|
* Updates "Products in One Row" visibility based on layout orientation
|
|
27
28
|
* This control is hidden for horizontal layout (products always take full width)
|
|
28
|
-
* Reads from
|
|
29
|
+
* Reads from node config first, falls back to DOM
|
|
29
30
|
*/
|
|
30
31
|
_updateProductsInRowVisibility(): void;
|
|
31
32
|
_onProductCountChange(value: string): void;
|
|
@@ -35,6 +36,7 @@ export declare class ProductLayoutControl extends CommonControl {
|
|
|
35
36
|
_listenToFormUpdates(): void;
|
|
36
37
|
/**
|
|
37
38
|
* Subscribe to store changes to update visibility when layout changes
|
|
39
|
+
* This is still needed because layout changes come from LayoutControl
|
|
38
40
|
*/
|
|
39
41
|
_listenStateUpdates(): void;
|
|
40
42
|
}
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shuffle Products Control
|
|
3
|
+
*
|
|
4
|
+
* Handles the toggle for shuffling/randomizing recommended products.
|
|
5
|
+
* Configuration is stored via node config (persists with template).
|
|
6
|
+
*/
|
|
7
|
+
import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
1
8
|
import { CommonControl } from '../../../common-control';
|
|
2
9
|
export declare const SHUFFLE_CONTROL_ID = "recommendation-shuffle-control";
|
|
3
10
|
/**
|
|
@@ -8,6 +15,7 @@ export declare class ShuffleControl extends CommonControl {
|
|
|
8
15
|
getId(): string;
|
|
9
16
|
getTemplate(): string;
|
|
10
17
|
onRender(): void;
|
|
18
|
+
onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
|
|
11
19
|
_setFormValues(): void;
|
|
12
20
|
_initializeToggle(): void;
|
|
13
21
|
_onShuffleChange(value: boolean): void;
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
* - Product row regeneration
|
|
8
8
|
* - Spacing reapplication
|
|
9
9
|
*/
|
|
10
|
+
import type { CurrencyConfig } from '../../types/nodeConfig';
|
|
10
11
|
import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
11
12
|
import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
|
|
12
13
|
import { type Orientation } from '../../templates';
|
|
@@ -78,4 +79,22 @@ export interface ApplyCardBackgroundColorOptions {
|
|
|
78
79
|
* @param options - Configuration options
|
|
79
80
|
*/
|
|
80
81
|
export declare function applyCardBackgroundColor(options: ApplyCardBackgroundColorOptions): void;
|
|
82
|
+
export interface SetCurrencyAttributesOptions {
|
|
83
|
+
currentNode: ImmutableHtmlNode | null | undefined;
|
|
84
|
+
documentModifier: DocumentModifier;
|
|
85
|
+
currency: CurrencyConfig;
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Sets currency configuration as HTML attributes on the block element
|
|
89
|
+
* These attributes are read by the HTML compiler at runtime to format prices
|
|
90
|
+
* @param options - Configuration options
|
|
91
|
+
*/
|
|
92
|
+
export declare function setCurrencyAttributes(options: SetCurrencyAttributesOptions): void;
|
|
93
|
+
/**
|
|
94
|
+
* Reads currency configuration from block HTML attributes
|
|
95
|
+
* Used to restore settings when loading a template
|
|
96
|
+
* @param currentNode - The current template node
|
|
97
|
+
* @returns CurrencyConfig or null if attributes not found
|
|
98
|
+
*/
|
|
99
|
+
export declare function getCurrencyAttributesFromBlock(currentNode: ImmutableHtmlNode | null | undefined): Partial<CurrencyConfig> | null;
|
|
81
100
|
export {};
|
|
@@ -1,3 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Spacing Control
|
|
3
|
+
*
|
|
4
|
+
* Manages spacing between product cards:
|
|
5
|
+
* - Column spacing: horizontal gap between cards in the same row
|
|
6
|
+
* - Row spacing: vertical gap between different rows
|
|
7
|
+
*
|
|
8
|
+
* Configuration is stored via node config (persists with template).
|
|
9
|
+
* Actual spacing is applied to DOM elements via inline styles.
|
|
10
|
+
*/
|
|
1
11
|
import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
2
12
|
import { CommonControl } from '../../../common-control';
|
|
3
13
|
export declare const SPACING_CONTROL_ID = "recommendation-spacing-control";
|
|
@@ -13,14 +23,15 @@ export declare class SpacingControl extends CommonControl {
|
|
|
13
23
|
getTemplate(): string;
|
|
14
24
|
onRender(): void;
|
|
15
25
|
onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
|
|
26
|
+
onDestroy(): void;
|
|
16
27
|
/**
|
|
17
28
|
* Updates column spacing visibility based on layout orientation
|
|
18
29
|
* Column spacing is hidden for horizontal layout (products are stacked vertically)
|
|
19
|
-
* Reads from
|
|
30
|
+
* Reads from node config first, falls back to store then DOM
|
|
20
31
|
*/
|
|
21
32
|
_updateColumnSpacingVisibility(): void;
|
|
22
33
|
/**
|
|
23
|
-
* Reads spacing values from
|
|
34
|
+
* Reads spacing values from node config first, falls back to DOM styles
|
|
24
35
|
*/
|
|
25
36
|
_setFormValues(): void;
|
|
26
37
|
/**
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Recommendation Config Service
|
|
3
|
+
*
|
|
4
|
+
* Service for managing Recommendation block configuration via Stripo's node config API.
|
|
5
|
+
* This replaces the Pinia store for persistent configuration data.
|
|
6
|
+
*
|
|
7
|
+
* Key features:
|
|
8
|
+
* - Reads/writes config to/from node using `getNodeConfig`/`setNodeConfig`
|
|
9
|
+
* - Configuration persists with the template HTML
|
|
10
|
+
* - Each block has independent configuration (no global state)
|
|
11
|
+
* - Integrates with Stripo's undo/redo via `ModificationDescription`
|
|
12
|
+
*
|
|
13
|
+
* Usage pattern similar to legacy `blockConfigurationService`:
|
|
14
|
+
* @example
|
|
15
|
+
* // Read config
|
|
16
|
+
* const config = RecommendationConfigService.getConfig(node);
|
|
17
|
+
* // Update config
|
|
18
|
+
* RecommendationConfigService.updateConfig(api, node, { strategy: 'mostPopular' }, 'Changed algorithm');
|
|
19
|
+
* @see https://plugin.stripo.email/extensions/reference/blocks/Block
|
|
20
|
+
*/
|
|
21
|
+
import type { RecommendationNodeConfig, PartialNodeConfig } from '../types/nodeConfig';
|
|
22
|
+
import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
23
|
+
import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
|
|
24
|
+
/**
|
|
25
|
+
* Stripo Extension API interface for document modifications
|
|
26
|
+
* Extracted to allow type-safe usage without importing full Stripo types
|
|
27
|
+
*/
|
|
28
|
+
interface DocumentModifier {
|
|
29
|
+
modifyHtml: (node: ImmutableHtmlNode) => {
|
|
30
|
+
setNodeConfig: (config: Record<string, unknown>) => DocumentModifier;
|
|
31
|
+
setAttribute: (name: string, value: string) => DocumentModifier;
|
|
32
|
+
setStyle: (prop: string, value: string) => DocumentModifier;
|
|
33
|
+
setInnerHtml: (html: string) => DocumentModifier;
|
|
34
|
+
};
|
|
35
|
+
apply: (desc: ModificationDescription) => void;
|
|
36
|
+
}
|
|
37
|
+
interface DocumentModifierApi {
|
|
38
|
+
getDocumentModifier: () => DocumentModifier;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Service for managing Recommendation block configuration
|
|
42
|
+
*
|
|
43
|
+
* All methods are static for easy usage without instantiation.
|
|
44
|
+
* The service follows the same patterns as the legacy `blockConfigurationService`.
|
|
45
|
+
*/
|
|
46
|
+
export declare class RecommendationConfigService {
|
|
47
|
+
/**
|
|
48
|
+
* Get configuration from a node, with defaults for missing values
|
|
49
|
+
*
|
|
50
|
+
* This is the primary way to read configuration from a block.
|
|
51
|
+
* Always returns a complete config object with defaults merged in.
|
|
52
|
+
* @example
|
|
53
|
+
* const config = RecommendationConfigService.getConfig(this.currentNode);
|
|
54
|
+
* console.log(config.strategy); // 'mostPopular'
|
|
55
|
+
* @param node - The immutable HTML node to read config from
|
|
56
|
+
* @returns Complete configuration with defaults for missing values
|
|
57
|
+
*/
|
|
58
|
+
static getConfig(node: ImmutableHtmlNode | null | undefined): RecommendationNodeConfig;
|
|
59
|
+
/**
|
|
60
|
+
* Check if a node has valid configuration stored
|
|
61
|
+
*
|
|
62
|
+
* Used for migration detection - returns false for legacy templates
|
|
63
|
+
* that need their configuration migrated.
|
|
64
|
+
* @param node - The immutable HTML node to check
|
|
65
|
+
* @returns True if node has valid config with version number
|
|
66
|
+
*/
|
|
67
|
+
static hasConfig(node: ImmutableHtmlNode | null | undefined): boolean;
|
|
68
|
+
/**
|
|
69
|
+
* Get the configuration version from a node
|
|
70
|
+
* @param node - The immutable HTML node to check
|
|
71
|
+
* @returns Config version number, or 0 if no config exists
|
|
72
|
+
*/
|
|
73
|
+
static getConfigVersion(node: ImmutableHtmlNode | null | undefined): number;
|
|
74
|
+
/**
|
|
75
|
+
* Update specific configuration values
|
|
76
|
+
*
|
|
77
|
+
* Merges the updates with existing config and persists to node.
|
|
78
|
+
* This is the primary way to update configuration from controls.
|
|
79
|
+
* @example
|
|
80
|
+
* RecommendationConfigService.updateConfig(
|
|
81
|
+
* this.api,
|
|
82
|
+
* this.currentNode,
|
|
83
|
+
* { strategy: 'complementaryItems' },
|
|
84
|
+
* 'Changed recommendation algorithm'
|
|
85
|
+
* );
|
|
86
|
+
* @param api - Stripo extension API with document modifier
|
|
87
|
+
* @param node - The immutable HTML node to update
|
|
88
|
+
* @param updates - Partial config with values to update
|
|
89
|
+
* @param description - Human-readable description for undo/redo
|
|
90
|
+
* @returns The new complete configuration
|
|
91
|
+
*/
|
|
92
|
+
static updateConfig(api: DocumentModifierApi, node: ImmutableHtmlNode, updates: PartialNodeConfig, description: string): RecommendationNodeConfig;
|
|
93
|
+
/**
|
|
94
|
+
* Initialize configuration for a new block
|
|
95
|
+
*
|
|
96
|
+
* Called when a block is first created (dropped into template).
|
|
97
|
+
* Can optionally merge in partial config from migration.
|
|
98
|
+
* @example
|
|
99
|
+
* // In Block.onCreated lifecycle
|
|
100
|
+
* RecommendationConfigService.initializeConfig(this.api, node);
|
|
101
|
+
* @param api - Stripo extension API with document modifier
|
|
102
|
+
* @param node - The immutable HTML node to initialize
|
|
103
|
+
* @param partialConfig - Optional partial config to merge with defaults
|
|
104
|
+
* @returns The initialized configuration
|
|
105
|
+
*/
|
|
106
|
+
static initializeConfig(api: DocumentModifierApi, node: ImmutableHtmlNode, partialConfig?: PartialNodeConfig): RecommendationNodeConfig;
|
|
107
|
+
/**
|
|
108
|
+
* Save complete configuration to a node
|
|
109
|
+
*
|
|
110
|
+
* Low-level method - prefer `updateConfig` or `initializeConfig` in most cases.
|
|
111
|
+
* @param api - Stripo extension API with document modifier
|
|
112
|
+
* @param node - The immutable HTML node to save to
|
|
113
|
+
* @param config - Complete configuration to save
|
|
114
|
+
* @param description - Human-readable description for undo/redo
|
|
115
|
+
*/
|
|
116
|
+
static saveConfig(api: DocumentModifierApi, node: ImmutableHtmlNode, config: RecommendationNodeConfig, description: string): void;
|
|
117
|
+
/**
|
|
118
|
+
* Migrate configuration from legacy data-attributes
|
|
119
|
+
*
|
|
120
|
+
* Reads existing data-attributes and creates a proper node config.
|
|
121
|
+
* Used when loading templates created before node config was implemented.
|
|
122
|
+
* @param api - Stripo extension API with document modifier
|
|
123
|
+
* @param node - The block node to migrate
|
|
124
|
+
* @returns The migrated configuration
|
|
125
|
+
*/
|
|
126
|
+
static migrateFromDataAttributes(api: DocumentModifierApi, node: ImmutableHtmlNode): RecommendationNodeConfig;
|
|
127
|
+
/**
|
|
128
|
+
* Check if configuration needs migration
|
|
129
|
+
* @param node - The block node to check
|
|
130
|
+
* @returns True if migration is needed
|
|
131
|
+
*/
|
|
132
|
+
static needsMigration(node: ImmutableHtmlNode | null | undefined): boolean;
|
|
133
|
+
/**
|
|
134
|
+
* Clone default config to avoid mutations
|
|
135
|
+
*/
|
|
136
|
+
private static cloneDefaults;
|
|
137
|
+
/**
|
|
138
|
+
* Merge partial config with defaults
|
|
139
|
+
*
|
|
140
|
+
* Deep merges nested objects like currency, omnibus settings.
|
|
141
|
+
*/
|
|
142
|
+
private static mergeWithDefaults;
|
|
143
|
+
/**
|
|
144
|
+
* Deep merge for nested objects
|
|
145
|
+
*
|
|
146
|
+
* Recursively merges source into target, preserving existing values
|
|
147
|
+
* that aren't explicitly overwritten.
|
|
148
|
+
*/
|
|
149
|
+
private static deepMerge;
|
|
150
|
+
}
|
|
151
|
+
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Orientation, Languages, Currency, NumericSeparator, FiltersResponse, Filter, RecommendationProduct } from '@@/Types/recommendation';
|
|
2
2
|
interface StoreState {
|
|
3
|
+
/** Maps campaign URLs for recommendation blocks. Used by templateLibraryApi when saving templates. */
|
|
3
4
|
recommendationCampaignUrls: Record<string, string>;
|
|
4
5
|
recommendationConfigs: {
|
|
5
6
|
cardsInRow: number;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Recommendation Extension Types
|
|
3
|
+
*
|
|
4
|
+
* This module re-exports all type definitions for the Recommendation extension.
|
|
5
|
+
*/
|
|
6
|
+
export type { RecommendationNodeConfig, CurrencyConfig, OmnibusTextConfig, PartialNodeConfig, DeepPartialNodeConfig, } from './nodeConfig';
|
|
7
|
+
export { isValidNodeConfig, hasMinimalConfig, } from './nodeConfig';
|