Merge branch 'dev' into 'main'

Support for multi-catalog and multi-view

See merge request engineering/sm/discovery-connectors/discovery-connector-sdk!6

packages/api-client/src/recommendationWidgetsAPI/types.ts

@@ -27,6 +27,7 @@ export interface WidgetRequestType {
   brSeg?: string;
   segment?: string;
   cdp_segments?: string;
+  view_id?: string;
 }
 
 export interface GetCategoryWidgetRequest extends WidgetRequestType {

packages/frontend/vanilla-js/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file.
 
+## [3.2.0] - 2024-12-03
+
+### Changed
+
+- Support view_id for recommendations and search APIs.
+- Support additional parameters for search and autosuggest APIs.
+- Refactored code to avoid repeated calls to get the global config.
+- Rewritten pixel events listeners using custom events, to support Shopify webpixels implementation.
+- Default pixel events handlers are now packaged separately, so Shopify connectors can implement its own pixel events handlers.
+
+## Fixed
+
+Infinite scroll paging issues (https://bloomreach.atlassian.net/browse/DCONN-79).
+
 ## [3.1.4] - 2024-10-08
 
 ### Changed

packages/frontend/vanilla-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloomreach/discovery-ui-js",
-  "version": "3.1.4",
+  "version": "3.2.0",
   "main": "index.js",
   "type": "module",
   "scripts": {

packages/frontend/vanilla-js/rollup.config.js

@@ -81,7 +81,8 @@ const baseConfig = {
 const inputs = {
   autosuggest: 'src/modules/autosuggest-entry-point.ts',
   category: 'src/modules/category-entry-point.ts',
-  events: 'src/modules/product-events-entry-point.ts',
+  'pixel-events': 'src/modules/pixel-events-entry-point.ts',
+  'product-events': 'src/modules/product-events-entry-point.ts',
   recommendations: 'src/modules/recommendations-entry-point.ts',
   search: 'src/modules/search-entry-point.ts',
 };
@@ -109,7 +110,7 @@ const buildConfigs = Object.keys(inputs).reduce((allConfigs, moduleName) => {
           outputStyle: 'compressed'
         }),
         optimizeLodashImports(),
-        terser()
+        // terser()
       ],
     }
   ];

packages/frontend/vanilla-js/src/listeners/autosuggest/category-link-element.ts

@@ -1,5 +1,6 @@
 import { PARAMETER_NAME_PAGE } from '../../constants';
 import { updateCurrentAutosuggestRequestState } from '../../modules/builders';
+import type { AutosuggestModuleConfig } from '../../types';
 import {
   getAutosuggestResultsContainerElement,
   getAutosuggestSearchInputElement,
@@ -8,7 +9,7 @@ import {
 
 declare const window: any;
 
-function buildCategoryLinkElementClickListener() {
+function buildCategoryLinkElementClickListener(config: AutosuggestModuleConfig) {
   return (event: Event) => {
     event.preventDefault();
     const clickedElement = event.target as HTMLAnchorElement;
@@ -17,7 +18,7 @@ function buildCategoryLinkElementClickListener() {
     if (window.BloomreachModules && window.BloomreachModules.search) {
       updateParameterInUrl(PARAMETER_NAME_PAGE, '1');
       window.BloomreachModules.search.load(categoryId).then(() => {
-        getAutosuggestSearchInputElement().value = clickedElement?.textContent || '';
+        getAutosuggestSearchInputElement(config).value = clickedElement?.textContent || '';
         getAutosuggestResultsContainerElement().innerHTML = '';
         updateCurrentAutosuggestRequestState({ last_template_data: null });
 
@@ -27,12 +28,12 @@ function buildCategoryLinkElementClickListener() {
   };
 }
 
-export function addCategoryLinkElementClickListener() {
+export function addCategoryLinkElementClickListener(config: AutosuggestModuleConfig) {
   getAutosuggestResultsContainerElement()
     .querySelectorAll('.blm-autosuggest__suggestion-term-link--category')
     .forEach((categoryLinkElement) => {
       if (!categoryLinkElement.getAttribute('hasListener')) {
-        categoryLinkElement.addEventListener('click', buildCategoryLinkElementClickListener());
+        categoryLinkElement.addEventListener('click', buildCategoryLinkElementClickListener(config));
         categoryLinkElement.setAttribute('hasListener', 'true');
       }
     });

packages/frontend/vanilla-js/src/listeners/autosuggest/form-element.ts

@@ -1,29 +1,19 @@
-import { findUpElementByTagName, getAutosuggestSearchInputElement } from '../../utils';
+import type { AutosuggestModuleConfig } from '../../types';
+import { getAutosuggestSearchFormElement, getAutosuggestSearchInputElement } from '../../utils';
 
-declare const window: any;
-
-function buildFormElementSubmitListener() {
-  return () => {
-    const searchData = {
-      q: getAutosuggestSearchInputElement().value,
-      catalogs: [{name: 'example_en'}]
-    };
-
-    (window.BrTrk || {})
-      ?.getTracker()
-      ?.logEvent('suggest', 'submit', searchData, {}, true);
-  };
-}
-
-export function addFormElementSubmitListener() {
-  const element = (findUpElementByTagName(
-    getAutosuggestSearchInputElement(),
-    'form'
-  ) as HTMLFormElement);
+export function addFormElementSubmitListener(config: AutosuggestModuleConfig) {
+  const element = getAutosuggestSearchFormElement(config);
   if (element && !element.getAttribute('hasListener')) {
     element.addEventListener(
       'submit',
-      buildFormElementSubmitListener()
+      () => element.dispatchEvent(new CustomEvent('brSuggestSubmit',
+        {
+          bubbles: true,
+          detail: {
+            q: getAutosuggestSearchInputElement(config).value,
+          }
+        }
+      ))
     );
     element.setAttribute('hasListener', 'true');
   }

packages/frontend/vanilla-js/src/listeners/autosuggest/search-input-element.ts

@@ -14,6 +14,7 @@ import {
   findUpElementWithClassName
 } from '../../utils';
 import autosuggestTemplate from '../../templates/autosuggest.ejs';
+import type { AutosuggestModuleConfig } from '../../types';
 
 function buildSearchInputElementBlurListener() {
   return () => {
@@ -53,14 +54,13 @@ function buildSearchInputElementFocusListener() {
   };
 }
 
-function buildSearchInputElementKeyupListener() {
+function buildSearchInputElementKeyupListener(searchInputElement: HTMLElement, config: AutosuggestModuleConfig) {
   return (event: KeyboardEvent) => {
     const query = (event.target as HTMLInputElement).value;
-    const searchInputElement = getAutosuggestSearchInputElement();
 
     if (query.length >= AUTOSUGGEST_MINIMUM_QUERY_LENGTH) {
       searchInputElement.dataset.originalQuery = query;
-      suggest(query).catch(console.error);
+      suggest(query, config).catch(console.error);
     } else {
       getAutosuggestResultsContainerElement().innerHTML = '';
       searchInputElement.dataset.originalQuery = '';
@@ -69,13 +69,12 @@ function buildSearchInputElementKeyupListener() {
   };
 }
 
-function addSearchInputElementBlurListener() {
+function addSearchInputElementBlurListener(element: HTMLElement) {
   if (!document.body.getAttribute('hasMousedownListener')) {
     document.body.addEventListener('mousedown', buildGeneralClickListenerForSearchInputBlur());
     document.body.setAttribute('hasMousedownListener', 'true');
   }
 
-  const element = getAutosuggestSearchInputElement();
   if (!element.getAttribute('hasBlurListener')) {
     element.addEventListener(
       'blur',
@@ -85,8 +84,7 @@ function addSearchInputElementBlurListener() {
   }
 }
 
-function addSearchInputElementFocusListener() {
-  const element = getAutosuggestSearchInputElement();
+function addSearchInputElementFocusListener(element: HTMLElement) {
   if (!element.getAttribute('hasFocusListener')) {
     element.addEventListener(
       'focus',
@@ -96,21 +94,21 @@ function addSearchInputElementFocusListener() {
   }
 }
 
-function addSearchInputElementKeyupListener() {
-  const element = getAutosuggestSearchInputElement();
+function addSearchInputElementKeyupListener(element: HTMLElement, config: AutosuggestModuleConfig) {
   if (!element.getAttribute('hasKeyupListener')) {
 
     element.addEventListener(
       'keyup',
       // @ts-ignore
-      debounce(buildSearchInputElementKeyupListener(), 500) as EventListener
+      debounce(buildSearchInputElementKeyupListener(element, config), 500) as EventListener
     );
     element.setAttribute('hasKeyupListener', 'true');
   }
 }
 
-export function addSearchInputElementListeners() {
-  addSearchInputElementBlurListener();
-  addSearchInputElementFocusListener();
-  addSearchInputElementKeyupListener();
+export function addSearchInputElementListeners(config: AutosuggestModuleConfig) {
+  const element = getAutosuggestSearchInputElement(config);
+  addSearchInputElementBlurListener(element);
+  addSearchInputElementFocusListener(element);
+  addSearchInputElementKeyupListener(element, config);
 }

packages/frontend/vanilla-js/src/listeners/autosuggest/suggestion-term-element.ts

@@ -1,32 +1,23 @@
+import type { AutosuggestModuleConfig } from '../../types';
 import { getAutosuggestResultsContainerElement, getAutosuggestSearchInputElement } from '../../utils';
 
-declare const window: any;
-
-function buildSuggestionTermElementClickListener(suggestionTermElement: HTMLElement) {
-  return () => {
-    const { suggestionText } = suggestionTermElement.dataset;
-    const { originalQuery } = getAutosuggestSearchInputElement().dataset;
-
-    const suggestionData = {
-      aq: originalQuery,
-      q: suggestionText,
-      catalogs: [{name: 'example_en'}]
-    };
-
-    ;(window.BrTrk || {})
-      ?.getTracker()
-      ?.logEvent('suggest', 'click', suggestionData, {}, true);
-  };
-}
-
-export function addSuggestionTermElementClickListener() {
+export function addSuggestionTermElementClickListener(config: AutosuggestModuleConfig) {
   getAutosuggestResultsContainerElement()
     .querySelectorAll('.blm-autosuggest__suggestion-term-link')
     .forEach((suggestionTermElement: HTMLElement) => {
       if (!suggestionTermElement.getAttribute('hasListener')) {
-        suggestionTermElement.addEventListener(
-          'click',
-          buildSuggestionTermElementClickListener(suggestionTermElement)
+        const { suggestionText } = suggestionTermElement.dataset;
+        const { originalQuery } = getAutosuggestSearchInputElement(config).dataset;
+        suggestionTermElement.addEventListener('click', () => suggestionTermElement.dispatchEvent(
+          new CustomEvent('brSuggestClick',
+            {
+              bubbles: true,
+              detail: {
+                aq: originalQuery,
+                q: suggestionText,
+              }
+            }
+          ))
         );
         suggestionTermElement.setAttribute('hasListener', 'true');
       }

packages/frontend/vanilla-js/src/listeners/pixel-events/add-to-cart.ts

@@ -0,0 +1,38 @@
+
+declare const window: any;
+
+export function addCartClickAddEventListener() {
+  document.addEventListener(
+    'brCartClickAdd',
+    (event: CustomEvent) => {
+      event.stopImmediatePropagation();
+      const { prod_id, sku } = event.detail;
+      (window.BrTrk || {})?.getTracker()?.logEvent('cart', 'click-add', {
+        prod_id,
+        sku,
+      });
+    }
+  );
+}
+
+export function addCartWidgetAddEventListener() {
+  document.addEventListener('brCartWidgetAdd', (event: CustomEvent) => {
+    event.stopImmediatePropagation();
+    const { wrid, wid, wty, item_id, wq, sku } = event.detail;
+    const eventData = {
+      wrid,
+      wid,
+      wty,
+      item_id,
+      sku,
+      ...(wq ? { wq } : {}),
+    };
+
+    (window.BrTrk || {})?.getTracker()?.logEvent(
+      'cart',
+      'widget-add',
+      eventData
+    );
+  });
+}
+

packages/frontend/vanilla-js/src/listeners/pixel-events/index.ts

@@ -0,0 +1,6 @@
+export * from './add-to-cart';
+export * from './quickview';
+export * from './search';
+export * from './suggest';
+export * from './widget-click';
+export * from './widget-view';

packages/frontend/vanilla-js/src/listeners/pixel-events/quickview.ts

@@ -0,0 +1,17 @@
+
+declare const window: any;
+
+export function addProductQuickviewEventListener() {
+  document.addEventListener(
+    'brProductQuickview',
+    (event: CustomEvent) => {
+      event.stopImmediatePropagation();
+      const { prod_id, prod_name, sku } = event.detail;
+      (window.BrTrk || {})?.getTracker()?.logEvent('product', 'quickview', {
+        prod_id,
+        prod_name,
+        sku,
+      });
+    }
+  );
+}

packages/frontend/vanilla-js/src/listeners/pixel-events/search.ts

@@ -0,0 +1,14 @@
+declare const window: any;
+
+export function addSearchSubmitEventListener() {
+  document.addEventListener('brSuggestSubmit', (event: CustomEvent) => {
+    event.stopImmediatePropagation();
+    const searchData = {
+      q: event.detail.q,
+    };
+
+    (window.BrTrk || {})
+      ?.getTracker()
+      ?.logEvent('suggest', 'submit', searchData, {}, true);
+  });
+}

packages/frontend/vanilla-js/src/listeners/pixel-events/suggest.ts

@@ -0,0 +1,17 @@
+declare const window: any;
+
+export function addSuggestClickEventListener() {
+  document.addEventListener('brSuggestClick', (event: CustomEvent) => {
+    event.stopImmediatePropagation();
+    const { aq, q } = event.detail;
+
+    const suggestionData = {
+      aq,
+      q,
+    };
+
+    (window.BrTrk || {})
+      ?.getTracker()
+      ?.logEvent('suggest', 'click', suggestionData, {}, true);
+  });
+}

packages/frontend/vanilla-js/src/listeners/pixel-events/widget-click.ts

@@ -0,0 +1,21 @@
+declare const window: any;
+
+export function addWidgetClickEventListener() {
+  document.addEventListener('brWidgetClick', (event: CustomEvent) => {
+    event.stopImmediatePropagation();
+    const { wrid, wid, wty, item_id, wq } = event.detail;
+    const eventData = {
+      wrid,
+      wid,
+      wty,
+      item_id,
+      ...(wq ? { wq } : {}),
+    };
+
+    (window.BrTrk || {})?.getTracker()?.logEvent(
+      'widget',
+      'widget-click',
+      eventData
+    );
+  });
+}