@searchspring/snap-controller 0.64.0 → 0.65.1

package/dist/esm/Search/SearchController.js

@@ -4,6 +4,8 @@ import { AbstractController } from '../Abstract/AbstractController';
 import { StorageStore, ErrorType } from '@searchspring/snap-store-mobx';
 import { getSearchParams } from '../utils/getParams';
 import { ControllerTypes } from '../types';
+const BACKGROUND_FILTER_FIELD_MATCHES = ['collection', 'category', 'categories', 'hierarchy'];
+const BACKGROUND_FILTERS_VALUE_FLAGS = [1, 0, '1', '0', 'true', 'false', true, false];
 const defaultConfig = {
     id: 'search',
     globals: {},
@@ -25,11 +27,16 @@ export class SearchController extends AbstractController {
         super(config, { client, store, urlManager, eventManager, profiler, logger, tracker }, context);
         this.type = ControllerTypes.search;
         this.previousResults = [];
+        this.pageType = 'search';
+        this.events = { product: {} };
         this.track = {
             product: {
-                click: (e, result) => {
+                clickThrough: (e, result) => {
+                    if (this.events.product[result.id]?.clickThrough) {
+                        return;
+                    }
                     const target = e.target;
-                    const resultHref = result.display?.mappings.core?.url || result.mappings.core?.url;
+                    const resultHref = result.display?.mappings.core?.url || result.mappings.core?.url || '';
                     const elemHref = target?.getAttribute('href');
                     // the href that should be used for restoration - if the elemHref contains the resultHref - use resultHref
                     const storedHref = elemHref?.indexOf(resultHref) != -1 ? resultHref : elemHref || resultHref;
@@ -54,17 +61,59 @@ export class SearchController extends AbstractController {
                     }
                     // store position data or empty object
                     this.storage.set('scrollMap', scrollMap);
-                    // track
-                    const { intellisuggestData, intellisuggestSignature } = result.attributes;
-                    const event = this.tracker.track.product.click({
-                        intellisuggestData,
-                        intellisuggestSignature,
-                        href: elemHref || resultHref,
+                    const data = getSearchSchemaData({ params: this.params, store: this.store, results: [result] });
+                    this.tracker.events[this.pageType].clickThrough({ data, siteId: this.config.globals?.siteId });
+                    this.events.product[result.id] = this.events.product[result.id] || {};
+                    this.events.product[result.id].clickThrough = true;
+                    this.eventManager.fire('track.product.clickThrough', { controller: this, event: e, products: [result], trackEvent: data });
+                },
+                click: (e, result) => {
+                    if (result.type === 'banner') {
+                        return;
+                    }
+                    // TODO: closest might be going too far - write own function to only go n levels up - additionally check that href includes result.url
+                    const href = e.target?.getAttribute('href') || e.target?.closest('a')?.getAttribute('href');
+                    if (href) {
+                        this.track.product.clickThrough(e, result);
+                    }
+                    else {
+                        // TODO: in future, send as an interaction event
+                    }
+                },
+                render: (result) => {
+                    if (this.events.product[result.id]?.render) {
+                        return;
+                    }
+                    const data = getSearchSchemaData({ params: this.params, store: this.store, results: [result] });
+                    this.tracker.events[this.pageType].render({ data, siteId: this.config.globals?.siteId });
+                    this.events.product[result.id] = this.events.product[result.id] || {};
+                    this.events.product[result.id].render = true;
+                    this.eventManager.fire('track.product.render', { controller: this, products: [result], trackEvent: data });
+                },
+                impression: (result) => {
+                    if (this.events.product[result.id]?.impression) {
+                        return;
+                    }
+                    const data = getSearchSchemaData({ params: this.params, store: this.store, results: [result] });
+                    this.tracker.events[this.pageType].impression({ data, siteId: this.config.globals?.siteId });
+                    this.events.product[result.id] = this.events.product[result.id] || {};
+                    this.events.product[result.id].impression = true;
+                    this.eventManager.fire('track.product.impression', { controller: this, products: [result], trackEvent: data });
+                },
+                addToCart: (result) => {
+                    const data = getSearchSchemaData({ params: this.params, store: this.store, results: [result] });
+                    this.tracker.events[this.pageType].addToCart({
+                        data,
+                        siteId: this.config.globals?.siteId,
                     });
-                    this.eventManager.fire('track.product.click', { controller: this, event: e, result, trackEvent: event });
-                    return event;
+                    this.eventManager.fire('track.product.addToCart', { controller: this, products: [result], trackEvent: data });
                 },
             },
+            redirect: (redirectURL) => {
+                const data = getSearchRedirectSchemaData({ redirectURL });
+                this.tracker.events.search.redirect({ data, siteId: this.config.globals?.siteId });
+                this.eventManager.fire('track.product.redirect', { controller: this, redirectURL, trackEvent: data });
+            },
         };
         this.search = async () => {
             try {
@@ -72,9 +121,9 @@ export class SearchController extends AbstractController {
                     await this.init();
                 }
                 const params = this.params;
-                if (this.params.search?.query?.string && this.params.search?.query?.string.length) {
+                if (params.search?.query?.string && params.search?.query?.string.length) {
                     // save it to the history store
-                    this.store.history.save(this.params.search.query.string);
+                    this.store.history.save(params.search.query.string);
                 }
                 this.store.loading = true;
                 try {
@@ -154,7 +203,9 @@ export class SearchController extends AbstractController {
                     }
                 }
                 else {
-                    // normal request for next page
+                    // normal request
+                    // reset events for new search
+                    this.events = { product: {} };
                     // clear previousResults to prevent infinite scroll from using them
                     this.previousResults = [];
                     [meta, response] = await this.client.search(params);
@@ -257,6 +308,10 @@ export class SearchController extends AbstractController {
                 this.store.loading = false;
             }
         };
+        this.addToCart = async (product) => {
+            this.track.product.addToCart(product);
+            this.eventManager.fire('addToCart', { controller: this, products: [product] });
+        };
         // deep merge config with defaults
         this.config = deepmerge(defaultConfig, this.config);
         // set restorePosition to be enabled by default when using infinite (if not provided)
@@ -270,6 +325,41 @@ export class SearchController extends AbstractController {
         });
         // set last params to undefined for compare in search
         this.storage.set('lastStringyParams', undefined);
+        this.eventManager.on('beforeSearch', async ({ request }, next) => {
+            // wait for other middleware to resolve
+            await next();
+            if (this.context?.pageType === 'category') {
+                this.pageType = 'category';
+                return;
+            }
+            const req = request;
+            const query = req.search?.query;
+            if (!query) {
+                const hasCategoryBackgroundFilters = req.filters
+                    ?.filter((filter) => filter.background)
+                    .filter((filter) => {
+                    return BACKGROUND_FILTER_FIELD_MATCHES.find((bgFilter) => {
+                        return filter.field?.toLowerCase().includes(bgFilter);
+                    });
+                })
+                    .filter((filter) => {
+                    return BACKGROUND_FILTERS_VALUE_FLAGS.every((flag) => {
+                        switch (filter.type) {
+                            case 'range':
+                                const rangeFilter = filter;
+                                return rangeFilter.value !== flag;
+                            case 'value':
+                            default:
+                                const valueFilter = filter;
+                                return valueFilter.value !== flag;
+                        }
+                    });
+                });
+                if (hasCategoryBackgroundFilters?.length) {
+                    this.pageType = 'category';
+                }
+            }
+        });
         // add 'afterSearch' middleware
         this.eventManager.on('afterSearch', async (search, next) => {
             const config = search.controller.config;
@@ -278,6 +368,7 @@ export class SearchController extends AbstractController {
             if (redirectURL && config?.settings?.redirects?.merchandising && !search?.response?.filters?.length && !searchStore.loaded) {
                 //set loaded to true to prevent infinite search/reloading from happening
                 searchStore.loaded = true;
+                this.track.redirect(redirectURL);
                 window.location.replace(redirectURL);
                 return false;
             }
@@ -393,17 +484,15 @@ export class SearchController extends AbstractController {
         }
         params.tracking = params.tracking || {};
         params.tracking.domain = window.location.href;
-        const userId = this.tracker.getUserId();
+        const { userId, sessionId, pageLoadId, shopperId } = this.tracker.getContext();
         if (userId) {
             params.tracking.userId = userId;
         }
-        const sessionId = this.tracker.getContext().sessionId;
         if (sessionId) {
             params.tracking.sessionId = sessionId;
         }
-        const pageId = this.tracker.getContext().pageLoadId;
-        if (pageId) {
-            params.tracking.pageLoadId = pageId;
+        if (pageLoadId) {
+            params.tracking.pageLoadId = pageLoadId;
         }
         if (!this.config.globals?.personalization?.disabled) {
             const cartItems = this.tracker.cookies.cart.get();
@@ -416,7 +505,6 @@ export class SearchController extends AbstractController {
                 params.personalization = params.personalization || {};
                 params.personalization.lastViewed = lastViewedItems.join(',');
             }
-            const shopperId = this.tracker.getShopperId();
             if (shopperId) {
                 params.personalization = params.personalization || {};
                 params.personalization.shopper = shopperId;
@@ -467,3 +555,69 @@ export function generateHrefSelector(element, href, levels = 7) {
     }
     return;
 }
+function getSearchRedirectSchemaData({ redirectURL }) {
+    return {
+        redirect: redirectURL,
+    };
+}
+function getSearchSchemaData({ params, store, results, }) {
+    const filters = params.filters?.reduce((acc, filter) => {
+        const key = filter.background ? 'bgfilter' : 'filter';
+        acc[key] = acc[key] || [];
+        const value = filter.type === 'range' &&
+            !isNaN(filter.value?.low) &&
+            !isNaN(filter.value?.low)
+            ? [`low=${filter.value?.low}`, `high=${filter.value?.high}`]
+            : [`${filter.value}`];
+        const existing = acc[key].find((item) => item.field === filter.field);
+        if (existing && !existing.value.includes(value[0])) {
+            existing.value.push(...value);
+        }
+        else {
+            acc[key].push({
+                field: filter.field,
+                value,
+            });
+        }
+        return acc;
+    }, {});
+    return {
+        q: params.search?.query?.string || '',
+        correctedQuery: store.search?.originalQuery?.string ? store.search?.query?.string : undefined,
+        ...filters,
+        sort: [
+            {
+                field: store.sorting.current?.field,
+                dir: store.sorting.current?.direction,
+            },
+        ],
+        pagination: {
+            totalResults: store.pagination.totalResults,
+            page: store.pagination.page,
+            resultsPerPage: store.pagination.pageSize,
+        },
+        merchandising: {
+            personalized: store.merchandising.personalized,
+            redirect: store.merchandising.redirect,
+            triggeredCampaigns: (store.merchandising.campaigns?.length &&
+                store.merchandising.campaigns?.map((campaign) => {
+                    const experiement = store.merchandising.experiments.find((experiment) => experiment.campaignId === campaign.id);
+                    return {
+                        id: campaign.id,
+                        experimentId: experiement?.experimentId,
+                        variationId: experiement?.variationId,
+                    };
+                })) ||
+                undefined,
+        },
+        results: results?.map((result) => {
+            const core = result.mappings.core;
+            return {
+                uid: core.uid || '',
+                // childUid: core.uid,
+                sku: core.sku,
+                // childSku: core.sku,
+            };
+        }) || [],
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@searchspring/snap-controller",
-	"version": "0.64.0",
+	"version": "0.65.1",
 	"description": "Snap Controllers",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
@@ -20,22 +20,22 @@
 		"test:watch": "jest --watch"
 	},
 	"dependencies": {
-		"@searchspring/snap-toolbox": "^0.64.0",
+		"@searchspring/snap-toolbox": "^0.65.1",
 		"css.escape": "1.5.1",
 		"deepmerge": "4.3.1"
 	},
 	"devDependencies": {
-		"@searchspring/snap-client": "^0.64.0",
-		"@searchspring/snap-event-manager": "^0.64.0",
-		"@searchspring/snap-logger": "^0.64.0",
-		"@searchspring/snap-profiler": "^0.64.0",
-		"@searchspring/snap-store-mobx": "^0.64.0",
-		"@searchspring/snap-tracker": "^0.64.0",
-		"@searchspring/snap-url-manager": "^0.64.0"
+		"@searchspring/snap-client": "^0.65.1",
+		"@searchspring/snap-event-manager": "^0.65.1",
+		"@searchspring/snap-logger": "^0.65.1",
+		"@searchspring/snap-profiler": "^0.65.1",
+		"@searchspring/snap-store-mobx": "^0.65.1",
+		"@searchspring/snap-tracker": "^0.65.1",
+		"@searchspring/snap-url-manager": "^0.65.1"
 	},
 	"sideEffects": false,
 	"files": [
 		"dist/**/*"
 	],
-	"gitHead": "fc0fb9a2fe535b394a2f0d340a20b2b72ab84bff"
+	"gitHead": "cd33cd87ad8d51302000b31bce6aa90b4b25ba89"
 }