Merge pull request #26 from Woosmap/dev/store-locator-widget

Migrate Store Locator Widget Samples
Woosmap · Feb 27, 2024 · 6926c7f · 6926c7f
2 parents 4e5ebe4 + 0f626ce
commit 6926c7f
Show file tree

Hide file tree

Showing 19 changed files with 1,500 additions and 5 deletions.
diff --git a/samples/env.11ty.js b/samples/env.11ty.js
@@ -11,7 +11,7 @@ module.exports = {
     };
   },
 
-  render() {
-    return `VITE_WOOSMAP_PUBLIC_API_KEY=woos-48c80350-88aa-333e-835a-07f4b658a9a4`;
+  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"}`;
   },
 };
diff --git a/samples/highlight.html.njk b/samples/highlight.html.njk
@@ -158,7 +158,7 @@ permalink: /samples/{{ sample.fileSlug }}/highlight/highlight.html
         </div>
     </div>
     <div id="mapContainer">
-        <iframe id="iframe" title="{{ sample.data.title }}" src="./index.html" allow="geolocation"></iframe>
+        <iframe id="iframe" title="{{ sample.data.title }}" src="../iframe/index.html" allow="geolocation"></iframe>
     </div>
 </div>
 <script src="https://developers.woosmap.com/assets/js/copy_snippet.js"></script>

diff --git a/samples/store-locator-custom-filters/index.njk b/samples/store-locator-custom-filters/index.njk
@@ -0,0 +1,10 @@
+{% extends '../../src/_includes/layout.njk' %}
+{% block external %}
+    <script src="https://webapp.woosmap.com/webapp.js"></script>
+{% endblock %}
+{% block html %}
+    <!-- [START woosmap_{{ tag }}_div] -->
+    <div id="map"></div>
+    <!-- [END woosmap_{{ tag }}_div] -->
+{% endblock %}
+{% block api %}{% endblock %}
diff --git a/samples/store-locator-custom-filters/index.ts b/samples/store-locator-custom-filters/index.ts
@@ -0,0 +1,164 @@
+// [START woosmap_store_locator_custom_filters]
+const availableServices = [
+  { key: "WF", en: "Wireless Hotspot" },
+  { key: "CD", en: "Mobile Payment" },
+  { key: "DT", en: "Drive-Thru" },
+  { key: "DR", en: "Digital Rewards" },
+  { key: "hrs24", en: "Open 24 hours per day" },
+  { key: "WA", en: "Oven-warmed Food" },
+  { key: "LB", en: "LaBoulange" },
+  { key: "XO", en: "Mobile Order and Pay" },
+  { key: "VS", en: "Verismo" },
+  { key: "NB", en: "Nitro Cold Brew" },
+  { key: "CL", en: "Starbucks Reserve-Clover Brewed" },
+];
+
+const storeLocatorConfig = {
+  maps: {
+    provider: "woosmap",
+    localities: {
+      types: [],
+      componentRestrictions: { country: "gb" },
+    },
+  },
+  filters: {
+    filters: [
+      {
+        propertyType: "tag",
+        title: {
+          en: "Amenities",
+        },
+        choices: availableServices,
+        innerOperator: "or",
+      },
+      {
+        propertyType: "custom",
+        title: {
+          en: "Country",
+        },
+        choices: [
+          {
+            key: 'country:="US"',
+            en: "United States",
+          },
+          {
+            key: 'country:="GB"',
+            en: "United Kingdom",
+          },
+          {
+            key: 'country:="DE"',
+            en: "Germany",
+          },
+          {
+            key: 'country:="FR"',
+            en: "France",
+          },
+        ],
+        innerOperator: "or",
+      },
+    ],
+    outerOperator: "and",
+  },
+  theme: {
+    primary_color: "#008248",
+  },
+  woosmapview: {
+    initialCenter: {
+      lat: 54,
+      lng: -3,
+    },
+    initialZoom: 7,
+    breakPoint: 11,
+    style: {
+      default: {
+        icon: {
+          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker.svg",
+          scaledSize: {
+            height: 47,
+            width: 40,
+          },
+        },
+        numberedIcon: {
+          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker.svg",
+          scaledSize: {
+            height: 47,
+            width: 40,
+          },
+        },
+        selectedIcon: {
+          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker-selected.svg",
+          scaledSize: {
+            height: 71,
+            width: 61,
+          },
+        },
+      },
+    },
+    tileStyle: {
+      color: "#008248",
+      size: 15,
+      minSize: 6,
+    },
+  },
+};
+
+function isMobileDevice(): boolean {
+  return window.innerWidth < 500;
+}
+
+function createDiv(className = "", innerHTML = ""): HTMLDivElement {
+  const div = document.createElement("div");
+  div.className = className;
+  div.innerHTML = innerHTML;
+  return div;
+}
+
+function filterPanelRenderer(
+  title: string,
+  children: HTMLElement[],
+): HTMLDivElement {
+  const div = createDiv(
+    "filters-list",
+    `<div class='filter-group'>${title}</div>`,
+  );
+  children.forEach((item: HTMLElement) => {
+    div.appendChild(item);
+  });
+  return div;
+}
+
+function filterRenderer(
+  key: string,
+  label: string,
+  selected: boolean,
+): HTMLDivElement {
+  const className = key.startsWith("country")
+    ? `${key.split("=").pop()?.replace(/[",]+/g, "")} country`
+    : key;
+  return createDiv(
+    selected ? "active" : "",
+    `<button><div class='icon-service icon-${className}'></div><div class='flex-grow'>${label}</div><div class='active-icon-wrapper'></div></button>`,
+  );
+}
+
+function initStoreLocator(): void {
+  const webapp = new window.WebApp("map", "YOUR_API_KEY");
+
+  webapp.setConf(storeLocatorConfig);
+  webapp.setFilterPanelRenderer(filterPanelRenderer);
+  webapp.setFilterRenderer(filterRenderer);
+
+  webapp.render(isMobileDevice());
+}
+
+initStoreLocator();
+
+declare global {
+  // currently, the WebApp typings are not exported, so we use `any` here
+  interface Window {
+    WebApp: new (elementId: string, projectKey: string) => any;
+  }
+}
+// [END woosmap_store_locator_custom_filters]
+
+export {};
diff --git a/samples/store-locator-custom-filters/store-locator-custom-filters.json b/samples/store-locator-custom-filters/store-locator-custom-filters.json
@@ -0,0 +1,12 @@
+{
+  "title": "Store Locator Widget - Custom Filters",
+  "description": "Change the default filters block by applying your own style and creating filters based on search query.",
+  "tag": "store_locator_custom_filters",
+  "name": "store-locator-custom-filters",
+  "pagination": {
+    "data": "mode",
+    "size": 1,
+    "alias": "mode"
+  },
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+}
diff --git a/samples/store-locator-custom-filters/style.scss b/samples/store-locator-custom-filters/style.scss
diff --git a/samples/store-locator-widget-custom-renderer/index.njk b/samples/store-locator-widget-custom-renderer/index.njk
@@ -0,0 +1,10 @@
+{% extends '../../src/_includes/layout.njk' %}
+{% block external %}
+    <script src="https://webapp.woosmap.com/webapp.js"></script>
+{% endblock %}
+{% block html %}
+    <!-- [START woosmap_{{ tag }}_div] -->
+    <div id="map"></div>
+    <!-- [END woosmap_{{ tag }}_div] -->
+{% endblock %}
+{% block api %}{% endblock %}