algolia · sarahdayan · Nov 20, 2023 · Nov 20, 2023 · Nov 20, 2023 · Nov 20, 2023
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,11 +1,5 @@
 {
-  "sandboxes": [
-    "instantsearchjs-es-template-pcw1k",
-    "github/algolia/instantsearch/tree/templates/react-instantsearch",
-    "/examples/react/default-theme",
-    "/examples/react/next-app-router",
-    "/examples/vue/default-theme"
-  ],
+  "sandboxes": ["/examples/js/multi-clients"],
   "buildCommand": "build --no-private --ignore *-maps --ignore *-native",
   "packages": [
     "packages/instantsearch.js",

diff --git a/examples/js/multi-clients/README.md b/examples/js/multi-clients/README.md
@@ -0,0 +1,23 @@
+# Multi-clients demo
+
+[![Edit multi-clients](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/algolia/instantsearch/tree/master/examples/js/multi-clients)
+
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/instantsearch/tree/master/packages/create-instantsearch-app) by [Algolia](https://algolia.com)._
+
+## Get started
+
+To run this project locally, install the dependencies and run the local server:
+
+```sh
+npm install
+npm start
+```
+
+Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+
+```sh
+yarn
+yarn start
+```
+
+Open http://localhost:3000 to see your app.
diff --git a/examples/js/multi-clients/favicon.png b/examples/js/multi-clients/favicon.png
diff --git a/examples/js/multi-clients/index.html b/examples/js/multi-clients/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <link rel="shortcut icon" href="./favicon.png" />
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
+    />
+    <link rel="stylesheet" href="./src/index.css" />
+    <link rel="stylesheet" href="./src/app.css" />
+
+    <title>InstantSearch.js — Multi-clients</title>
+  </head>
+
+  <body>
+    <header class="header">
+      <h1 class="header-title">
+        <a href="/">Multi-clients</a>
+      </h1>
+      <p class="header-subtitle">
+        using
+        <a href="https://github.com/algolia/instantsearch">
+          InstantSearch.js
+        </a>
+      </p>
+    </header>
+
+    <div class="container">
+      <div class="search-panel">
+        <div class="search-panel__filters">
+          <div id="brand-list"></div>
+        </div>
+
+        <div class="search-panel__results">
+          <div id="searchbox"></div>
+          <div id="fbt"></div>
+          <div id="hits"></div>
+          <div id="pagination"></div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="module" src="./src/env.js"></script>
+    <script type="module" src="./src/app.js"></script>
+  </body>
+</html>
diff --git a/examples/js/multi-clients/manifest.webmanifest b/examples/js/multi-clients/manifest.webmanifest
@@ -0,0 +1,15 @@
+{
+  "short_name": "Media",
+  "name": "InstantSearch.js Media Demo",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#667eea",
+  "background_color": "#fcfefe"
+}
diff --git a/examples/js/multi-clients/package.json b/examples/js/multi-clients/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "example-multi-clients",
+  "version": "1.31.0",
+  "private": true,
+  "scripts": {
+    "start": "BABEL_ENV=parcel parcel index.html product.html --port 3000",
+    "build": "BABEL_ENV=parcel parcel build index.html product.html --public-url .",
+    "website:examples": "BABEL_ENV=parcel parcel build index.html product.html --public-url . --dist-dir=../../../website/examples/js/multi-clients"
+  },
+  "dependencies": {
+    "@algolia/recommend": "4.20.0",
+    "algoliasearch": "4.20.0",
+    "instantsearch.js": "4.60.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.15.5",
+    "@parcel/core": "2.10.0",
+    "@parcel/packager-raw-url": "2.10.0",
+    "@parcel/transformer-webmanifest": "2.10.0",
+    "parcel": "2.10.0"
+  },
+  "alias": {
+    "@algolia/client": "./src/algolia"
+  }
+}
diff --git a/examples/js/multi-clients/product.html b/examples/js/multi-clients/product.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <link rel="shortcut icon" href="./favicon.png" />
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
+    />
+    <link rel="stylesheet" href="./src/index.css" />
+    <link rel="stylesheet" href="./src/app.css" />
+
+    <title>InstantSearch.js — Multi-clients</title>
+  </head>
+
+  <body>
+    <header class="header">
+      <h1 class="header-title">
+        <a href="/">Multi-clients</a>
+      </h1>
+      <p class="header-subtitle">
+        using
+        <a href="https://github.com/algolia/instantsearch">
+          InstantSearch.js
+        </a>
+      </p>
+    </header>
+
+    <div class="container">
+      <div class="search-panel">
+        <div class="search-panel__results">
+          <div id="hits"></div>
+          <div id="fbt" class="ais-Hits-item"></div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="module" src="./src/env.js"></script>
+    <script type="module" src="./src/product.js"></script>
+  </body>
+</html>
diff --git a/examples/js/multi-clients/src/algolia.js b/examples/js/multi-clients/src/algolia.js
@@ -0,0 +1,9 @@
+import algoliasearch from 'algoliasearch/lite';
+import recommend from '@algolia/recommend';
+
+export function algolia(appID, apiKey) {
+  const searchClient = algoliasearch(appID, apiKey);
+  const recommendClient = recommend(appID, apiKey);
+
+  return { searchClient, recommendClient };
+}
diff --git a/examples/js/multi-clients/src/app.css b/examples/js/multi-clients/src/app.css
@@ -0,0 +1,75 @@
+.header {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: 0.5rem 1rem;
+  background-image: linear-gradient(284deg, #fedd4e, #fcb43a);
+  color: #fff;
+  margin-bottom: 1rem;
+}
+
+.header a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.header-title {
+  font-size: 1.2rem;
+  font-weight: normal;
+}
+
+.header-title::after {
+  content: ' ▸ ';
+  padding: 0 0.5rem;
+}
+
+.header-subtitle {
+  font-size: 1.2rem;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
+}
+
+.ais-Highlight-highlighted {
+  color: inherit;
+  font-size: inherit;
+}
+
+#searchbox {
+  margin-bottom: 2rem;
+}
+
+#pagination {
+  margin: 2rem auto;
+  text-align: center;
+}
+
+#fbt {
+  margin-top: 1rem;
+}
+
+.ais-Hits--product img {
+  max-height: 300px;
+}
+
+.clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
diff --git a/examples/js/multi-clients/src/app.js b/examples/js/multi-clients/src/app.js
@@ -0,0 +1,38 @@
+import {
+  configure,
+  hits,
+  pagination,
+  panel,
+  refinementList,
+  searchBox,
+} from 'instantsearch.js/es/widgets';
+
+import { search } from './search';
+import { hitItem } from './templates';
+
+search.addWidgets([
+  configure({
+    hitsPerPage: 8,
+  }),
+  searchBox({
+    container: '#searchbox',
+  }),
+  hits({
+    container: '#hits',
+    cssClasses: { list: 'grid gap-2 grid-cols-3' },
+    templates: {
+      item: (hit, { html, components }) => hitItem({ hit, html, components }),
+    },
+  }),
+  panel({
+    templates: { header: (_, { html }) => html`Brand` },
+  })(refinementList)({
+    container: '#brand-list',
+    attribute: 'brand',
+  }),
+  pagination({
+    container: '#pagination',
+  }),
+]);
+
+search.start();
diff --git a/examples/js/multi-clients/src/env.js b/examples/js/multi-clients/src/env.js
@@ -0,0 +1,6 @@
+// Parcel picks the `source` field of the monorepo packages and thus doesn't
+// apply the Babel config. We therefore need to manually override the constants
+// in the app.
+// See https://twitter.com/devongovett/status/1134231234605830144
+global.__DEV__ = process.env.NODE_ENV !== 'production';
+global.__TEST__ = false;
diff --git a/examples/js/multi-clients/src/index.css b/examples/js/multi-clients/src/index.css
@@ -0,0 +1,10 @@
+body,
+h1 {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
diff --git a/examples/js/multi-clients/src/product.js b/examples/js/multi-clients/src/product.js
@@ -0,0 +1,55 @@
+import {
+  configure,
+  hits,
+  frequentlyBoughtTogether,
+} from 'instantsearch.js/es/widgets';
+
+const searchParams = new URLSearchParams(window.location.search);
+const objectID = searchParams.get('pid');
+
+import { search } from './search';
+import { hitItem, recommendItem } from './templates';
+
+search.addWidgets([
+  configure({
+    hitsPerPage: 8,
+    filters: `objectID:${objectID}`,
+  }),
+  hits({
+    container: '#hits',
+    cssClasses: { root: 'ais-Hits--product', list: 'grid gap-2' },
+    templates: {
+      item: (hit, { html, components }) =>
+        hitItem({ hit, html, components, orientation: 'horizontal' }),
+    },
+  }),
+  frequentlyBoughtTogether({
+    container: '#fbt',
+    objectIDs: [objectID],
+    cssClasses: { list: 'grid gap-2 grid-cols-3 lg:grid-cols-6' },
+    templates: {
+      item: ({ item, html, sendEvent }) => {
+        return recommendItem({
+          item,
+          html,
+          onAddToCart() {
+            sendEvent('conversion', item, 'Added To Cart', {
+              eventSubtype: 'addToCart',
+              objectData: [
+                {
+                  discount: 0,
+                  price: item.price.value,
+                  quantity: 1,
+                },
+              ],
+              value: item.price.value,
+              currency: item.price.currency,
+            });
+          },
+        });
+      },
+    },
+  }),
+]);
+
+search.start();
diff --git a/examples/js/multi-clients/src/search.js b/examples/js/multi-clients/src/search.js
@@ -0,0 +1,10 @@
+import instantsearch from 'instantsearch.js';
+import { algolia } from '@algolia/client';
+
+const client = algolia('XX85YRZZMV', '098f71f9e2267178bdfc08cc986d2999');
+
+export const search = instantsearch({
+  indexName: 'test_FLAGSHIP_ECOM_recommend',
+  client,
+  insights: true,
+});