algolia · tkrugg · Mar 20, 2019 · Mar 19, 2019 · Mar 19, 2019 · Mar 19, 2019
diff --git a/InstantSearch.js/algolia-insights/.editorconfig b/InstantSearch.js/algolia-insights/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/InstantSearch.js/algolia-insights/.eslintignore b/InstantSearch.js/algolia-insights/.eslintignore
@@ -0,0 +1,3 @@
+/node_modules
+/dist
+/.cache
diff --git a/InstantSearch.js/algolia-insights/.eslintrc.js b/InstantSearch.js/algolia-insights/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'algolia',
+};
diff --git a/InstantSearch.js/algolia-insights/.gitignore b/InstantSearch.js/algolia-insights/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/dist
+/.cache
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/InstantSearch.js/algolia-insights/.prettierrc b/InstantSearch.js/algolia-insights/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "proseWrap": "never",
+  "trailingComma": "es5"
+}
diff --git a/InstantSearch.js/algolia-insights/README.md b/InstantSearch.js/algolia-insights/README.md
@@ -0,0 +1,19 @@
+# getting-started
+
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/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
+```
diff --git a/InstantSearch.js/algolia-insights/favicon.png b/InstantSearch.js/algolia-insights/favicon.png
diff --git a/InstantSearch.js/algolia-insights/index.html b/InstantSearch.js/algolia-insights/index.html
@@ -0,0 +1,54 @@
+<!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="manifest" href="./manifest.webmanifest" />
+    <link rel="shortcut icon" href="./favicon.png" />
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"
+    />
+    <link rel="stylesheet" href="./src/index.css" />
+    <link rel="stylesheet" href="./src/app.css" />
+
+    <title>ais-ecommerce-demo-app</title>
+  </head>
+
+  <body>
+    <div class="ais-InstantSearch">
+      <h1>InstantSearch.js e-commerce demo</h1>
+
+      <div class="left-panel">
+        <div id="clear-refinements"></div>
+
+        <h2>Brands</h2>
+        <div id="brand-list"></div>
+      </div>
+
+      <div class="right-panel">
+        <div id="searchbox" class="ais-SearchBox"></div>
+        <div id="hits"></div>
+        <div id="pagination"></div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/algoliasearch@3.32.0/dist/algoliasearchLite.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@3.0.0"></script>
+    <script src="./src/app.js"></script>
+    <script>
+      !function(e,a,t,n,s,i,c){e.AlgoliaAnalyticsObject=s,e.aa=e.aa||function(){(e.aa.queue=e.aa.queue||[]).push(arguments)},i=a.createElement(t),c=a.getElementsByTagName(t)[0],i.async=1,i.src="https://cdn.jsdelivr.net/npm/search-insights@1.0.1",c.parentNode.insertBefore(i,c)}(window,document,"script",0,"aa");
+      aa('init', {
+        appId: 'B1G2GM9NG0',
+        apiKey: 'aadef574be1f9252bb48d4ea09b5cfe5',
+      });
+    </script>
+
+  </body>
+</html>
diff --git a/InstantSearch.js/algolia-insights/manifest.webmanifest b/InstantSearch.js/algolia-insights/manifest.webmanifest
@@ -0,0 +1,15 @@
+{
+  "short_name": "is-ecommerce-demo-app",
+  "name": "is-ecommerce-demo-app Sample",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/InstantSearch.js/algolia-insights/package.json b/InstantSearch.js/algolia-insights/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "ais-ecommerce-demo-app",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "parcel index.html --port 3000",
+    "build": "parcel build index.html",
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix"
+  },
+  "devDependencies": {
+    "babel-eslint": "10.0.1",
+    "eslint": "4.19.1",
+    "eslint-config-algolia": "13.2.3",
+    "eslint-config-prettier": "4.1.0",
+    "eslint-plugin-import": "2.16.0",
+    "eslint-plugin-prettier": "3.0.1",
+    "parcel-bundler": "1.12.2",
+    "prettier": "1.16.4"
+  }
+}
diff --git a/InstantSearch.js/algolia-insights/src/app.css b/InstantSearch.js/algolia-insights/src/app.css
@@ -0,0 +1,50 @@
+body {
+  font-family: sans-serif;
+  padding: 1em;
+}
+
+.ais-ClearRefinements {
+  margin: 1em 0;
+}
+
+.ais-SearchBox {
+  margin: 1em 0;
+}
+
+.ais-Pagination {
+  margin-top: 1em;
+}
+
+.left-panel {
+  float: left;
+  width: 250px;
+}
+
+.right-panel {
+  margin-left: 260px;
+}
+
+.ais-InstantSearch {
+  max-width: 960px;
+  overflow: hidden;
+  margin: 0 auto;
+}
+
+.ais-Hits-item {
+  margin-bottom: 1em;
+  width: calc(50% - 1rem);
+}
+
+.ais-Hits-item img {
+  margin-right: 1em;
+}
+
+.hit-name {
+  margin-bottom: 0.5em;
+}
+
+.hit-description {
+  color: #888;
+  font-size: 14px;
+  margin-bottom: 0.5em;
+}
diff --git a/InstantSearch.js/algolia-insights/src/app.js b/InstantSearch.js/algolia-insights/src/app.js
@@ -0,0 +1,98 @@
+/* global instantsearch algoliasearch */
+
+const search = instantsearch({
+  indexName: 'demo_ecommerce',
+  searchClient: algoliasearch('B1G2GM9NG0', 'aadef574be1f9252bb48d4ea09b5cfe5'),
+  searchParameters: {
+    clickAnalytics: true,
+  },
+});
+
+search.addWidget(
+  instantsearch.widgets.searchBox({
+    container: '#searchbox',
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.clearRefinements({
+    container: '#clear-refinements',
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.refinementList({
+    container: '#brand-list',
+    attribute: 'brand',
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.hits({
+    container: '#hits',
+    templates: {
+      item: hit => `
+        <div>
+          <img src="${hit.image}" align="left" alt="${hit.name}" />
+          <div class="hit-name">
+            ${hit.name}
+          </div>
+          <div>
+           <button class="button-click"
+              data-algolia-objectid="${hit.objectID}"
+              data-algolia-position="${hit.hitPosition}"
+              data-algolia-queryid="${hit.queryID}"
+            >
+             Click event
+           </button>
+           <button class="button-conversion"
+              data-algolia-objectid="${hit.objectID}"
+              data-algolia-queryid="${hit.queryID}"
+           >
+             Conversion event
+           </button>
+          </div>
+        </div>
+      `,
+    },
+    transformItems(items) {
+      const result = search.helper.lastResults;
+      const offset = result.hitsPerPage * result.page;
+
+      return items.map((item, index) => ({
+        ...item,
+        name: item.name.toUpperCase(),
+        queryID: result.queryID,
+        hitPosition: offset + index + 1,
+      }));
+    },
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.pagination({
+    container: '#pagination',
+  })
+);
+
+search.start();
+
+document.getElementById('hits').addEventListener('click', e => {
+  if (e.target.matches('.button-click')) {
+    window.aa('clickedObjectIDsAfterSearch', {
+      index: 'demo_ecommerce',
+      eventName: 'click-result',
+      objectIDs: [e.target.getAttribute('data-algolia-objectid')],
+      queryID: e.target.getAttribute('data-algolia-queryid'),
+      // parseInt because getAttribute always returns a string
+      positions: [parseInt(e.target.getAttribute('data-algolia-position'), 10)],
+    });
+  } else if (e.target.matches('.button-conversion')) {
+    aa('convertedObjectIDsAfterSearch', {
+      index: 'demo_ecommerce',
+      eventName: 'conversion',
+      queryID: e.target.getAttribute('data-algolia-queryid'),
+      objectIDs: [e.target.getAttribute('data-algolia-objectid')],
+    });
+  }
+});
diff --git a/InstantSearch.js/algolia-insights/src/index.css b/InstantSearch.js/algolia-insights/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';
+}