@searchspring/snap-preact-components 0.58.1 → 0.58.3
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/cjs/components/Molecules/Grid/Grid.js +5 -5
- package/dist/cjs/components/Molecules/List/List.js +4 -4
- package/dist/cjs/components/Molecules/Swatches/Swatches.js +5 -5
- package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts +1 -0
- package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js +15 -12
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +4 -0
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +1 -1
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +8 -3
- package/dist/esm/components/Molecules/Grid/Grid.js +1 -1
- package/dist/esm/components/Molecules/List/List.js +1 -1
- package/dist/esm/components/Molecules/Swatches/Swatches.js +1 -1
- package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts +1 -0
- package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
- package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js +15 -12
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +4 -0
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +1 -1
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +11 -3
- package/package.json +11 -11
|
@@ -29,8 +29,8 @@ var preact_1 = require("preact");
|
|
|
29
29
|
var react_1 = require("@emotion/react");
|
|
30
30
|
var classnames_1 = __importDefault(require("classnames"));
|
|
31
31
|
var providers_1 = require("../../../providers");
|
|
32
|
-
var
|
|
33
|
-
var
|
|
32
|
+
var hooks_1 = require("preact/hooks");
|
|
33
|
+
var hooks_2 = require("../../../hooks");
|
|
34
34
|
var Image_1 = require("../../Atoms/Image");
|
|
35
35
|
var utilities_1 = require("../../../utilities");
|
|
36
36
|
var snap_toolbox_1 = require("@searchspring/snap-toolbox");
|
|
@@ -155,7 +155,7 @@ function Grid(properties) {
|
|
|
155
155
|
selected = [selected];
|
|
156
156
|
}
|
|
157
157
|
// selection state
|
|
158
|
-
var _e = (0,
|
|
158
|
+
var _e = (0, hooks_1.useState)(selected || []), selection = _e[0], setSelection = _e[1];
|
|
159
159
|
var makeSelection = function (e, option) {
|
|
160
160
|
if (multiSelect) {
|
|
161
161
|
var newArray = void 0;
|
|
@@ -180,7 +180,7 @@ function Grid(properties) {
|
|
|
180
180
|
};
|
|
181
181
|
var limit = rows && columns ? columns * rows : options.length;
|
|
182
182
|
var remainder = Math.max(0, options.length - (limit - (overflowButtonInGrid ? 1 : 0)));
|
|
183
|
-
var _f = (0,
|
|
183
|
+
var _f = (0, hooks_1.useState)(remainder), limited = _f[0], setLimited = _f[1];
|
|
184
184
|
var OverflowButtonElem = function () {
|
|
185
185
|
var showButton = hideShowLess ? (!limited ? false : true) : true;
|
|
186
186
|
return showButton && remainder > 0 && options.length !== limit ? ((0, react_1.jsx)("div", { className: "ss__grid__show-more-wrapper ".concat(overflowButtonInGrid ? 'ss__grid__option' : ''), onClick: function (e) {
|
|
@@ -199,7 +199,7 @@ function Grid(properties) {
|
|
|
199
199
|
'ss__grid__option--selected': selected,
|
|
200
200
|
'ss__grid__option--disabled': option === null || option === void 0 ? void 0 : option.disabled,
|
|
201
201
|
'ss__grid__option--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
|
|
202
|
-
}), style: { background: option.background ? option.background : option.backgroundImageUrl ? undefined : option.value }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, ref: function (e) { return (0,
|
|
202
|
+
}), style: { background: option.background ? option.background : option.backgroundImageUrl ? undefined : option.value }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, ref: function (e) { return (0, hooks_2.useA11y)(e); }, title: option.label, role: "option", "aria-selected": selected },
|
|
203
203
|
!option.background && option.backgroundImageUrl ? ((0, react_1.jsx)(Image_1.Image, __assign({}, subProps.image, { src: option.backgroundImageUrl, alt: option.label || option.value.toString() }))) : ((0, react_1.jsx)(preact_1.Fragment, null)),
|
|
204
204
|
!hideLabels ? (0, react_1.jsx)("label", { className: "ss__grid__option__label" }, option.label || option.value) : (0, react_1.jsx)(preact_1.Fragment, null)));
|
|
205
205
|
}
|
|
@@ -30,9 +30,9 @@ var react_1 = require("@emotion/react");
|
|
|
30
30
|
var classnames_1 = __importDefault(require("classnames"));
|
|
31
31
|
var providers_1 = require("../../../providers");
|
|
32
32
|
var utilities_1 = require("../../../utilities");
|
|
33
|
-
var
|
|
33
|
+
var hooks_1 = require("preact/hooks");
|
|
34
34
|
var Checkbox_1 = require("../Checkbox");
|
|
35
|
-
var
|
|
35
|
+
var hooks_2 = require("../../../hooks");
|
|
36
36
|
var Icon_1 = require("../../Atoms/Icon");
|
|
37
37
|
var snap_toolbox_1 = require("@searchspring/snap-toolbox");
|
|
38
38
|
var CSS = {
|
|
@@ -112,7 +112,7 @@ function List(properties) {
|
|
|
112
112
|
selected = [selected];
|
|
113
113
|
}
|
|
114
114
|
// selection state
|
|
115
|
-
var _d = (0,
|
|
115
|
+
var _d = (0, hooks_1.useState)(selected || []), selection = _d[0], setSelection = _d[1];
|
|
116
116
|
var makeSelection = function (e, option) {
|
|
117
117
|
var newArray;
|
|
118
118
|
if (multiSelect) {
|
|
@@ -149,7 +149,7 @@ function List(properties) {
|
|
|
149
149
|
'ss__list__option--selected': selected,
|
|
150
150
|
'ss__list__option--disabled': option === null || option === void 0 ? void 0 : option.disabled,
|
|
151
151
|
'ss__list__option--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
|
|
152
|
-
}), ref: function (e) { return (0,
|
|
152
|
+
}), ref: function (e) { return (0, hooks_2.useA11y)(e); }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, title: option.label, role: "option", "aria-selected": selected },
|
|
153
153
|
!hideOptionCheckboxes && (0, react_1.jsx)(Checkbox_1.Checkbox, __assign({}, subProps.checkbox, { checked: selected, disableA11y: true })),
|
|
154
154
|
option.icon && !hideOptionIcons && ((0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof option.icon == 'string' ? { icon: option.icon } : option.icon)))),
|
|
155
155
|
!hideOptionLabels && (option.label || !option.icon) && ((0, react_1.jsx)("label", { className: "ss__list__option__label" }, option.label || option.value))));
|
|
@@ -20,8 +20,8 @@ var preact_1 = require("preact");
|
|
|
20
20
|
var react_1 = require("@emotion/react");
|
|
21
21
|
var classnames_1 = __importDefault(require("classnames"));
|
|
22
22
|
var providers_1 = require("../../../providers");
|
|
23
|
-
var
|
|
24
|
-
var
|
|
23
|
+
var hooks_1 = require("preact/hooks");
|
|
24
|
+
var hooks_2 = require("../../../hooks");
|
|
25
25
|
var Carousel_1 = require("../Carousel");
|
|
26
26
|
var utilities_1 = require("../../../utilities");
|
|
27
27
|
var Grid_1 = require("../Grid");
|
|
@@ -104,7 +104,7 @@ function Swatches(properties) {
|
|
|
104
104
|
// default props
|
|
105
105
|
type: 'carousel', hideLabels: true }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.swatches), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.swatches);
|
|
106
106
|
var breakpoints = props.breakpoints || (props.type == 'carousel' ? defaultCarouselBreakpoints : {});
|
|
107
|
-
var displaySettings = (0,
|
|
107
|
+
var displaySettings = (0, hooks_2.useDisplaySettings)(breakpoints);
|
|
108
108
|
if (displaySettings && Object.keys(displaySettings).length) {
|
|
109
109
|
var theme_1 = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
|
|
110
110
|
props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme_1 });
|
|
@@ -143,7 +143,7 @@ function Swatches(properties) {
|
|
|
143
143
|
styling.css = [style];
|
|
144
144
|
}
|
|
145
145
|
// selection state
|
|
146
|
-
var _g = (0,
|
|
146
|
+
var _g = (0, hooks_1.useState)(selected || undefined), selection = _g[0], setSelection = _g[1];
|
|
147
147
|
var makeSelection = function (e, option) {
|
|
148
148
|
if (onSelect) {
|
|
149
149
|
onSelect(e, option);
|
|
@@ -158,7 +158,7 @@ function Swatches(properties) {
|
|
|
158
158
|
'ss__swatches__carousel__swatch--selected': selected,
|
|
159
159
|
'ss__swatches__carousel__swatch--disabled': option === null || option === void 0 ? void 0 : option.disabled,
|
|
160
160
|
'ss__swatches__carousel__swatch--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
|
|
161
|
-
}), title: label, style: { background: option.background ? option.background : option.backgroundImageUrl ? "" : option.value }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, ref: function (e) { return (0,
|
|
161
|
+
}), title: label, style: { background: option.background ? option.background : option.backgroundImageUrl ? "" : option.value }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, ref: function (e) { return (0, hooks_2.useA11y)(e); }, role: "option", "aria-selected": selected },
|
|
162
162
|
!option.background && option.backgroundImageUrl ? ((0, react_1.jsx)(Image_1.Image, __assign({}, subProps.image, { src: option.backgroundImageUrl, alt: option.label || option.value.toString() }))) : ((0, react_1.jsx)(preact_1.Fragment, null)),
|
|
163
163
|
!hideLabels && (0, react_1.jsx)("span", { className: "ss__swatches__carousel__swatch__value" }, label || option.value)));
|
|
164
164
|
}))) : ((0, react_1.jsx)(Grid_1.Grid, __assign({}, subProps.grid, { options: options, onSelect: function (e, option) {
|
|
@@ -19,6 +19,7 @@ export interface RecommendationBundleProps extends ComponentProps {
|
|
|
19
19
|
resultComponent?: JSX.Element;
|
|
20
20
|
preselectedCount?: number;
|
|
21
21
|
hideCheckboxes?: boolean;
|
|
22
|
+
hideSeed?: boolean;
|
|
22
23
|
seedText?: string;
|
|
23
24
|
separatorIconSeedOnly?: boolean;
|
|
24
25
|
separatorIcon?: string | Partial<IconProps> | boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAwG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WAidpF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAC/B"}
|
|
@@ -42,7 +42,6 @@ var ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
|
|
|
42
42
|
var ResultTracker_1 = require("../../Trackers/Recommendation/ResultTracker");
|
|
43
43
|
var BundleSelector_1 = require("./BundleSelector");
|
|
44
44
|
var BundleCTA_1 = require("./BundleCTA");
|
|
45
|
-
var react_2 = require("react");
|
|
46
45
|
var CSS = {
|
|
47
46
|
recommendationBundle: function (_a) {
|
|
48
47
|
var slidesPerView = _a.slidesPerView, spaceBetween = _a.spaceBetween, ctaInline = _a.ctaInline, vertical = _a.vertical, separatorIcon = _a.separatorIcon;
|
|
@@ -157,7 +156,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
|
|
|
157
156
|
var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
|
|
158
157
|
props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
|
|
159
158
|
}
|
|
160
|
-
var title = props.title, controller = props.controller, breakpoints = props.breakpoints, results = props.results, carousel = props.carousel, preselectedCount = props.preselectedCount, separatorIcon = props.separatorIcon, hideCheckboxes = props.hideCheckboxes, limit = props.limit, seedText = props.seedText, vertical = props.vertical, onAddToCart = props.onAddToCart, separatorIconSeedOnly = props.separatorIconSeedOnly, resultComponent = props.resultComponent, ctaSlot = props.ctaSlot, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, ctaButtonSuccessTimeout = props.ctaButtonSuccessTimeout, disableStyles = props.disableStyles, ctaIcon = props.ctaIcon, ctaInline = props.ctaInline, style = props.style, className = props.className, additionalProps = __rest(props, ["title", "controller", "breakpoints", "results", "carousel", "preselectedCount", "separatorIcon", "hideCheckboxes", "limit", "seedText", "vertical", "onAddToCart", "separatorIconSeedOnly", "resultComponent", "ctaSlot", "ctaButtonText", "ctaButtonSuccessText", "ctaButtonSuccessTimeout", "disableStyles", "ctaIcon", "ctaInline", "style", "className"]);
|
|
159
|
+
var title = props.title, controller = props.controller, breakpoints = props.breakpoints, results = props.results, carousel = props.carousel, preselectedCount = props.preselectedCount, separatorIcon = props.separatorIcon, hideCheckboxes = props.hideCheckboxes, limit = props.limit, seedText = props.seedText, vertical = props.vertical, onAddToCart = props.onAddToCart, separatorIconSeedOnly = props.separatorIconSeedOnly, resultComponent = props.resultComponent, ctaSlot = props.ctaSlot, hideSeed = props.hideSeed, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, ctaButtonSuccessTimeout = props.ctaButtonSuccessTimeout, disableStyles = props.disableStyles, ctaIcon = props.ctaIcon, ctaInline = props.ctaInline, style = props.style, className = props.className, additionalProps = __rest(props, ["title", "controller", "breakpoints", "results", "carousel", "preselectedCount", "separatorIcon", "hideCheckboxes", "limit", "seedText", "vertical", "onAddToCart", "separatorIconSeedOnly", "resultComponent", "ctaSlot", "hideSeed", "ctaButtonText", "ctaButtonSuccessText", "ctaButtonSuccessTimeout", "disableStyles", "ctaIcon", "ctaInline", "style", "className"]);
|
|
161
160
|
var mergedCarouselProps = __assign({ enabled: true, loop: false, spaceBetween: 10 }, carousel);
|
|
162
161
|
var seedInCarousel = mergedCarouselProps.seedInCarousel, prevButton = mergedCarouselProps.prevButton, nextButton = mergedCarouselProps.nextButton, hideButtons = mergedCarouselProps.hideButtons, loop = mergedCarouselProps.loop, spaceBetween = mergedCarouselProps.spaceBetween, pagination = mergedCarouselProps.pagination;
|
|
163
162
|
var carouselEnabled = mergedCarouselProps.enabled;
|
|
@@ -166,7 +165,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
|
|
|
166
165
|
}
|
|
167
166
|
var resultsToRender = results || ((_d = controller.store) === null || _d === void 0 ? void 0 : _d.results);
|
|
168
167
|
if (limit) {
|
|
169
|
-
resultsToRender = resultsToRender.slice(0, limit);
|
|
168
|
+
resultsToRender = resultsToRender.slice(0, hideSeed ? limit + 1 : limit);
|
|
170
169
|
}
|
|
171
170
|
var cartStore = controller.store.cart;
|
|
172
171
|
if (!cartStore) {
|
|
@@ -209,7 +208,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
|
|
|
209
208
|
var _preSelectedCount = typeof preselectedCount == 'number' ? preselectedCount : carouselEnabled ? slidesPerView : resultsToRender.length;
|
|
210
209
|
//this resets the selected items if the results to render changes
|
|
211
210
|
// so you dont end up with something selected that is no longer rendered
|
|
212
|
-
(0,
|
|
211
|
+
(0, hooks_1.useEffect)(function () {
|
|
213
212
|
cartStore.reset();
|
|
214
213
|
if (_preSelectedCount) {
|
|
215
214
|
resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.forEach(function (result, idx) {
|
|
@@ -295,8 +294,8 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
|
|
|
295
294
|
'ss__recommendation-bundle__wrapper--vertical': vertical,
|
|
296
295
|
}) },
|
|
297
296
|
carouselEnabled ? ((0, react_1.jsx)(preact_1.Fragment, null,
|
|
298
|
-
!seedInCarousel && ((0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
|
|
299
|
-
(0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: seed },
|
|
297
|
+
!seedInCarousel && !hideSeed && ((0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
|
|
298
|
+
(0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: seed, track: { impression: false } },
|
|
300
299
|
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, onCheck: function () { return onProductSelect(seed); }, checked: selectedItems.findIndex(function (item) { return item.id == seed.id; }) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, {
|
|
301
300
|
result: seed,
|
|
302
301
|
seed: true,
|
|
@@ -305,10 +304,12 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
|
|
|
305
304
|
})) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: seed }))))))),
|
|
306
305
|
(0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
|
|
307
306
|
(0, react_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: function () { return setSeedwidth(); } }, subProps.carousel, additionalProps, displaySettings, { ref: carouselRef }), seedInCarousel
|
|
308
|
-
? resultsToRender
|
|
307
|
+
? resultsToRender
|
|
308
|
+
.filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
|
|
309
|
+
.map(function (result, idx) {
|
|
309
310
|
var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
|
|
310
|
-
if (idx == 0) {
|
|
311
|
-
return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
|
|
311
|
+
if (idx == 0 && !hideSeed) {
|
|
312
|
+
return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
|
|
312
313
|
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: true, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
|
|
313
314
|
}
|
|
314
315
|
else {
|
|
@@ -322,10 +323,12 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
|
|
|
322
323
|
var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
|
|
323
324
|
return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
|
|
324
325
|
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == results.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: false, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
|
|
325
|
-
}))))) : (resultsToRender
|
|
326
|
+
}))))) : (resultsToRender
|
|
327
|
+
.filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
|
|
328
|
+
.map(function (result, idx) {
|
|
326
329
|
var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
|
|
327
|
-
if (idx == 0) {
|
|
328
|
-
return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
|
|
330
|
+
if (idx == 0 && !hideSeed) {
|
|
331
|
+
return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
|
|
329
332
|
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: true, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
|
|
330
333
|
}
|
|
331
334
|
else {
|
package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts
CHANGED
|
@@ -7,5 +7,9 @@ export interface RecommendationResultTrackerProps extends ComponentProps {
|
|
|
7
7
|
children: any;
|
|
8
8
|
result: Product;
|
|
9
9
|
controller: RecommendationController;
|
|
10
|
+
track?: {
|
|
11
|
+
impression?: boolean;
|
|
12
|
+
click?: boolean;
|
|
13
|
+
};
|
|
10
14
|
}
|
|
11
15
|
//# sourceMappingURL=RecommendationResultTracker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RecommendationResultTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,eAAO,MAAM,2BAA2B,eAAyB,gCAAgC,KAAG,
|
|
1
|
+
{"version":3,"file":"RecommendationResultTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,eAAO,MAAM,2BAA2B,eAAyB,gCAAgC,KAAG,WAwDlG,CAAC;AAEH,MAAM,WAAW,gCAAiC,SAAQ,cAAc;IACvE,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,wBAAwB,CAAC;IACrC,KAAK,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
|
package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js
CHANGED
|
@@ -27,15 +27,20 @@ var CSS = {
|
|
|
27
27
|
exports.RecommendationResultTracker = (0, mobx_react_1.observer)(function (properties) {
|
|
28
28
|
var _a, _b, _c;
|
|
29
29
|
var globalTheme = (0, providers_1.useTheme)();
|
|
30
|
+
var defaultTrack = {
|
|
31
|
+
impression: true,
|
|
32
|
+
click: true,
|
|
33
|
+
};
|
|
30
34
|
var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.RecommendationResultTracker), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.RecommendationResultTracker);
|
|
31
|
-
var children = props.children, result = props.result, controller = props.controller, className = props.className, disableStyles = props.disableStyles, style = props.style;
|
|
35
|
+
var children = props.children, result = props.result, track = props.track, controller = props.controller, className = props.className, disableStyles = props.disableStyles, style = props.style;
|
|
36
|
+
var mergedTrack = __assign(__assign({}, defaultTrack), track);
|
|
32
37
|
var resultRef = (0, hooks_1.useRef)(null);
|
|
33
38
|
var resultInViewport = (0, hooks_2.useIntersection)(resultRef, '0px');
|
|
34
39
|
if (!controller.events.render) {
|
|
35
40
|
controller.log.warn('<RecommendationResultTracker> used without <RecommendationProfileTracker>');
|
|
36
41
|
}
|
|
37
42
|
controller.track.product.render(result);
|
|
38
|
-
if (resultInViewport) {
|
|
43
|
+
if (resultInViewport && mergedTrack.impression) {
|
|
39
44
|
// intersection observer can trigger in any random order,
|
|
40
45
|
// so we need to check if profile impression has been sent and send if not.
|
|
41
46
|
if (!controller.events.impression) {
|
|
@@ -50,5 +55,5 @@ exports.RecommendationResultTracker = (0, mobx_react_1.observer)(function (prope
|
|
|
50
55
|
else if (style) {
|
|
51
56
|
styling.css = [style];
|
|
52
57
|
}
|
|
53
|
-
return ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__recommendation-result-tracker', className), onClick: function (e) { return controller.track.product.click(e, result); }, ref: resultRef }, styling), children));
|
|
58
|
+
return ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__recommendation-result-tracker', className), onClick: function (e) { return mergedTrack.click && controller.track.product.click(e, result); }, ref: resultRef }, styling), children));
|
|
54
59
|
});
|
|
@@ -3,7 +3,7 @@ import { Fragment } from 'preact';
|
|
|
3
3
|
import { jsx, css } from '@emotion/react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { useTheme, CacheProvider } from '../../../providers';
|
|
6
|
-
import { useState } from '
|
|
6
|
+
import { useState } from 'preact/hooks';
|
|
7
7
|
import { useA11y } from '../../../hooks';
|
|
8
8
|
import { Image } from '../../Atoms/Image';
|
|
9
9
|
import { cloneWithProps, defined } from '../../../utilities';
|
|
@@ -4,7 +4,7 @@ import { jsx, css } from '@emotion/react';
|
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { useTheme, CacheProvider } from '../../../providers';
|
|
6
6
|
import { defined } from '../../../utilities';
|
|
7
|
-
import { useState } from '
|
|
7
|
+
import { useState } from 'preact/hooks';
|
|
8
8
|
import { Checkbox } from '../Checkbox';
|
|
9
9
|
import { useA11y } from '../../../hooks';
|
|
10
10
|
import { Icon } from '../../Atoms/Icon';
|
|
@@ -3,7 +3,7 @@ import { Fragment } from 'preact';
|
|
|
3
3
|
import { jsx, css } from '@emotion/react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { useTheme, CacheProvider } from '../../../providers';
|
|
6
|
-
import { useState } from '
|
|
6
|
+
import { useState } from 'preact/hooks';
|
|
7
7
|
import { useA11y, useDisplaySettings } from '../../../hooks';
|
|
8
8
|
import { Carousel } from '../Carousel';
|
|
9
9
|
import { defined } from '../../../utilities';
|
|
@@ -19,6 +19,7 @@ export interface RecommendationBundleProps extends ComponentProps {
|
|
|
19
19
|
resultComponent?: JSX.Element;
|
|
20
20
|
preselectedCount?: number;
|
|
21
21
|
hideCheckboxes?: boolean;
|
|
22
|
+
hideSeed?: boolean;
|
|
22
23
|
seedText?: string;
|
|
23
24
|
separatorIconSeedOnly?: boolean;
|
|
24
25
|
separatorIcon?: string | Partial<IconProps> | boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAwG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WAidpF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAC/B"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { Fragment } from 'preact';
|
|
3
3
|
import { jsx, css } from '@emotion/react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
|
-
import { useRef } from 'preact/hooks';
|
|
5
|
+
import { useRef, useEffect } from 'preact/hooks';
|
|
6
6
|
import { observer } from 'mobx-react';
|
|
7
7
|
import deepmerge from 'deepmerge';
|
|
8
8
|
import { Carousel } from '../../Molecules/Carousel';
|
|
@@ -14,7 +14,6 @@ import { RecommendationProfileTracker } from '../../Trackers/Recommendation/Prof
|
|
|
14
14
|
import { RecommendationResultTracker } from '../../Trackers/Recommendation/ResultTracker';
|
|
15
15
|
import { BundleSelector } from './BundleSelector';
|
|
16
16
|
import { BundledCTA } from './BundleCTA';
|
|
17
|
-
import { useEffect } from 'react';
|
|
18
17
|
const CSS = {
|
|
19
18
|
recommendationBundle: ({ slidesPerView, spaceBetween, ctaInline, vertical, separatorIcon }) => css({
|
|
20
19
|
'.ss__recommendation-bundle__wrapper': {
|
|
@@ -144,7 +143,7 @@ export const RecommendationBundle = observer((properties) => {
|
|
|
144
143
|
theme,
|
|
145
144
|
};
|
|
146
145
|
}
|
|
147
|
-
const { title, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, ctaButtonText, ctaButtonSuccessText, ctaButtonSuccessTimeout, disableStyles, ctaIcon, ctaInline, style, className, ...additionalProps } = props;
|
|
146
|
+
const { title, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, hideSeed, ctaButtonText, ctaButtonSuccessText, ctaButtonSuccessTimeout, disableStyles, ctaIcon, ctaInline, style, className, ...additionalProps } = props;
|
|
148
147
|
const mergedCarouselProps = {
|
|
149
148
|
enabled: true,
|
|
150
149
|
loop: false,
|
|
@@ -158,7 +157,7 @@ export const RecommendationBundle = observer((properties) => {
|
|
|
158
157
|
}
|
|
159
158
|
let resultsToRender = results || controller.store?.results;
|
|
160
159
|
if (limit) {
|
|
161
|
-
resultsToRender = resultsToRender.slice(0, limit);
|
|
160
|
+
resultsToRender = resultsToRender.slice(0, hideSeed ? limit + 1 : limit);
|
|
162
161
|
}
|
|
163
162
|
const cartStore = controller.store.cart;
|
|
164
163
|
if (!cartStore) {
|
|
@@ -300,8 +299,8 @@ export const RecommendationBundle = observer((properties) => {
|
|
|
300
299
|
'ss__recommendation-bundle__wrapper--vertical': vertical,
|
|
301
300
|
}) },
|
|
302
301
|
carouselEnabled ? (jsx(Fragment, null,
|
|
303
|
-
!seedInCarousel && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
|
|
304
|
-
jsx(RecommendationResultTracker, { controller: controller, result: seed },
|
|
302
|
+
!seedInCarousel && !hideSeed && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
|
|
303
|
+
jsx(RecommendationResultTracker, { controller: controller, result: seed, track: { impression: false } },
|
|
305
304
|
jsx(BundleSelector, { seedText: seedText, seed: true, onCheck: () => onProductSelect(seed), checked: selectedItems.findIndex((item) => item.id == seed.id) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef }, resultComponent ? (cloneWithProps(resultComponent, {
|
|
306
305
|
result: seed,
|
|
307
306
|
seed: true,
|
|
@@ -310,10 +309,12 @@ export const RecommendationBundle = observer((properties) => {
|
|
|
310
309
|
})) : (jsx(Result, { ...subProps.result, controller: controller, result: seed })))))),
|
|
311
310
|
jsx("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
|
|
312
311
|
jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: () => setSeedwidth(), ...subProps.carousel, ...additionalProps, ...displaySettings, ref: carouselRef }, seedInCarousel
|
|
313
|
-
? resultsToRender
|
|
312
|
+
? resultsToRender
|
|
313
|
+
.filter((result, idx) => (hideSeed && idx == 0 ? false : true))
|
|
314
|
+
.map((result, idx) => {
|
|
314
315
|
const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
|
|
315
|
-
if (idx == 0) {
|
|
316
|
-
return (jsx(RecommendationResultTracker, { controller: controller, result: result },
|
|
316
|
+
if (idx == 0 && !hideSeed) {
|
|
317
|
+
return (jsx(RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
|
|
317
318
|
jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
|
|
318
319
|
}
|
|
319
320
|
else {
|
|
@@ -327,10 +328,12 @@ export const RecommendationBundle = observer((properties) => {
|
|
|
327
328
|
const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
|
|
328
329
|
return (jsx(RecommendationResultTracker, { controller: controller, result: result },
|
|
329
330
|
jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == results.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
|
|
330
|
-
}))))) : (resultsToRender
|
|
331
|
+
}))))) : (resultsToRender
|
|
332
|
+
.filter((result, idx) => (hideSeed && idx == 0 ? false : true))
|
|
333
|
+
.map((result, idx) => {
|
|
331
334
|
const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
|
|
332
|
-
if (idx == 0) {
|
|
333
|
-
return (jsx(RecommendationResultTracker, { controller: controller, result: result },
|
|
335
|
+
if (idx == 0 && !hideSeed) {
|
|
336
|
+
return (jsx(RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
|
|
334
337
|
jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
|
|
335
338
|
}
|
|
336
339
|
else {
|
package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts
CHANGED
|
@@ -7,5 +7,9 @@ export interface RecommendationResultTrackerProps extends ComponentProps {
|
|
|
7
7
|
children: any;
|
|
8
8
|
result: Product;
|
|
9
9
|
controller: RecommendationController;
|
|
10
|
+
track?: {
|
|
11
|
+
impression?: boolean;
|
|
12
|
+
click?: boolean;
|
|
13
|
+
};
|
|
10
14
|
}
|
|
11
15
|
//# sourceMappingURL=RecommendationResultTracker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RecommendationResultTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,eAAO,MAAM,2BAA2B,eAAyB,gCAAgC,KAAG,
|
|
1
|
+
{"version":3,"file":"RecommendationResultTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,eAAO,MAAM,2BAA2B,eAAyB,gCAAgC,KAAG,WAwDlG,CAAC;AAEH,MAAM,WAAW,gCAAiC,SAAQ,cAAc;IACvE,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,wBAAwB,CAAC;IACrC,KAAK,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
|
package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js
CHANGED
|
@@ -9,6 +9,10 @@ const CSS = {
|
|
|
9
9
|
};
|
|
10
10
|
export const RecommendationResultTracker = observer((properties) => {
|
|
11
11
|
const globalTheme = useTheme();
|
|
12
|
+
const defaultTrack = {
|
|
13
|
+
impression: true,
|
|
14
|
+
click: true,
|
|
15
|
+
};
|
|
12
16
|
const props = {
|
|
13
17
|
// default props
|
|
14
18
|
// global theme
|
|
@@ -17,14 +21,18 @@ export const RecommendationResultTracker = observer((properties) => {
|
|
|
17
21
|
...properties,
|
|
18
22
|
...properties.theme?.components?.RecommendationResultTracker,
|
|
19
23
|
};
|
|
20
|
-
const { children, result, controller, className, disableStyles, style } = props;
|
|
24
|
+
const { children, result, track, controller, className, disableStyles, style } = props;
|
|
25
|
+
const mergedTrack = {
|
|
26
|
+
...defaultTrack,
|
|
27
|
+
...track,
|
|
28
|
+
};
|
|
21
29
|
const resultRef = useRef(null);
|
|
22
30
|
const resultInViewport = useIntersection(resultRef, '0px');
|
|
23
31
|
if (!controller.events.render) {
|
|
24
32
|
controller.log.warn('<RecommendationResultTracker> used without <RecommendationProfileTracker>');
|
|
25
33
|
}
|
|
26
34
|
controller.track.product.render(result);
|
|
27
|
-
if (resultInViewport) {
|
|
35
|
+
if (resultInViewport && mergedTrack.impression) {
|
|
28
36
|
// intersection observer can trigger in any random order,
|
|
29
37
|
// so we need to check if profile impression has been sent and send if not.
|
|
30
38
|
if (!controller.events.impression) {
|
|
@@ -39,5 +47,5 @@ export const RecommendationResultTracker = observer((properties) => {
|
|
|
39
47
|
else if (style) {
|
|
40
48
|
styling.css = [style];
|
|
41
49
|
}
|
|
42
|
-
return (jsx("div", { className: classnames('ss__recommendation-result-tracker', className), onClick: (e) => controller.track.product.click(e, result), ref: resultRef, ...styling }, children));
|
|
50
|
+
return (jsx("div", { className: classnames('ss__recommendation-result-tracker', className), onClick: (e) => mergedTrack.click && controller.track.product.click(e, result), ref: resultRef, ...styling }, children));
|
|
43
51
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@searchspring/snap-preact-components",
|
|
3
|
-
"version": "0.58.
|
|
3
|
+
"version": "0.58.3",
|
|
4
4
|
"description": "Snap Preact Component Library",
|
|
5
5
|
"author": "Searchspring",
|
|
6
6
|
"license": "MIT",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@cypress/react": "^8.0.0",
|
|
31
31
|
"@emotion/react": "11.9.0",
|
|
32
|
-
"@searchspring/snap-toolbox": "^0.58.
|
|
32
|
+
"@searchspring/snap-toolbox": "^0.58.3",
|
|
33
33
|
"classnames": "^2.3.2",
|
|
34
34
|
"cypress": "^13.7.1",
|
|
35
35
|
"cypress-wait-until": "^1.7.2",
|
|
@@ -52,14 +52,14 @@
|
|
|
52
52
|
"@babel/preset-env": "^7.21.4",
|
|
53
53
|
"@babel/preset-react": "^7.18.6",
|
|
54
54
|
"@babel/runtime": "^7.21.0",
|
|
55
|
-
"@searchspring/snap-client": "^0.58.
|
|
56
|
-
"@searchspring/snap-controller": "^0.58.
|
|
57
|
-
"@searchspring/snap-event-manager": "^0.58.
|
|
58
|
-
"@searchspring/snap-logger": "^0.58.
|
|
59
|
-
"@searchspring/snap-profiler": "^0.58.
|
|
60
|
-
"@searchspring/snap-store-mobx": "^0.58.
|
|
61
|
-
"@searchspring/snap-tracker": "^0.58.
|
|
62
|
-
"@searchspring/snap-url-manager": "^0.58.
|
|
55
|
+
"@searchspring/snap-client": "^0.58.3",
|
|
56
|
+
"@searchspring/snap-controller": "^0.58.3",
|
|
57
|
+
"@searchspring/snap-event-manager": "^0.58.3",
|
|
58
|
+
"@searchspring/snap-logger": "^0.58.3",
|
|
59
|
+
"@searchspring/snap-profiler": "^0.58.3",
|
|
60
|
+
"@searchspring/snap-store-mobx": "^0.58.3",
|
|
61
|
+
"@searchspring/snap-tracker": "^0.58.3",
|
|
62
|
+
"@searchspring/snap-url-manager": "^0.58.3",
|
|
63
63
|
"@storybook/addon-actions": "6.4.22",
|
|
64
64
|
"@storybook/addon-controls": "6.4.22",
|
|
65
65
|
"@storybook/addon-docs": "6.4.22",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"webpack-merge": "^5.8.0"
|
|
85
85
|
},
|
|
86
86
|
"sideEffects": false,
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "d46572dc3453d97aac5ebc3d6c2d41333539de2e"
|
|
88
88
|
}
|