{"_id":"@algolia/js-recommendations","_rev":"157-516bdc4c1aeb70f55816aa6fc1ce3b45","name":"@algolia/js-recommendations","dist-tags":{"latest":"1.0.0-experimental.0","experimental":"1.0.0-experimental.2"},"versions":{"1.0.0-experimental.0":{"name":"@algolia/js-recommendations","version":"1.0.0-experimental.0","author":{"url":"https://www.algolia.com","name":"Algolia, Inc."},"license":"MIT","_id":"@algolia/js-recommendations@1.0.0-experimental.0","maintainers":[{"name":"tomklotz","email":"tomklotz.pro@gmail.com"},{"name":"praagyajoshi","email":"praagya.joshi@gmail.com"},{"name":"shortcuts","email":"clement.vannicatte@algolia.com"},{"name":"plnech","email":"dev@plnech.fr"},{"name":"rasemotte","email":"claire.helme-guizon@algolia.com"},{"name":"thomaslef","email":"thomas.lefevre@algolia.com"},{"name":"lukyvj","email":"lucas.bonomi@gmail.com"},{"name":"sepehrf","email":"sepehr9f@gmail.com"},{"name":"kosai106","email":"kevin@oesterkilde.dk"},{"name":"marielaure","email":"marie-laure.sin@algolia.com"},{"name":"redox","email":"sylvain.utard@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"haroenv","email":"hello@haroen.me"},{"name":"rayrutjes","email":"raymond.rutjes@gmail.com"},{"name":"speedblue","email":"support@algolia.com"},{"name":"jerska","email":"matthieu.dumont@algolia.com"},{"name":"raphi","email":"raphael.daguenet@algolia.com"},{"name":"cbaptiste","email":"coquellebaptiste@gmail.com"},{"name":"ronanlevesque","email":"ronan.levesque@gmail.com"},{"name":"samouss","email":"samuel.vllnt@gmail.com"},{"name":"therealwebby","email":"alex@alexjwebb.com"},{"name":"francoischalifour","email":"francois.chalifour@gmail.com"},{"name":"jonmontane","email":"jon@stratus.one"},{"name":"mikaa123","email":"misokol123@gmail.com"},{"name":"valentindotxyz","email":"valentin@lespolo.com"},{"name":"shipow","email":"shipowlata@gmail.com"},{"name":"tkrugg","email":"contact@ymammar.com"},{"name":"seafoox","email":"seafoox@gmail.com"},{"name":"sylvainh","email":"sylvain.huprelle@algolia.com"},{"name":"clemfromspace","email":"clement.denoix@algolia.com"},{"name":"lorrissaintgenez","email":"lorris.saint-genez@algolia.com"},{"name":"broujo","email":"johann.broudin@gmail.com"},{"name":"marieglr","email":"marie.gillier@algolia.com"},{"name":"e-krebs","email":"emmanuel.krebs@algolia.com"},{"name":"eunjae-lee","email":"karis612@gmail.com"},{"name":"kombucha","email":"vincentlemeunier+npm@gmail.com"},{"name":"h1fra","email":"bodin.samuel@gmail.com"},{"name":"sylvain","email":"sylvain.bellone@gmail.com"},{"name":"crawler-team","email":"support+crawler@algolia.com"},{"name":"amcdaid106","email":"aoife.mcdaid@gmail.com"},{"name":"devinalgolia","email":"devin@algolia.com"},{"name":"dispix","email":"me@dispix.net"},{"name":"jvenezia","email":"veneziajeremy@gmail.com"},{"name":"otomatik","email":"thomas.dalous@gmail.com"},{"name":"julienbourdeau","email":"julien@sigerr.ch"},{"name":"sophiem03","email":"manley.sophie@gmail.com"},{"name":"mschreiber","email":"meschreiber3@gmail.com"},{"name":"sarahdayan","email":"hello@sarahdayan.com"},{"name":"alexandremeunier","email":"alexandre.meunier@gmail.com"},{"name":"dcoates","email":"dustin@dcoates.com"},{"name":"maximehuang","email":"maxime.huang@algolia.com"},{"name":"netgusto","email":"mail@jeromeschneider.fr"},{"name":"guitek","email":"guillaume.truchot@algolia.com"},{"name":"matthewbond","email":"matthew.bond@algolia.com"},{"name":"cyril.descossy","email":"cyril.descossy@algolia.com"},{"name":"tatsuro","email":"tatsuro.handa@algolia.com"},{"name":"adrian.tofan","email":"adrian.tofan@algolia.com"},{"name":"danajeremy","email":"jeremy.dana@orange.fr"},{"name":"mathougui","email":"guillaume.dessain@algolia.com"},{"name":"xavdh","email":"xav.dhalluin@gmail.com"},{"name":"agdavid","email":"antonio.g.david@gmail.com"},{"name":"charbell","email":"charlesbellorini@gmail.com"}],"homepage":"https://github.com/algolia/ui-components","dist":{"shasum":"13e5ef57ccc5f985c4ef4dce74b8c597ed4ddcf0","tarball":"https://registry.npmjs.org/@algolia/js-recommendations/-/js-recommendations-1.0.0-experimental.0.tgz","fileCount":17,"integrity":"sha512-IMUOpT7BKGN6jO4uRC2FSiGJuPjWkpgwI17rvvx7/8023lswRigoPrXSn2+BgPsDj6FQ5dxsxAwP2I23LRKwyg==","signatures":[{"sig":"MEUCIQCQYQSpvfqlIXJ51kjZDwH6nDkB15+qZ+tIvwvLB7iM8AIgbos3qAsHLeDyYIqLauUzbVgg4+TdNNLZksofCMVRiZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":184208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpR1SCRA9TVsSAnZWagAAyS4QAKDDoiuXfP1zUlfZznQg\nGeu8QW+5CIlgR/I6oeOXZIiR7GY9CNZ/cEB5uM4CBkoKjLEcQEuFE+pLOdm7\nRwtZd1XNiRXIndBw6TW104rSl5/IoF0Hf8d1vLLraWpndEHtThivFeMrHubT\nfSwc419h9TvQCunDbTwlyYBfEw0ODosQP+6wpM8ix9wC0jYl2PnxRaixKROD\nTassacS5cH0MHx1i07/zCuH0kjwn+Kg4HpuVDmmLgpbLMzL4qG/VNAb8WS5G\nu6Rd8e5tkjs1S5aJLeSEZ8Qr1hJKX9B5rmZhmAjqnywFaIEAL1zfzGpcMxjP\nxO6xe2wPOEhPaFsXl+rttWnymWl3OFI4RKPWd455g8f6Kbs4oeD7pDqGlXdW\nYH5GVOksaU+FezdJk/3t1mdyp5DuLME1LjAWTC/VnkgenjMqyQO16F3H1NMo\ns/fs/CSCYOTuY/ZvNkxd8iN3jr3UBY395Y8AxCfuusyFhzOQesF2MOpQ+1Tq\n2QK9Cli/6ESDxwARqSiWcdSK2BlUprLVE+rB40uAGnHWV5WlYJxNrYosO49f\n3X6eAmLLUbv9CS1OBekoMVdkFoRsFX4wy/DtA7Q8dDVfoiHRkkoJYc3X06rN\n2vyq9ENN0Vwy7AXj0oXTDOKG1ye0ldqys44SmjuHTlZq6nILupjSWUCgVRlN\nweMw\r\n=cJM9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/umd/index.js","types":"dist/esm/index.d.ts","unpkg":"dist/umd/index.js","module":"dist/esm/index.js","source":"src/index.ts","scripts":{"build":"yarn build:clean && yarn build:esm && yarn build:umd && yarn build:types","prepare":"yarn build:esm && yarn build:types","build:esm":"cross-env BUILD=esm BUILD_PREACT=true rollup --config","build:umd":"cross-env BUILD=umd BUILD_PREACT=true rollup --config","build:clean":"rm -rf ./dist","build:types":"tsc -p ./tsconfig.declaration.json --outDir ./dist/esm"},"_npmUser":{"name":"shortcuts","email":"clement.vannicatte@algolia.com"},"jsdelivr":"dist/umd/index.js","umd:main":"dist/umd/index.js","repository":{"url":"https://github.com/algolia/ui-components.git","type":"git"},"directories":{},"sideEffects":false,"dependencies":{"preact":"^10.0.0","@algolia/react-recommendations":"1.0.0-experimental.0"},"_hasShrinkwrap":false,"peerDependencies":{"algoliasearch":"^4.9.1"},"_npmOperationalInternal":{"tmp":"tmp/js-recommendations_1.0.0-experimental.0_1621433682010_0.03866313254368037","host":"s3://npm-registry-packages"}},"1.0.0-experimental.1":{"name":"@algolia/js-recommendations","version":"1.0.0-experimental.1","author":{"url":"https://www.algolia.com","name":"Algolia, Inc."},"license":"MIT","_id":"@algolia/js-recommendations@1.0.0-experimental.1","maintainers":[{"name":"tomklotz","email":"tomklotz.pro@gmail.com"},{"name":"praagyajoshi","email":"praagya.joshi@gmail.com"},{"name":"shortcuts","email":"clement.vannicatte@algolia.com"},{"name":"plnech","email":"dev@plnech.fr"},{"name":"rasemotte","email":"claire.helme-guizon@algolia.com"},{"name":"thomaslef","email":"thomas.lefevre@algolia.com"},{"name":"lukyvj","email":"lucas.bonomi@gmail.com"},{"name":"sepehrf","email":"sepehr9f@gmail.com"},{"name":"kosai106","email":"kevin@oesterkilde.dk"},{"name":"marielaure","email":"marie-laure.sin@algolia.com"},{"name":"redox","email":"sylvain.utard@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"haroenv","email":"hello@haroen.me"},{"name":"rayrutjes","email":"raymond.rutjes@gmail.com"},{"name":"speedblue","email":"support@algolia.com"},{"name":"jerska","email":"matthieu.dumont@algolia.com"},{"name":"raphi","email":"raphael.daguenet@algolia.com"},{"name":"cbaptiste","email":"coquellebaptiste@gmail.com"},{"name":"ronanlevesque","email":"ronan.levesque@gmail.com"},{"name":"samouss","email":"samuel.vllnt@gmail.com"},{"name":"therealwebby","email":"alex@alexjwebb.com"},{"name":"francoischalifour","email":"francois.chalifour@gmail.com"},{"name":"jonmontane","email":"jon@stratus.one"},{"name":"mikaa123","email":"misokol123@gmail.com"},{"name":"valentindotxyz","email":"valentin@hey.com"},{"name":"shipow","email":"shipowlata@gmail.com"},{"name":"tkrugg","email":"contact@ymammar.com"},{"name":"seafoox","email":"seafoox@gmail.com"},{"name":"sylvainh","email":"sylvain.huprelle@algolia.com"},{"name":"clemfromspace","email":"clement.denoix@algolia.com"},{"name":"lorrissaintgenez","email":"lorris.saint-genez@algolia.com"},{"name":"broujo","email":"johann.broudin@gmail.com"},{"name":"marieglr","email":"marie.gillier@algolia.com"},{"name":"e-krebs","email":"emmanuel.krebs@algolia.com"},{"name":"eunjae-lee","email":"karis612@gmail.com"},{"name":"kombucha","email":"vincentlemeunier+npm@gmail.com"},{"name":"h1fra","email":"bodin.samuel@gmail.com"},{"name":"sylvain","email":"sylvain.bellone@gmail.com"},{"name":"crawler-team","email":"support+crawler@algolia.com"},{"name":"amcdaid106","email":"aoife.mcdaid@gmail.com"},{"name":"devinalgolia","email":"devin@algolia.com"},{"name":"dispix","email":"me@dispix.net"},{"name":"jvenezia","email":"veneziajeremy@gmail.com"},{"name":"otomatik","email":"thomas.dalous@gmail.com"},{"name":"julienbourdeau","email":"julien@sigerr.ch"},{"name":"sophiem03","email":"manley.sophie@gmail.com"},{"name":"mschreiber","email":"meschreiber3@gmail.com"},{"name":"sarahdayan","email":"hello@sarahdayan.com"},{"name":"alexandremeunier","email":"alexandre.meunier@gmail.com"},{"name":"dcoates","email":"dustin@dcoates.com"},{"name":"maximehuang","email":"maxime.huang@algolia.com"},{"name":"netgusto","email":"mail@jeromeschneider.fr"},{"name":"guitek","email":"guillaume.truchot@algolia.com"},{"name":"matthewbond","email":"matthew.bond@algolia.com"},{"name":"cyril.descossy","email":"cyril.descossy@algolia.com"},{"name":"tatsuro","email":"tatsuro.handa@algolia.com"},{"name":"adrian.tofan","email":"adrian.tofan@algolia.com"},{"name":"danajeremy","email":"jeremy.dana@orange.fr"},{"name":"mathougui","email":"guillaume.dessain@algolia.com"},{"name":"xavdh","email":"xav.dhalluin@gmail.com"},{"name":"agdavid","email":"antonio.g.david@gmail.com"},{"name":"charbell","email":"charlesbellorini@gmail.com"}],"homepage":"https://github.com/algolia/ui-components","dist":{"shasum":"8ea70671158c29c060380caccd3fe17e2d795f69","tarball":"https://registry.npmjs.org/@algolia/js-recommendations/-/js-recommendations-1.0.0-experimental.1.tgz","fileCount":18,"integrity":"sha512-rJlm5JldEqzqFDnkU+rXwTEXGoV7MxH4wTZefXjgCGgV3ErTR4AN8jUptYpxmJ2Kq3IvPxX6gzhGREQo4wEg6w==","signatures":[{"sig":"MEUCIQCRaNEkPTc/7FUsgHHdrzTKfIfESFpQ9D1Cyli6lnvOWQIgNACZIhUrymvxFM62pzZmqqFHAogfBj+wfMcb+HVdFus=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgp8aTCRA9TVsSAnZWagAAQ84P/AkG9WY0R+OHp2tCoe5R\nqybyQCwUS2MT7WglAs+yqiGPuD4MhEOGGf8GRHn9dRw1A4VZtt0TwzU2JXcg\nh3jKjaLigSsBK09hgujso0IkvLTiqfIDV1luKYZQpVqPIUioEqMfzRE4O3cQ\niT4WacxcKX+/+0omNhT8WQZdqKSQqh2Pm/5sqLqMINTDC5A/x2H/shuDeTsl\nG425TIGGmpHVHBLeOVTNxNUHuXbJ0IfZlMuwSP9phDAPMzWIAIy/xC+qHurc\n/eI0U0oFN5+2qFYNKFYok6ej42QKg+BD5HkrpKD/fY821Mie+YCt3h4snbZk\nB6YNlIhwTxnfQPK2EHwexom54KBbm0ouU5MFNx7V1DanbOoOSQZpZCKGEKNY\nkfEMdpGY04gi/CoxURjUFjPoNWzwYQp6KmFkaSNalNKePZcT6EX5qKNZTxtE\nca5Z0yh1zNUE0wWU9d9AmkQSRO1haSB/e98EzPuIRU8Km90paIFzg41cfWis\nER52uDu+cZnivItDjADF9CSXZp8U8KJaaMY82CbfPC7p0FXrJ0pOE9pmwvuU\nFM8kC7h43OvpNhMU+NX31yUaeB+n5X4o5HeMVTD1CcTkxKw2PejOlkv2ICSJ\nbJ5cpb3/C9aKqoPbtCOzIMc9MAI0xyJThpj8lSrBDRNT3++A4VHtjI0CDm8p\n2tcs\r\n=Tcrc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/umd/index.js","types":"dist/esm/index.d.ts","unpkg":"dist/umd/index.js","module":"dist/esm/index.js","readme":"# `@algolia/js-recommendations`\n\nJavaScript package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/).\n\n## Installation\n\n```sh\nyarn add @algolia/js-recommendations@experimental\n# or\nnpm install @algolia/js-recommendations@experimental\n```\n\n## API\n\n### `relatedProducts`\n\nFunction to render related products.\n\n#### Usage\n\nTo get started, you need a container for your results to go in. If you don’t have one already, you can insert one into your markup:\n\n```html\n
\n```\n\nThen, inject results into it by calling the `relatedProducts` function and providing the [`container`](#container). It can be a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).\n\n```js\n/** @jsx h */\nimport { h } from 'preact';\nimport { relatedProducts } from '@algolia/js-recommendations';\nimport algoliasearch from 'algoliasearch';\n\nconst appId = 'HYDY1KWTWB';\nconst apiKey = '28cf6d38411215e2eef188e635216508';\nconst indexName = 'gstar_demo_test';\n\nconst searchClient = algoliasearch(appId, apiKey);\nconst currentObjectID = 'YOUR_OBJECT_ID';\n\nrelatedProducts({\n container: '#relatedProducts',\n searchClient,\n indexName,\n objectIDs: [currentObjectID],\n itemComponent({ item }) {\n return (\n 
\n        {JSON.stringify(item)}\n
\n );\n },\n});\n```\n\n#### Props\n\nThe function accepts all the [shared props](#shared-props) and the following:\n\n##### `container`\n\n> `string | HTMLElement` | **required**\n\nThe container for the `relatedProducts` component. You can either pass a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).\n\n##### `itemComponent`\n\n> `({ item }) => JSX.Element` | **required**\n\nThe product component to display.\n\n##### `classNames`\n\n
\n
\n\nRelatedProductsClassNames\n\n```ts\ntype RelatedProductsClassNames = Partial<{\n root: string;\n title: string;\n container: string;\n list: string;\n item: string;\n}>;\n```\n\n
\n
\n\nThe class names for the component.\n\n##### `translations`\n\n
\n
\n\nRelatedProductTranslations\n\n```ts\ntype RelatedProductTranslations = Partial<{\n title: string;\n showMore: string;\n}>;\n```\n\n
\n
\n\nThe translations for the component.\n\n##### `children`\n\n
\n
\n\n(props: ChildrenProps) => JSX.Element\n\n```ts\ntype ChildrenProps = {\n classNames: RecommendationClassNames;\n recommendations: TObject[];\n translations: Required;\n View(props: unknown): JSX.Element;\n};\n```\n\n
\n
\n\nRender function to modify the default rendering.\n\nThe default implementation is:\n\n```js\nfunction defaultRender(props) {\n if (props.recommendations.length === 0) {\n return null;\n }\n\n return (\n
\n {props.translations.title &&

{props.translations.title}

}\n\n \n
\n );\n}\n```\n\n### `frequentlyBoughtTogether`\n\nFunction to render frequently bought together products.\n\n#### Usage\n\nTo get started, you need a container for your results to go in. If you don’t have one already, you can insert one into your markup:\n\n```html\n
\n```\n\nThen, inject results into it by calling the `frequentlyBoughtTogether` function and providing the [`container`](#container). It can be a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).\n\n```js\n/** @jsx h */\nimport { h } from 'preact';\nimport { frequentlyBoughtTogether } from '@algolia/js-recommendations';\nimport algoliasearch from 'algoliasearch';\n\nconst appId = 'HYDY1KWTWB';\nconst apiKey = '28cf6d38411215e2eef188e635216508';\nconst indexName = 'gstar_demo_test';\n\nconst searchClient = algoliasearch(appId, apiKey);\nconst currentObjectID = 'YOUR_OBJECT_ID';\n\nfrequentlyBoughtTogether({\n container: '#frequentlyBoughtTogether',\n searchClient,\n indexName,\n objectIDs: [currentObjectID],\n itemComponent({ item }) {\n return (\n 
\n        {JSON.stringify(item)}\n
\n );\n },\n});\n```\n\n#### Props\n\nThe function accepts all the [shared props](#shared-props) and the following:\n\n##### `container`\n\n> `string | HTMLElement` | **required**\n\nThe container for the `frequentlyBoughtTogether` component. You can either pass a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).\n\n##### `itemComponent`\n\n> `({ item }) => JSX.Element` | **required**\n\nThe product component to display.\n\n##### `classNames`\n\n
\n
\n\nFrequentlyBoughtTogetherClassNames\n\n```ts\ntype FrequentlyBoughtTogetherClassNames = Partial<{\n root: string;\n title: string;\n container: string;\n list: string;\n item: string;\n}>;\n```\n\n
\n
\n\nThe class names for the component.\n\n##### `translations`\n\n
\n
\n\nFrequentlyBoughtTogetherTranslations\n\n```ts\ntype FrequentlyBoughtTogetherTranslations = Partial<{\n title: string;\n showMore: string;\n}>;\n```\n\n
\n
\n\nThe translations for the component.\n\n##### `children`\n\n
\n
\n\n(props: ChildrenProps) => JSX.Element\n\n```ts\ntype ChildrenProps = {\n classNames: RecommendationClassNames;\n recommendations: TObject[];\n translations: Required;\n View(props: unknown): JSX.Element;\n};\n```\n\n
\n
\n\nRender function to modify the default rendering.\n\nThe default implementation is:\n\n```js\nfunction defaultRender(props) {\n if (props.recommendations.length === 0) {\n return null;\n }\n\n return (\n
\n {props.translations.title &&

{props.translations.title}

}\n\n \n
\n );\n}\n```\n\n## Shared props\n\n### `searchClient`\n\n> `SearchClient` | **required**\n\nThe initialized Algolia search client.\n\n### `indexName`\n\n> `string` | **required**\n\nThe name of the products index.\n\n### `objectIDs`\n\n> `string[]` | **required**\n\nAn array of `objectID`s of the products to get recommendations from.\n\n### `maxRecommendations`\n\n> `number` | defaults to the maximum number of recommendations available\n\nThe number of recommendations to retrieve.\n\n### `fallbackFilters`\n\n> list of strings\n\nAdditional filters to use as fallback should there not be enough recommendations.\n\n### `searchParameters`\n\n> [`SearchParameters`](https://www.algolia.com/doc/api-reference/search-api-parameters/) | defaults to `{ analytics: false, enableABTest: false }`\n\nList of [search parameters](https://www.algolia.com/doc/api-reference/search-api-parameters/) to send.\n\n### `transformItems`\n\n
\n
\n\n(Array<RecordWithObjectID<TItem>>) => Array<RecordWithObjectID<TItem>>\n\n```ts\ntype RecordWithObjectID = TItem & {\n objectID: string;\n};\n```\n\n
\n
\n\nFunction to transform the items retrieved by Algolia. It's useful to edit, add, remove or reorder them.\n","source":"src/index.ts","scripts":{"build":"yarn build:clean && yarn build:esm && yarn build:umd && yarn build:types","prepare":"yarn build:esm && yarn build:types","build:esm":"cross-env BUILD=esm BUILD_PREACT=true rollup --config","build:umd":"cross-env BUILD=umd BUILD_PREACT=true rollup --config","build:clean":"rm -rf ./dist","build:types":"tsc -p ./tsconfig.declaration.json --outDir ./dist/esm"},"_npmUser":{"name":"shortcuts","email":"clement.vannicatte@algolia.com"},"jsdelivr":"dist/umd/index.js","umd:main":"dist/umd/index.js","repository":{"url":"https://github.com/algolia/ui-components.git","type":"git"},"description":"JavaScript package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/).","directories":{},"sideEffects":false,"dependencies":{"preact":"^10.0.0","@algolia/react-recommendations":"1.0.0-experimental.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"algoliasearch":"^4.9.1"},"_npmOperationalInternal":{"tmp":"tmp/js-recommendations_1.0.0-experimental.1_1621608083088_0.41561968798850923","host":"s3://npm-registry-packages"}},"1.0.0-experimental.2":{"name":"@algolia/js-recommendations","version":"1.0.0-experimental.2","author":{"url":"https://www.algolia.com","name":"Algolia, Inc."},"license":"MIT","_id":"@algolia/js-recommendations@1.0.0-experimental.2","maintainers":[{"name":"tomklotz","email":"tomklotz.pro@gmail.com"},{"name":"praagyajoshi","email":"praagya.joshi@gmail.com"},{"name":"shortcuts","email":"clement.vannicatte@algolia.com"},{"name":"plnech","email":"dev@plnech.fr"},{"name":"rasemotte","email":"claire.helme-guizon@algolia.com"},{"name":"thomaslef","email":"thomas.lefevre@algolia.com"},{"name":"lukyvj","email":"lucas.bonomi@gmail.com"},{"name":"sepehrf","email":"sepehr9f@gmail.com"},{"name":"kosai106","email":"kevin@oesterkilde.dk"},{"name":"marielaure","email":"marie-laure.sin@algolia.com"},{"name":"redox","email":"sylvain.utard@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"haroenv","email":"hello@haroen.me"},{"name":"rayrutjes","email":"raymond.rutjes@gmail.com"},{"name":"speedblue","email":"support@algolia.com"},{"name":"jerska","email":"matthieu.dumont@algolia.com"},{"name":"raphi","email":"raphael.daguenet@algolia.com"},{"name":"cbaptiste","email":"coquellebaptiste@gmail.com"},{"name":"ronanlevesque","email":"ronan.levesque@gmail.com"},{"name":"samouss","email":"samuel.vllnt@gmail.com"},{"name":"therealwebby","email":"alex@alexjwebb.com"},{"name":"francoischalifour","email":"francois.chalifour@gmail.com"},{"name":"jonmontane","email":"jon@stratus.one"},{"name":"mikaa123","email":"misokol123@gmail.com"},{"name":"valentindotxyz","email":"valentin@hey.com"},{"name":"shipow","email":"shipowlata@gmail.com"},{"name":"tkrugg","email":"contact@ymammar.com"},{"name":"seafoox","email":"seafoox@gmail.com"},{"name":"sylvainh","email":"sylvain.huprelle@algolia.com"},{"name":"clemfromspace","email":"clement.denoix@algolia.com"},{"name":"lorrissaintgenez","email":"lorris.saint-genez@algolia.com"},{"name":"broujo","email":"johann.broudin@gmail.com"},{"name":"marieglr","email":"marie.gillier@algolia.com"},{"name":"e-krebs","email":"emmanuel.krebs@algolia.com"},{"name":"eunjae-lee","email":"karis612@gmail.com"},{"name":"kombucha","email":"vincentlemeunier+npm@gmail.com"},{"name":"h1fra","email":"bodin.samuel@gmail.com"},{"name":"sylvain","email":"sylvain.bellone@gmail.com"},{"name":"crawler-team","email":"support+crawler@algolia.com"},{"name":"amcdaid106","email":"aoife.mcdaid@gmail.com"},{"name":"devinalgolia","email":"devin@algolia.com"},{"name":"dispix","email":"me@dispix.net"},{"name":"jvenezia","email":"veneziajeremy@gmail.com"},{"name":"otomatik","email":"thomas.dalous@gmail.com"},{"name":"julienbourdeau","email":"julien@sigerr.ch"},{"name":"sophiem03","email":"manley.sophie@gmail.com"},{"name":"mschreiber","email":"meschreiber3@gmail.com"},{"name":"sarahdayan","email":"hello@sarahdayan.com"},{"name":"alexandremeunier","email":"alexandre.meunier@gmail.com"},{"name":"dcoates","email":"dustin@dcoates.com"},{"name":"maximehuang","email":"maxime.huang@algolia.com"},{"name":"netgusto","email":"mail@jeromeschneider.fr"},{"name":"guitek","email":"guillaume.truchot@algolia.com"},{"name":"matthewbond","email":"matthew.bond@algolia.com"},{"name":"cyril.descossy","email":"cyril.descossy@algolia.com"},{"name":"tatsuro","email":"tatsuro.handa@algolia.com"},{"name":"adrian.tofan","email":"adrian.tofan@algolia.com"},{"name":"danajeremy","email":"jeremy.dana@orange.fr"},{"name":"mathougui","email":"guillaume.dessain@algolia.com"},{"name":"xavdh","email":"xav.dhalluin@gmail.com"},{"name":"agdavid","email":"antonio.g.david@gmail.com"},{"name":"charbell","email":"charlesbellorini@gmail.com"}],"homepage":"https://github.com/algolia/ui-components","dist":{"shasum":"43d18519ad4dedaabb751d97442a7d8e06c39d95","tarball":"https://registry.npmjs.org/@algolia/js-recommendations/-/js-recommendations-1.0.0-experimental.2.tgz","fileCount":18,"integrity":"sha512-NC193fX+mr0Ea8Gp73To82hQ5rUXYu1GiSxvwnuTtJaO6E/VYC6nYC1OGuC9ZPajUNRHD0KIEoaJ1KpFeuj1hQ==","signatures":[{"sig":"MEUCIQD/lPyWxtbjJdbn4pGw9qWH0IK+6zjJR5FGz9NpNYCz+wIgBrU+ltwITp+smE/+grylb8Gebk5fRqNiDOH+Kz8AWi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":204411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrR+cCRA9TVsSAnZWagAAPbYP/3j3eNG8A9KyEk7XiX7h\nrUYqPIDvZoScvvJpakxm3QqfxWqlvEDZTzN11IxSTvS2W61FDGLepduk+sLE\nD+xYhPfg2cdDtcUA4vWidI0nbnQBmloeX1Oiadz39013nCdnCNyH03bd1Tsw\nimF7HaaiH3cs6mwXRBXKv4mTOdWSnHw+IZnvnJ5+onEmW9WHq0LP4hY52mXA\n15AcywVWoueIw/jEo9WITJ/8aUOUAsGr30FY+ZP/2ALEyPn87bWC8xTzzA3y\ndjGeSvkqz8Uf9WxIOiUjmHbrVdO3l9Q/OWmfnaTYFi4ZryxQRBuSoT3rqWeO\nkhJd59XlyOmzC4gdle1kLfouuR0ZS7M+H95+DiB3wqrL/xIgo7qovbbFafLM\nMVNR40LaW6QaYmNy1k2jJmO9UUWnfwgLUpcebcS3MLO9PJI3kKNoD5WlZehc\noQpxOKmAJGjqIzOmVjecHkteyQpqGwk48q4zdNLLprndb4D543eM+1twirUD\nOZGfmlriaKRN2wn0N7y47p502P5rGW/YsrXFTbr0ef+pK2OZHw0eEcHKbh/o\n1KN5hGuhD0uRvGax6ZQhpumv/tcgwjTu/aSjhJRLEftwNyqnUU0cMOWw7F2G\nxp2k8pzrfrHSk79eJH14+1JfZOQEGwxDdtq00U0NafHODrio1KS+beeUdEwA\nDbBB\r\n=+l14\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/umd/index.js","types":"dist/esm/index.d.ts","unpkg":"dist/umd/index.js","module":"dist/esm/index.js","readme":"# `@algolia/js-recommendations`\n\nJavaScript package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/).\n\n## Installation\n\n```sh\nyarn add @algolia/js-recommendations@experimental\n# or\nnpm install @algolia/js-recommendations@experimental\n```\n\n## API\n\n### `relatedProducts`\n\nFunction to render related products.\n\n#### Usage\n\nTo get started, you need a container for your results to go in. If you don’t have one already, you can insert one into your markup:\n\n```html\n
\n```\n\nThen, inject results into it by calling the `relatedProducts` function and providing the [`container`](#container). It can be a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).\n\n```js\n/** @jsx h */\nimport { h } from 'preact';\nimport { relatedProducts } from '@algolia/js-recommendations';\nimport algoliasearch from 'algoliasearch';\n\nconst appId = 'HYDY1KWTWB';\nconst apiKey = '28cf6d38411215e2eef188e635216508';\nconst indexName = 'gstar_demo_test';\n\nconst searchClient = algoliasearch(appId, apiKey);\nconst currentObjectID = 'YOUR_OBJECT_ID';\n\nrelatedProducts({\n container: '#relatedProducts',\n searchClient,\n indexName,\n objectIDs: [currentObjectID],\n itemComponent({ item }) {\n return (\n 
\n        {JSON.stringify(item)}\n
\n );\n },\n});\n```\n\n#### Props\n\nThe function accepts all the [shared props](#shared-props) and the following:\n\n##### `container`\n\n> `string | HTMLElement` | **required**\n\nThe container for the `relatedProducts` component. You can either pass a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).\n\n##### `itemComponent`\n\n> `({ item }) => JSX.Element` | **required**\n\nThe product component to display.\n\n##### `classNames`\n\n
\n
\n\nRelatedProductsClassNames\n\n```ts\ntype RelatedProductsClassNames = Partial<{\n root: string;\n title: string;\n container: string;\n list: string;\n item: string;\n}>;\n```\n\n
\n
\n\nThe class names for the component.\n\n##### `translations`\n\n
\n
\n\nRelatedProductTranslations\n\n```ts\ntype RelatedProductTranslations = Partial<{\n title: string;\n showMore: string;\n}>;\n```\n\n
\n
\n\nThe translations for the component.\n\n##### `children`\n\n
\n
\n\n(props: ChildrenProps) => JSX.Element\n\n```ts\ntype ChildrenProps = {\n classNames: RecommendationClassNames;\n recommendations: TObject[];\n translations: Required;\n View(props: unknown): JSX.Element;\n};\n```\n\n
\n
\n\nRender function to modify the default rendering.\n\nThe default implementation is:\n\n```js\nfunction defaultRender(props) {\n if (props.recommendations.length === 0) {\n return null;\n }\n\n return (\n
\n {props.translations.title &&

{props.translations.title}

}\n\n \n
\n );\n}\n```\n\n### `frequentlyBoughtTogether`\n\nFunction to render frequently bought together products.\n\n#### Usage\n\nTo get started, you need a container for your results to go in. If you don’t have one already, you can insert one into your markup:\n\n```html\n
\n```\n\nThen, inject results into it by calling the `frequentlyBoughtTogether` function and providing the [`container`](#container). It can be a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).\n\n```js\n/** @jsx h */\nimport { h } from 'preact';\nimport { frequentlyBoughtTogether } from '@algolia/js-recommendations';\nimport algoliasearch from 'algoliasearch';\n\nconst appId = 'HYDY1KWTWB';\nconst apiKey = '28cf6d38411215e2eef188e635216508';\nconst indexName = 'gstar_demo_test';\n\nconst searchClient = algoliasearch(appId, apiKey);\nconst currentObjectID = 'YOUR_OBJECT_ID';\n\nfrequentlyBoughtTogether({\n container: '#frequentlyBoughtTogether',\n searchClient,\n indexName,\n objectIDs: [currentObjectID],\n itemComponent({ item }) {\n return (\n 
\n        {JSON.stringify(item)}\n
\n );\n },\n});\n```\n\n#### Props\n\nThe function accepts all the [shared props](#shared-props) and the following:\n\n##### `container`\n\n> `string | HTMLElement` | **required**\n\nThe container for the `frequentlyBoughtTogether` component. You can either pass a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).\n\n##### `itemComponent`\n\n> `({ item }) => JSX.Element` | **required**\n\nThe product component to display.\n\n##### `classNames`\n\n
\n
\n\nFrequentlyBoughtTogetherClassNames\n\n```ts\ntype FrequentlyBoughtTogetherClassNames = Partial<{\n root: string;\n title: string;\n container: string;\n list: string;\n item: string;\n}>;\n```\n\n
\n
\n\nThe class names for the component.\n\n##### `translations`\n\n
\n
\n\nFrequentlyBoughtTogetherTranslations\n\n```ts\ntype FrequentlyBoughtTogetherTranslations = Partial<{\n title: string;\n showMore: string;\n}>;\n```\n\n
\n
\n\nThe translations for the component.\n\n##### `children`\n\n
\n
\n\n(props: ChildrenProps) => JSX.Element\n\n```ts\ntype ChildrenProps = {\n classNames: RecommendationClassNames;\n recommendations: TObject[];\n translations: Required;\n View(props: unknown): JSX.Element;\n};\n```\n\n
\n
\n\nRender function to modify the default rendering.\n\nThe default implementation is:\n\n```js\nfunction defaultRender(props) {\n if (props.recommendations.length === 0) {\n return null;\n }\n\n return (\n
\n {props.translations.title &&

{props.translations.title}

}\n\n \n
\n );\n}\n```\n\n## Shared props\n\n### `searchClient`\n\n> `SearchClient` | **required**\n\nThe initialized Algolia search client.\n\n### `indexName`\n\n> `string` | **required**\n\nThe name of the products index.\n\n### `objectIDs`\n\n> `string[]` | **required**\n\nAn array of `objectID`s of the products to get recommendations from.\n\n### `maxRecommendations`\n\n> `number` | defaults to the maximum number of recommendations available\n\nThe number of recommendations to retrieve.\n\n### `fallbackFilters`\n\n> list of strings\n\nAdditional filters to use as fallback should there not be enough recommendations.\n\n### `searchParameters`\n\n> [`SearchParameters`](https://www.algolia.com/doc/api-reference/search-api-parameters/) | defaults to `{ analytics: false, enableABTest: false }`\n\nList of [search parameters](https://www.algolia.com/doc/api-reference/search-api-parameters/) to send.\n\n### `transformItems`\n\n
\n
\n\n(Array<RecordWithObjectID<TItem>>) => Array<RecordWithObjectID<TItem>>\n\n```ts\ntype RecordWithObjectID = TItem & {\n objectID: string;\n};\n```\n\n
\n
\n\nFunction to transform the items retrieved by Algolia. It's useful to edit, add, remove or reorder them.\n","source":"src/index.ts","scripts":{"build":"yarn build:clean && yarn build:esm && yarn build:umd && yarn build:types","prepare":"yarn build:esm && yarn build:types","build:esm":"cross-env BUILD=esm BUILD_PREACT=true rollup --config","build:umd":"cross-env BUILD=umd BUILD_PREACT=true rollup --config","build:clean":"rm -rf ./dist","build:types":"tsc -p ./tsconfig.declaration.json --outDir ./dist/esm"},"_npmUser":{"name":"shortcuts","email":"clement.vannicatte@algolia.com"},"jsdelivr":"dist/umd/index.js","umd:main":"dist/umd/index.js","repository":{"url":"https://github.com/algolia/ui-components.git","type":"git"},"description":"JavaScript package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/).","directories":{},"sideEffects":false,"dependencies":{"preact":"^10.0.0","@algolia/react-recommendations":"1.0.0-experimental.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"algoliasearch":"^4.9.1"},"_npmOperationalInternal":{"tmp":"tmp/js-recommendations_1.0.0-experimental.2_1621958556040_0.4489939369582756","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-05-19T14:14:41.682Z","modified":"2026-09-16T10:11:15.461Z","1.0.0-experimental.0":"2021-05-19T14:14:42.116Z","1.0.0-experimental.1":"2021-05-21T14:41:23.237Z","1.0.0-experimental.2":"2021-05-25T16:02:36.160Z"},"author":{"url":"https://www.algolia.com","name":"Algolia, Inc."},"license":"MIT","homepage":"https://github.com/algolia/ui-components","repository":{"url":"https://github.com/algolia/ui-components.git","type":"git"},"maintainers":[{"email":"hello@haroen.me","name":"haroenv"},{"email":"contact@ymammar.com","name":"tkrugg"},{"email":"cyril.descossy@algolia.com","name":"cyril.descossy"},{"email":"emmanuel.fortin@algolia.com","name":"emmanuel.fortin"},{"email":"robert.mogos@algolia.com","name":"robertmogos"},{"email":"stephane.jin@algolia.com","name":"jinste"},{"email":"team-event-experiences-engineering@algolia.com","name":"eventexperiences_algolia"},{"email":"admin@algolia.com","name":"alg-admin"},{"email":"michael.bramwell@algolia.com","name":"mbramwell-algolia"},{"email":"vincentalindogan@gmail.com","name":"vincentalindogan"},{"email":"raed.chammam@algolia.com","name":"raed-algolia"},{"email":"dev@plnech.fr","name":"plnech"}],"readme":"","readmeFilename":""}