Add Mustache support, move to CDN scripts.

Nosto · Oct 26, 2023 · 445285b · 445285b
1 parent 4d908e0
commit 445285b
Show file tree

Hide file tree

Showing 12 changed files with 471 additions and 11 deletions.
diff --git a/examples/liquid/index.html b/examples/liquid/index.html
@@ -31,6 +31,11 @@
             onload="setTimeout(function() { window.initAutocomplete() }, 100)"
         ></script>
 
+        <script
+            src="https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.min.js"
+            crossorigin
+        ></script>
+
         <link rel="stylesheet" href="autocomplete.css" />
         <script>
             window.initAutocomplete = function () {

diff --git a/examples/mustache/autocomplete.css b/examples/mustache/autocomplete.css
@@ -0,0 +1,151 @@
+#search-form {
+    position: relative;
+}
+
+.ns-autocomplete {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    position: absolute;
+    z-index: 1001;
+    left: 0;
+    top: 100%;
+    width: 100%;
+    min-width: 250px;
+    max-width: 800px;
+    background: #fff;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+    overflow: hidden;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.ns-autocomplete-results {
+    width: 100%;
+}
+
+.ns-autocomplete-keywords,
+.ns-autocomplete-history {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #F0F3F6;
+    border-radius: 0;
+}
+
+.ns-autocomplete-header {
+    padding: 0.25rem 1rem;
+    color: #000000;
+    font-weight: bold;
+    font-size: 0.9rem;
+}
+
+.ns-autocomplete-keyword,
+.ns-autocomplete-history-item {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 1rem;
+    color: #000000;
+    font-size: 0.9rem;
+    cursor: pointer;
+}
+
+.ns-autocomplete-keyword:hover,
+.ns-autocomplete-keyword.selected,
+.ns-autocomplete-history-item:hover,
+.ns-autocomplete-history-item.selected {
+    background-color: #F0F3F6;
+}
+
+.ns-autocomplete-history-item-remove {
+    margin-right: 0;
+    margin-left: auto;
+    text-decoration: none;
+    color: inherit;
+    font-size: 0.75rem;
+}
+
+.ns-autocomplete-history-item-remove:hover {
+    color: #999999;
+}
+
+.ns-autocomplete-products {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    border-bottom: 1px solid #F0F3F6;
+    border-radius: 0
+}
+
+.ns-autocomplete-product {
+    display: flex;
+    flex-direction: row;
+    padding: 0.25rem 1rem;
+    color: #000000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.ns-autocomplete-product:hover,
+.ns-autocomplete-product.selected {
+    background-color: #F0F3F6;
+}
+
+.ns-autocomplete-product-image {
+    height: auto;
+    object-fit: contain;
+}
+
+.ns-autocomplete-product-info {
+    padding-left: 0.5rem;
+}
+
+.ns-autocomplete-product-brand {
+    font-size: 0.9rem;
+    margin-bottom: 0.25rem;
+    color: #516980;
+}
+
+.ns-autocomplete-product-name {
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
+}
+
+.ns-autocomplete-product-list-price {
+    font-size: 1rem;
+    text-decoration: line-through;
+    margin-left: 0.5rem;
+    color: #516980;
+}
+
+.ns-autocomplete-submit,
+.ns-autocomplete-history-clear {
+    display: flex;
+    justify-content: center;
+}
+
+.ns-autocomplete-submit:hover,
+.ns-autocomplete-history-clear:hover {
+    background-color: #F0F3F6;
+}
+
+.ns-autocomplete-button {
+    font-family: inherit;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    background-color: transparent;
+    border: 1px solid transparent;
+    padding: 0.5rem;
+    font-size: 0.9rem;
+    border-radius: 4px;
+    width: 100%;
+}
diff --git a/examples/mustache/autocomplete.mustache b/examples/mustache/autocomplete.mustache
@@ -0,0 +1,79 @@
+{{#hasKeywords}}
+  <div class="ns-autocomplete-keywords">
+    <div class="ns-autocomplete-header">
+      Keywords
+    </div>
+    {{#response.keywords.hits}}
+      <div class="ns-autocomplete-keyword" data-ns-hit="{{json this}}">
+        {{#_highlight.keyword}}
+          <span>{{.}}</span>
+        {{/_highlight.keyword}}
+        {{^_highlight.keyword}}
+          <span>{{keyword}}</span>
+        {{/_highlight.keyword}}
+      </div>
+    {{/response.keywords.hits}}
+  </div>
+{{/hasKeywords}}
+
+{{#hasProducts}}
+  <div class="ns-autocomplete-products">
+    <div class="ns-autocomplete-header">
+      Products
+    </div>
+    {{#response.products.hits}}
+      <a class="ns-autocomplete-product" href="{{url}}" data-ns-hit="{{json this}}">
+        <img class="ns-autocomplete-product-image" src="{{imageUrl}}" alt="{{name}}" width="60" height="40" />
+        <div class="ns-autocomplete-product-info">
+          {{#brand}}
+            <div class="ns-autocomplete-product-brand">
+              {{.}}
+            </div>
+          {{/brand}}
+          <div class="ns-autocomplete-product-name">
+            {{name}}
+          </div>
+          <div>
+            <span>
+              {{price}}&euro;
+            </span>
+            {{#listPrice}}
+              <span class="ns-autocomplete-product-list-price">
+                {{.}}&euro;
+              </span>
+            {{/listPrice}}
+          </div>
+        </div>
+      </a>
+    {{/response.products.hits}}
+  </div>
+{{/hasProducts}}
+
+{{#hasHistory}}
+  <div class="ns-autocomplete-history">
+    <div class="ns-autocomplete-header">
+      Recently searched
+    </div>
+    {{#history}}
+      <div class="ns-autocomplete-history-item" data-ns-hit="{{json this}}">
+        {{item}}
+        <a href="javascript:void(0)" class="ns-autocomplete-history-item-remove" data-ns-remove-history="{{item}}">
+          &#x2715;
+        </a>
+      </div>
+    {{/history}}
+  </div>
+  <div class="ns-autocomplete-history-clear">
+    <button type="button" class="ns-autocomplete-button" data-ns-remove-history="all">
+      Clear history
+    </button>
+  </div>
+{{/hasHistory}}
+
+{{#hasKeywords}}{{#hasProducts}}
+  <div class="ns-autocomplete-submit">
+    <button type="submit" class="ns-autocomplete-button">
+      See all search results
+    </button>
+  </div>
+{{/hasProducts}}{{/hasKeywords}}
diff --git a/examples/mustache/global.css b/examples/mustache/global.css
@@ -0,0 +1,40 @@
+* {
+    outline: none;
+}
+
+html,
+body {
+    height: 100%;
+    min-height: 100%;
+    background-color: #1eaddc;
+}
+
+body {
+    margin: 0;
+}
+
+#search-form {
+    display: flex;
+    justify-content: center;
+    margin: 10px;
+    max-width: 450px;
+    margin: 30px auto 0 auto;
+}
+
+#search {
+    padding: 8px;
+    border: solid 1px grey;
+    font-size: 17px;
+    width: 100%;
+}
+
+#search:focus {
+    outline: 0;
+}
+
+#search-button {
+    border: solid 1px grey;
+    margin: 0 0 0 -1px;
+    padding: 8px;
+    background-color: white;
+}
diff --git a/examples/mustache/index.html b/examples/mustache/index.html
@@ -0,0 +1,84 @@
+<!doctype html>
+
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <title>Nosto Autocomplete</title>
+        <link rel="stylesheet" href="global.css" />
+
+        <!-- Include default nosto code -->
+        <script>
+            ;(function () {
+                var name = 'nostojs'
+                window[name] =
+                    window[name] ||
+                    function (cb) {
+                        ;(window[name].q = window[name].q || []).push(cb)
+                    }
+            })()
+        </script>
+        <!-- Include demo merchant with ability to run it locally -->
+        <script
+            src="https://connect.nosto.com/include/shopify-9758212174"
+            async
+            onload="setTimeout(function() { window.nosto.reload({site: location.hostname, searchEnabled: false }) }, 100)"
+        ></script>
+        <script
+            src="../../dist/nosto-autocomplete.umd.js"
+            async
+            onload="setTimeout(function() { window.initAutocomplete() }, 100)"
+        ></script>
+        <script
+            src="https://unpkg.com/mustache@4.2.0/mustache.min.js"
+            crossorigin
+        ></script>
+
+        <link rel="stylesheet" href="autocomplete.css" />
+        <script>
+            window.initAutocomplete = function () {
+                window.nostoAutocomplete.autocomplete({
+                    fetch: {
+                        products: {
+                            fields: [
+                                'name',
+                                'url',
+                                'imageUrl',
+                                'price',
+                                'listPrice',
+                                'brand',
+                            ],
+                            size: 5,
+                        },
+                        keywords: {
+                            size: 5,
+                            fields: ['keyword', '_highlight.keyword'],
+                            highlight: {
+                                preTag: `<strong>`,
+                                postTag: '</strong>',
+                            },
+                        },
+                    },
+                    inputSelector: '#search',
+                    dropdownSelector: '#search-results',
+                    render: window.nostoAutocomplete.fromRemoteMustacheTemplate(
+                        'autocomplete.mustache',
+                    ),
+                    submit: (query) => {
+                        // Handle search submit
+                        console.log('Submitting search with query: ', query)
+                    },
+                })
+            }
+        </script>
+    </head>
+
+    <body>
+        <form id="search-form">
+            <input type="text" id="search" placeholder="search" />
+            <button type="submit" id="search-button">Search</button>
+            <div id="search-results" class="ns-autocomplete"></div>
+        </form>
+    </body>
+</html>
diff --git a/package-lock.json b/package-lock.json