Merge pull request #43 from Woosmap/dev/search-samples

Search without map samples (MultiSearch, Stores Autocomplete)
Woosmap · Mar 14, 2024 · e0d2b08 · e0d2b08
2 parents 86fc73d + f870a79
commit e0d2b08
Show file tree

Hide file tree

Showing 22 changed files with 585 additions and 114 deletions.
diff --git a/e2e/samples/app.spec.ts b/e2e/samples/app.spec.ts
@@ -15,6 +15,8 @@ export const AUTOCOMPLETE_WITHOUT_MAP_SAMPLES = [
   "localities-js-api",
   "localities-js-widget",
   "localities-js-widget-custom-desc",
+  "multisearch-js-api",
+  "stores-search-autocomplete-api",
 ];
 
 const samples = fs

diff --git a/samples/env.11ty.js b/samples/env.11ty.js
@@ -12,6 +12,10 @@ module.exports = {
   },
 
   render({ sample }) {
-    return `VITE_WOOSMAP_PUBLIC_API_KEY=${sample.data.WOOSMAP_PUBLIC_API_KEY ? sample.data.WOOSMAP_PUBLIC_API_KEY : "woos-48c80350-88aa-333e-835a-07f4b658a9a4"}`;
+    let output = `VITE_WOOSMAP_PUBLIC_API_KEY=${sample.data.WOOSMAP_PUBLIC_API_KEY ? sample.data.WOOSMAP_PUBLIC_API_KEY : "woos-48c80350-88aa-333e-835a-07f4b658a9a4"}`;
+    if (sample.data.GOOGLE_API_KEY) {
+      output += `\nVITE_GOOGLE_API_KEY=${sample.data.GOOGLE_API_KEY}`;
+    }
+    return output;
   },
 };
diff --git a/samples/env.d.ts.11ty.js b/samples/env.d.ts.11ty.js
@@ -11,18 +11,27 @@ module.exports = {
     };
   },
 
