Hide modal elements before loading (#76)

* Add position marker and hide map element before loading * Search form with geocoder and apply position --------- Co-authored-by: Cédric Magrez <[email protected]>
Smile-SA · Apr 30, 2024 · 0f242c6 · 0f242c6
1 parent ce6c4c6
commit 0f242c6
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 53 deletions.
diff --git a/view/frontend/web/css/source/_module.less b/view/frontend/web/css/source/_module.less
@@ -24,6 +24,8 @@
     }
 
     .catalog-product-stores-availability-content {
+        display: none;
+
         .fulltext-search-wrapper {
             .form {
                 display: flex;
@@ -44,10 +46,8 @@
 
         .store-view-map .map {
             max-width: 100%;
-            height: 400px;
-            background: #666;
+            height: 0;
             z-index: 1;
-            float: left;
             display: inline-block;
             margin-bottom: 20px;
             width: 100%;
@@ -60,7 +60,6 @@
             margin: 10px 0 0;
             padding: 0;
             max-height: 215px;
-            min-height: 215px;
             overflow-y: scroll;
 
             li.result-item {
@@ -115,6 +114,16 @@
     .catalog-product-retailer-availability .showavailability {
         cursor: pointer;
     }
+
+    .modal-popup {
+        .catalog-product-stores-availability-content {
+            display: block;
+        }
+
+        .store-view-map .map {
+            height: 400px;
+        }
+    }
 }
 
 //

diff --git a/view/frontend/web/js/retailer/product-availability.js b/view/frontend/web/js/retailer/product-availability.js
@@ -35,53 +35,19 @@ define([
          * Search Shop per words
          */
         onSearchOffers: function() {
-            this.displayedOffers(
-                this.filterPerWords(this.storeOffers(), this.fulltextSearch())
-            );
-        },
-
-        /**
-         * Custom filter to allow approaching result per words
-         *
-         * @param markers
-         * @param terms
-         * @returns {[]|jQuery|*[]|*|null}
-         */
-        filterPerWords(markers, terms) {
-            let self = this;
-            let arrayOfTerms = terms.split(' ');
-            let term = $.map(arrayOfTerms, function (tm) {
-                if (tm.length <= 2) {
-                    // ignore smallest term for performance reason
-                    return null;
-                }
-                return $.ui.autocomplete.escapeRegex(self.normalizeAccent(tm));
-            }).join('|');
-            let matcher= new RegExp("\\b" + term, "i");
-
-            if (term.length <= 2) {
-                // ignore smallest term for performance reason
-                return null;
-            }
-
-            return $.grep(markers, function (marker) {
-                // try to match one of the 4 elements
-                return matcher.test(marker.name)
-                    || matcher.test(marker.postCode)
-                    || matcher.test(self.normalizeAccent(marker.city))
-                    || matcher.test(marker.region)
-                ;
-            });
-        },
-
-        /**
-         * Replace accent from string
-         *
-         * @param str
-         * @returns {*}
-         */
-        normalizeAccent: function(str) {
-            return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+            registry.get(this.name + '.geocoder', function (geocoder) {
+                this.geocoder = geocoder;
+                this.geocoder.fulltextSearch(this.fulltextSearch());
+                this.geocoder.currentResult.subscribe(function (result) {
+                    if (result && result.location) {
+                        this.findPositionSuccess(
+                            {coords: {latitude: result.location.lat, longitude: result.location.lng}},
+                            this.fulltextSearch()
+                        );
+                    }
+                }.bind(this));
+                this.geocoder.onSearch();
+            }.bind(this));
         },
 
         /**
@@ -145,18 +111,19 @@ define([
         geolocalizeMe: function() {
             registry.get(this.name + '.geocoder', function (geocoder) {
                 this.geocoder = geocoder;
-                this.geocoder.geolocalize(this.geolocationSuccess.bind(this))
+                this.geocoder.geolocalize(this.findPositionSuccess.bind(this))
             }.bind(this));
         },
 
         /**
          * Action on geolocation success
          */
-        geolocationSuccess: function(position) {
+        findPositionSuccess: function(position) {
             if (position.coords && position.coords.latitude && position.coords.longitude) {
                 registry.get(this.name + '.map', function (map) {
                     this.map = map;
                     this.map.applyPosition(position);
+                    this.map.addMarkerWithMyPosition(position);
                 }.bind(this));
 
                 this.updateDisplayedOffers();