Skip to content

Commit

Permalink
feat(recommend): add support for event collection in recommend (#6523)
Browse files Browse the repository at this point in the history 
---------

Co-authored-by: Raed <[email protected]>
  • Loading branch information
@marialungu @raed667
marialungu and raed667 authored Jan 15, 2025
1 parent 8e30cd5 commit 2679a5e
Show file tree
Hide file tree
Showing 33 changed files with 322 additions and 85 deletions.
9 changes: 9 additions & 0 deletions packages/instantsearch-ui-components/src/components/Carousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import type {
RecommendItemComponentProps,
RecordWithObjectID,
Renderer,
SendEventForHits,
} from '../types';

export type CarouselProps<
Expand All @@ -28,6 +29,7 @@ export type CarouselProps<
nextIconComponent?: () => JSX.Element;
classNames?: Partial<CarouselClassNames>;
translations?: Partial<CarouselTranslations>;
sendEvent: SendEventForHits;
};

export type CarouselClassNames = {
Expand Down Expand Up @@ -135,6 +137,7 @@ export function createCarouselComponent({ createElement, Fragment }: Renderer) {
nextIconComponent: NextIconComponent = NextIconDefaultComponent,
items,
translations: userTranslations,
sendEvent,
...props
} = userProps;

Expand Down Expand Up @@ -235,6 +238,12 @@ export function createCarouselComponent({ createElement, Fragment }: Renderer) {
className={cx(cssClasses.item)}
aria-roledescription="slide"
aria-label={`${index + 1} of ${items.length}`}
onClick={() => {
sendEvent('click:internal', item, 'Item Clicked');
}}
onAuxClick={() => {
sendEvent('click:internal', item, 'Item Clicked');
}}
>
<ItemComponent item={item} />
</li>
Expand Down
5 changes: 5 additions & 0 deletions packages/instantsearch-ui-components/src/components/__tests__/Carousel.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ describe('Carousel', () => {
test('renders items', () => {
const { container } = render(
<CarouselWithRefs
sendEvent={jest.fn()}
items={[
{
objectID: '1',
Expand Down Expand Up @@ -138,6 +139,7 @@ describe('Carousel', () => {
test('renders custom "Previous" and "Next" components', () => {
const { container } = render(
<CarouselWithRefs
sendEvent={jest.fn()}
items={[
{
objectID: '1',
Expand Down Expand Up @@ -215,6 +217,7 @@ describe('Carousel', () => {
test('accepts custom translations', () => {
const { container } = render(
<CarouselWithRefs
sendEvent={jest.fn()}
items={[{ objectID: '1', __position: 1 }]}
itemComponent={ItemComponent}
translations={{
Expand Down Expand Up @@ -248,6 +251,7 @@ describe('Carousel', () => {
test('forwards `div` props to the root element', () => {
const { container } = render(
<CarouselWithRefs
sendEvent={jest.fn()}
items={[{ objectID: '1', __position: 1 }]}
itemComponent={ItemComponent}
hidden={true}
Expand All @@ -262,6 +266,7 @@ describe('Carousel', () => {
test('accepts custom class names', () => {
const { container } = render(
<CarouselWithRefs
sendEvent={jest.fn()}
items={[{ objectID: '1', __position: 1 }]}
itemComponent={ItemComponent}
classNames={{
Expand Down
8 changes: 6 additions & 2 deletions packages/instantsearch-ui-components/src/components/recommend-shared/List.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,12 @@ export function createListComponent({ createElement }: Renderer) {
<li
key={item.objectID}
className={classNames.item}
onClick={sendEvent}
onAuxClick={sendEvent}
onClick={() => {
sendEvent('click:internal', item, 'Item Clicked');
}}
onAuxClick={() => {
sendEvent('click:internal', item, 'Item Clicked');
}}
>
<ItemComponent item={item} />
</li>
Expand Down
3 changes: 2 additions & 1 deletion packages/instantsearch-ui-components/src/types/Recommend.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,8 @@ export type RecommendInnerComponentProps<TObject> = {

export type RecordWithObjectID<TObject = Record<string, unknown>> = TObject & {
objectID: string;
// @TODO: once events are implemented, this type needs `__position` and `__queryID`
__position: number;
__queryID?: string;
};

export type RecommendItemComponentProps<TObject> = {
Expand Down
41 changes: 37 additions & 4 deletions ...antsearch.js/src/connectors/frequently-bought-together/connectFrequentlyBoughtTogether.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,12 @@ import {
noop,
escapeHits,
TAG_PLACEHOLDER,
createSendEventForHits,
addAbsolutePosition,
addQueryID,
} from '../../lib/utils';

import type { SendEventForHits } from '../../lib/utils';
import type {
Connector,
TransformItems,
Expand All @@ -30,6 +34,11 @@ export type FrequentlyBoughtTogetherRenderState<
* The matched recommendations from Algolia API.
*/
items: Array<AlgoliaHit<THit>>;

/**
* Sends an event to the Insights middleware.
*/
sendEvent: SendEventForHits;
};

export type FrequentlyBoughtTogetherConnectorParams<
Expand Down Expand Up @@ -118,6 +127,8 @@ export default (function connectFrequentlyBoughtTogether<
throw new Error(withUsage('The `objectIDs` option is required.'));
}

let sendEvent: SendEventForHits;

return {
dependsOn: 'recommend',
$$type: 'ais.frequentlyBoughtTogether',
Expand Down Expand Up @@ -148,23 +159,45 @@ export default (function connectFrequentlyBoughtTogether<
return renderState;
},

getWidgetRenderState({ results }) {
getWidgetRenderState({ results, helper, instantSearchInstance }) {
if (!sendEvent) {
sendEvent = createSendEventForHits({
instantSearchInstance,
getIndex: () => helper.getIndex(),
widgetType: this.$$type,
});
}
if (results === null || results === undefined) {
return { items: [], widgetParams };
return { items: [], widgetParams, sendEvent };
}

if (escapeHTML && results.hits.length > 0) {
results.hits = escapeHits(results.hits);
}

const itemsWithAbsolutePosition = addAbsolutePosition(
results.hits,
0,
1
);

const itemsWithAbsolutePositionAndQueryID = addQueryID(
itemsWithAbsolutePosition,
results.queryID
);

const transformedItems = transformItems(
results.hits as Array<AlgoliaHit<THit>>,
itemsWithAbsolutePositionAndQueryID,
{
results: results as RecommendResponse<AlgoliaHit<THit>>,
}
);

return { items: transformedItems, widgetParams };
return {
items: transformedItems,
widgetParams,
sendEvent,
};
},

dispose({ recommendState }) {
Expand Down
44 changes: 39 additions & 5 deletions packages/instantsearch.js/src/connectors/looking-similar/connectLookingSimilar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,12 @@ import {
noop,
escapeHits,
TAG_PLACEHOLDER,
createSendEventForHits,
addAbsolutePosition,
addQueryID,
} from '../../lib/utils';

import type { SendEventForHits } from '../../lib/utils';
import type {
Connector,
TransformItems,
Expand All @@ -30,6 +34,10 @@ export type LookingSimilarRenderState<
* The matched recommendations from the Algolia API.
*/
items: Array<AlgoliaHit<THit>>;
/**
* Sends an event to the Insights middleware.
*/
sendEvent: SendEventForHits;
};

export type LookingSimilarConnectorParams<
Expand Down Expand Up @@ -121,6 +129,8 @@ export default (function connectLookingSimilar<
throw new Error(withUsage('The `objectIDs` option is required.'));
}

let sendEvent: SendEventForHits;

return {
dependsOn: 'recommend',
$$type: 'ais.lookingSimilar',
Expand Down Expand Up @@ -151,20 +161,44 @@ export default (function connectLookingSimilar<
return renderState;
},

getWidgetRenderState({ results }) {
getWidgetRenderState({ results, helper, instantSearchInstance }) {
if (!sendEvent) {
sendEvent = createSendEventForHits({
instantSearchInstance,
getIndex: () => helper.getIndex(),
widgetType: this.$$type,
});
}
if (results === null || results === undefined) {
return { items: [], widgetParams };
return { items: [], widgetParams, sendEvent };
}

if (escapeHTML && results.hits.length > 0) {
results.hits = escapeHits(results.hits);
}

return {
items: transformItems(results.hits as Array<AlgoliaHit<THit>>, {
const itemsWithAbsolutePosition = addAbsolutePosition(
results.hits,
0,
1
);

const itemsWithAbsolutePositionAndQueryID = addQueryID(
itemsWithAbsolutePosition,
results.queryID
);

const transformedItems = transformItems(
itemsWithAbsolutePositionAndQueryID,
{
results: results as RecommendResponse<AlgoliaHit<THit>>,
}),
}
);

return {
items: transformedItems,
widgetParams,
sendEvent,
};
},

Expand Down
45 changes: 40 additions & 5 deletions packages/instantsearch.js/src/connectors/related-products/connectRelatedProducts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,12 @@ import {
noop,
escapeHits,
TAG_PLACEHOLDER,
createSendEventForHits,
addAbsolutePosition,
addQueryID,
} from '../../lib/utils';

import type { SendEventForHits } from '../../lib/utils';
import type {
Connector,
TransformItems,
Expand All @@ -30,6 +34,11 @@ export type RelatedProductsRenderState<
* The matched recommendations from the Algolia API.
*/
items: Array<AlgoliaHit<THit>>;

/**
* Sends an event to the Insights middleware.
*/
sendEvent: SendEventForHits;
};

export type RelatedProductsConnectorParams<
Expand Down Expand Up @@ -121,6 +130,8 @@ export default (function connectRelatedProducts<
throw new Error(withUsage('The `objectIDs` option is required.'));
}

let sendEvent: SendEventForHits;

return {
dependsOn: 'recommend',
$$type: 'ais.relatedProducts',
Expand Down Expand Up @@ -151,20 +162,44 @@ export default (function connectRelatedProducts<
return renderState;
},

getWidgetRenderState({ results }) {
getWidgetRenderState({ results, helper, instantSearchInstance }) {
if (!sendEvent) {
sendEvent = createSendEventForHits({
instantSearchInstance,
getIndex: () => helper.getIndex(),
widgetType: this.$$type,
});
}
if (results === null || results === undefined) {
return { items: [], widgetParams };
return { items: [], widgetParams, sendEvent };
}

if (escapeHTML && results.hits.length > 0) {
results.hits = escapeHits(results.hits);
}

return {
items: transformItems(results.hits as Array<AlgoliaHit<THit>>, {
const itemsWithAbsolutePosition = addAbsolutePosition(
results.hits,
0,
1
);

const itemsWithAbsolutePositionAndQueryID = addQueryID(
itemsWithAbsolutePosition,
results.queryID
);

const transformedItems = transformItems(
itemsWithAbsolutePositionAndQueryID,
{
results: results as RecommendResponse<AlgoliaHit<THit>>,
}),
}
);

return {
items: transformedItems,
widgetParams,
sendEvent,
};
},

Expand Down
Loading

0 comments on commit 2679a5e

Please sign in to comment.