docs(examples): add conversion event in products

Author: francoischalifour

examples/js/app.tsx

@@ -4,7 +4,10 @@ import {
   getAlgoliaHits,
   snippetHit,
 } from '@algolia/autocomplete-js';
-import { createAlgoliaInsightsPlugin } from '@algolia/autocomplete-plugin-algolia-insights';
+import {
+  AutocompleteInsightsApi,
+  createAlgoliaInsightsPlugin,
+} from '@algolia/autocomplete-plugin-algolia-insights';
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
 import { Hit } from '@algolia/client-search';
@@ -20,6 +23,8 @@ type Product = {
   name: string;
   image: string;
   description: string;
+  __autocomplete_indexName: string;
+  __autocomplete_queryID: string;
 };
 type ProductHit = Hit<Product>;
 
@@ -55,7 +60,7 @@ autocomplete({
     recentSearchesPlugin,
     querySuggestionsPlugin,
   ],
-  getSources({ query }) {
+  getSources({ query, state }) {
     if (!query) {
       return [];
     }
@@ -89,7 +94,12 @@ autocomplete({
             );
           },
           item({ item }) {
-            return <ProductItem hit={item} />;
+            return (
+              <ProductItem
+                hit={item}
+                insights={state.context.algoliaInsightsPlugin.insights}
+              />
+            );
           },
           empty() {
             return (
@@ -108,9 +118,10 @@ autocomplete({
 
 type ProductItemProps = {
   hit: ProductHit;
+  insights: AutocompleteInsightsApi;
 };
 
-function ProductItem({ hit }: ProductItemProps) {
+function ProductItem({ hit, insights }: ProductItemProps) {
   return (
     <Fragment>
       <div className="aa-ItemIcon">
@@ -134,6 +145,37 @@ function ProductItem({ hit }: ProductItemProps) {
             <path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"></path>
           </svg>
         </button>
+        <button
+          className="aa-ItemActionButton"
+          type="button"
+          title="Add to cart"
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            insights.convertedObjectIDsAfterSearch({
+              eventName: 'Added to cart',
+              index: hit.__autocomplete_indexName,
+              objectIDs: [hit.objectID],
+              queryID: hit.__autocomplete_queryID,
+            });
+          }}
+        >
+          <svg
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            width="20"
+            height="20"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
+            />
+          </svg>
+        </button>
       </div>
     </Fragment>
   );

packages/autocomplete-plugin-algolia-insights/src/createAlgoliaInsightsPlugin.ts

@@ -10,7 +10,7 @@ import { createViewedEvents } from './createViewedEvents';
 import { isAlgoliaInsightsHit } from './isAlgoliaInsightsHit';
 import {
   AlgoliaInsightsHit,
-  InsightsApi,
+  AutocompleteInsightsApi,
   InsightsClient,
   OnActiveParams,
   OnItemsChangeParams,
@@ -22,7 +22,7 @@ const VIEW_EVENT_DELAY = 400;
 type SendViewedObjectIDsParams = {
   onItemsChange(params: OnItemsChangeParams): void;
   items: AlgoliaInsightsHit[];
-  insights: InsightsApi;
+  insights: AutocompleteInsightsApi;
   state: AutocompleteState<any>;
 };
 

packages/autocomplete-plugin-algolia-insights/src/index.d.ts

@@ -1,9 +1,9 @@
-import { InsightsApi } from './types';
+import { AutocompleteInsightsApi } from './types';
 
 declare module '@algolia/autocomplete-core' {
   export interface AutocompleteContext {
     algoliaInsightsPlugin: {
-      insights: InsightsApi;
+      insights: AutocompleteInsightsApi;
     };
   }
 }

packages/autocomplete-plugin-algolia-insights/src/index.ts

@@ -1 +1,2 @@
+export type { AutocompleteInsightsApi } from './types/AutocompleteInsightsApi';
 export * from './createAlgoliaInsightsPlugin';

packages/autocomplete-plugin-algolia-insights/src/types/InsightsApi.ts renamed to packages/autocomplete-plugin-algolia-insights/src/types/AutocompleteInsightsApi.ts

@@ -1,6 +1,8 @@
 import { createSearchInsightsApi } from '../createSearchInsightsApi';
 
-export type InsightsApi = ReturnType<typeof createSearchInsightsApi>;
+export type AutocompleteInsightsApi = ReturnType<
+  typeof createSearchInsightsApi
+>;
 
 export type ClickedObjectIDsAfterSearchParams = {
   eventName: string;

packages/autocomplete-plugin-algolia-insights/src/types/EventParams.ts

@@ -3,12 +3,12 @@ import { AutocompleteState } from '@algolia/autocomplete-core';
 import {
   ClickedObjectIDsAfterSearchParams,
   ViewedObjectIDsParams,
-} from './InsightsApi';
+} from './AutocompleteInsightsApi';
 
-import { AlgoliaInsightsHit, InsightsApi } from '.';
+import { AlgoliaInsightsHit, AutocompleteInsightsApi } from '.';
 
 export type OnSelectParams = {
-  insights: InsightsApi;
+  insights: AutocompleteInsightsApi;
   insightsEvents: ClickedObjectIDsAfterSearchParams[];
   item: AlgoliaInsightsHit;
   state: AutocompleteState<any>;
@@ -18,7 +18,7 @@ export type OnSelectParams = {
 export type OnActiveParams = OnSelectParams;
 
 export type OnItemsChangeParams = {
-  insights: InsightsApi;
+  insights: AutocompleteInsightsApi;
   insightsEvents: ViewedObjectIDsParams[];
   state: AutocompleteState<any>;
 };

packages/autocomplete-plugin-algolia-insights/src/types/index.ts

@@ -1,4 +1,4 @@
 export * from './AlgoliaInsightsHit';
-export * from './InsightsApi';
-export * from './InsightsClient';
+export * from './AutocompleteInsightsApi';
 export * from './EventParams';
+export * from './InsightsClient';