-  render() {
-    return `/// <reference types="vite/client" />
+  render({ sample }) {
+    let output = `/// <reference types="vite/client" />
 
 /**
  *  @external https://vitejs.dev/guide/env-and-mode.html
  */
 interface ImportMetaEnv {
-    readonly VITE_WOOSMAP_PUBLIC_API_KEY: string
+    readonly VITE_WOOSMAP_PUBLIC_API_KEY: string`;
+
+    if (sample.data.GOOGLE_API_KEY) {
+      output += `
+    readonly VITE_GOOGLE_API_KEY: string`;
+    }
+
+    output += `
 }
 
 interface ImportMeta {
     readonly env: ImportMetaEnv
 }`;
+
+    return output;
   },
 };
diff --git a/samples/localities-api-autocomplete-advanced/index.njk b/samples/localities-api-autocomplete-advanced/index.njk
@@ -2,21 +2,27 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div id="autocomplete-container">
-            {% svgIcon 'search.svg' %}
-            <input
-                    type="text"
-                    id="autocomplete-input"
-                    placeholder="Search a locality or a postal code..."
-                    autocomplete="off"
-            />
-            <button aria-label="Clear" class="clear-searchButton" type="button">
-                {% svgIcon 'clear.svg' %}
-            </button>
-            <ul id="suggestions-list"></ul>
+        <p class="title">Autocomplete input with Woosmap Localities API</p>
+        <p class="note">
+            <em>Restrictions on "locality|postal_code|address", country "fr|gb|it|es|de"</em>
+        </p>
+        <div class="search-container">
+            <div id="autocomplete-container">
+                {% svgIcon 'search.svg' %}
+                <input
+                        type="text"
+                        id="autocomplete-input"
+                        placeholder="Search a locality or a postal code..."
+                        autocomplete="off"
+                />
+                <button aria-label="Clear" class="clear-searchButton" type="button">
+                    {% svgIcon 'clear.svg' %}
+                </button>
+                <ul id="suggestions-list"></ul>
+            </div>
         </div>
         <pre id="response-container"></pre>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
-{% block api %}{% endblock %}
+{% block api %}{% endblock %}
diff --git a/samples/localities-api-autocomplete-advanced/style.scss b/samples/localities-api-autocomplete-advanced/style.scss
@@ -4,28 +4,6 @@
 @include meta.load-css("../../shared/scss/_default.scss");
 @include meta.load-css("../../shared/scss/_autocomplete_input.scss");
 @include meta.load-css("../../shared/scss/_autocomplete_list.scss");
-
-body {
-  background-color: #eee;
-  overflow-y: hidden;
-}
-
-pre {
-  display: none;
-  margin: 70px 10px;
-  max-height: calc(100vh - 110px);
-  padding: 10px;
-  border: 3px solid #c8c8c8;
-  background-color: white;
-  border-radius: 8px;
-  white-space: pre-wrap;
-  overflow-x: auto;
-  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
-}
-
-
-.bold {
-  font-weight: 700;
-}
+@include meta.load-css("../../shared/scss/_autocomplete_without_map.scss");
 
 /* [END woosmap_localities_api_autocomplete_advanced] */
diff --git a/samples/localities-api-autocomplete/index.njk b/samples/localities-api-autocomplete/index.njk
@@ -2,21 +2,27 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div id="autocomplete-container">
-            {% svgIcon 'search.svg' %}
-            <input
-                    type="text"
-                    id="autocomplete-input"
-                    placeholder="Search a locality or a postal code..."
-                    autocomplete="off"
-            />
-            <button aria-label="Clear" class="clear-searchButton" type="button">
-                {% svgIcon 'clear.svg' %}
-            </button>
-            <ul id="suggestions-list"></ul>
+        <p class="title">Autocomplete input with Woosmap Localities API</p>
+        <p class="note">
+            <em>Restrictions on types "locality|postal_code"</em>
+        </p>
+        <div class="search-container">
+            <div id="autocomplete-container">
+                {% svgIcon 'search.svg' %}
+                <input
+                        type="text"
+                        id="autocomplete-input"
+                        placeholder="Search a locality or a postal code..."
+                        autocomplete="off"
+                />
+                <button aria-label="Clear" class="clear-searchButton" type="button">
+                    {% svgIcon 'clear.svg' %}
+                </button>
+                <ul id="suggestions-list"></ul>
+            </div>
         </div>
         <pre id="response-container"></pre>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
-{% block api %}{% endblock %}
+{% block api %}{% endblock %}
diff --git a/samples/localities-api-autocomplete/style.scss b/samples/localities-api-autocomplete/style.scss
@@ -4,28 +4,6 @@
 @include meta.load-css("../../shared/scss/_default.scss");
 @include meta.load-css("../../shared/scss/_autocomplete_input.scss");
 @include meta.load-css("../../shared/scss/_autocomplete_list.scss");
-
-
-body {
-  background-color: #eee;
-  overflow-y: hidden;
-}
-
-pre {
-  display: none;
-  margin: 70px 10px;
-  max-height: calc(100vh - 110px);
-  padding: 10px;
-  border: 3px solid #c8c8c8;
-  background-color: white;
-  border-radius: 8px;
-  white-space: pre-wrap;
-  overflow-x: auto;
-  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
-}
-
-.bold {
-  font-weight: 700;
-}
+@include meta.load-css("../../shared/scss/_autocomplete_without_map.scss");
 
 /* [END woosmap_localities_api_autocomplete] */
diff --git a/samples/localities-api-details-postalcodes/style.scss b/samples/localities-api-details-postalcodes/style.scss
@@ -9,21 +9,26 @@
   height: 100%;
   font-size: 13px;
 }
+
 .bold {
   font-weight: 700;
 }
+
 .light {
   font-size: 12px;
   color: #3d5afe;
   font-weight: 600;
 }
+
 .prediction-expandable {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='9' viewBox='0 0 5 9'%3E%3Cg fill='%23737373'%3E%3Cpath d='M0.714285714,8.57142857 C0.5,8.57142857 0.357142857,8.5 0.214285714,8.35714286 C-0.0714285714,8.07142857 -0.0714285714,7.64285714 0.214285714,7.35714286 L3.78571429,3.78571429 C4.07142857,3.5 4.5,3.5 4.78571429,3.78571429 C5.07142857,4.07142857 5.07142857,4.5 4.78571429,4.78571429 L1.21428571,8.35714286 C1.07142857,8.5 0.928571429,8.57142857 0.714285714,8.57142857 L0.714285714,8.57142857 Z'/%3E%3Cpath d='M4.28571429,5 C4.07142857,5 3.92857143,4.92857143 3.78571429,4.78571429 L0.214285714,1.21428571 C-0.0714285714,0.928571429 -0.0714285714,0.5 0.214285714,0.214285714 C0.5,-0.0714285714 0.928571429,-0.0714285714 1.21428571,0.214285714 L4.78571429,3.78571429 C5.07142857,4.07142857 5.07142857,4.5 4.78571429,4.78571429 C4.64285714,4.92857143 4.5,5 4.28571429,5 L4.28571429,5 Z'/%3E%3C/g%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
   background-position: right 5px center;
   padding-right: 18px;
 }
-#suggestions-list{
+
+#suggestions-list {
   font-size: 13px;
 }
+
 /* [END woosmap_localities_api_details_postalcodes] */
diff --git a/samples/localities-js-api/index.njk b/samples/localities-js-api/index.njk
@@ -5,18 +5,24 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div id="autocomplete-container">
-            {% svgIcon 'search.svg' %}
-            <input
-                    type="text"
-                    id="autocomplete-input"
-                    placeholder="Search a locality or a postal code..."
-                    autocomplete="off"
-            />
-            <button aria-label="Clear" class="clear-searchButton" type="button">
-                {% svgIcon 'clear.svg' %}
-            </button>
-            <ul id="suggestions-list"></ul>
+        <p class="title">Autocomplete input with Woosmap Localities JS API</p>
+        <p class="note">
+            <em>Custom Description for Postal Codes "{name} ({postal_town}) - {administrative_area_level_0}"</em>
+        </p>
+        <div class="search-container">
+            <div id="autocomplete-container">
+                {% svgIcon 'search.svg' %}
+                <input
+                        type="text"
+                        id="autocomplete-input"
+                        placeholder="Search a locality or a postal code..."
+                        autocomplete="off"
+                />
+                <button aria-label="Clear" class="clear-searchButton" type="button">
+                    {% svgIcon 'clear.svg' %}
+                </button>
+                <ul id="suggestions-list"></ul>
+            </div>
         </div>
         <pre id="response-container"></pre>
     </div>

diff --git a/samples/localities-js-api/index.ts b/samples/localities-js-api/index.ts
@@ -56,7 +56,6 @@ function handleAutocomplete(): void {
 function displaySuggestions({
   localities,
 }: woosmap.map.localities.LocalitiesAutocompleteResponse) {
-  console.log(localities)
   if (inputElement && suggestionsList) {
     suggestionsList.innerHTML = "";
     if (localities.length > 0) {

diff --git a/samples/localities-js-api/style.scss b/samples/localities-js-api/style.scss
@@ -4,28 +4,6 @@
 @include meta.load-css("../../shared/scss/_default.scss");
 @include meta.load-css("../../shared/scss/_autocomplete_input.scss");
 @include meta.load-css("../../shared/scss/_autocomplete_list.scss");
-
-
-body {
-  background-color: #eee;
-  overflow-y: hidden;
-}
-
-pre {
-  display: none;
-  margin: 70px 10px;
-  max-height: calc(100vh - 110px);
-  padding: 10px;
-  border: 3px solid #c8c8c8;
-  background-color: white;
-  border-radius: 8px;
-  white-space: pre-wrap;
-  overflow-x: auto;
-  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
-}
-
-.bold {
-  font-weight: 700;
-}
+@include meta.load-css("../../shared/scss/_autocomplete_without_map.scss");
 
 /* [END woosmap_localities_js_api] */
diff --git a/samples/multisearch-js-api/index.njk b/samples/multisearch-js-api/index.njk
@@ -0,0 +1,31 @@
+{% extends '../../src/_includes/layout.njk' %}
+{% block external %}
+    <script src="https://sdk.woosmap.com/multisearch/multisearch.js"></script>
+{% endblock %}
+{% block html %}
+    <!-- [START woosmap_{{ tag }}_div] -->
+    <div id="app">
+        <p class="title">Autocomplete input with Woosmap MultiSearch JS API</p>
+        <p class="note">
+            <em>Search Localities on types `locality|postal_code|address`, fallback to Google Places.</em>
+        </p>
+        <div class="search-container">
+            <div id="autocomplete-container">
+                {% svgIcon 'search.svg' %}
+                <input
+                        type="text"
+                        id="autocomplete-input"
+                        placeholder="Search a locality or a postal code..."
+                        autocomplete="off"
+                />
+                <button aria-label="Clear" class="clear-searchButton" type="button">
+                    {% svgIcon 'clear.svg' %}
+                </button>
+                <ul id="suggestions-list"></ul>
+            </div>
+        </div>
+        <pre id="response-container"></pre>
+    </div>
+    <!-- [END woosmap_{{ tag }}_div] -->
+{% endblock %}
+{% block api %}{% endblock %}