Update retailer list on moveend map event

view/frontend/templates/product/view/retailer/availability.phtml

@@ -77,7 +77,7 @@ use Smile\RetailerOffer\Block\Catalog\Product\Retailer\Availability;
         </div>
     </div>
     <div class="action showavailability" data-bind="scope: 'catalog-product-retailer-availability'">
-        <a href="#" class="text" data-bind="text: getLinkLabel()"></a>
+        <a href="#" class="text" data-bind="text: getLinkLabel(), click: loadRetailerAvailabilityModal"></a>
     </div>
 </div>
 

view/frontend/web/css/source/_module.less

@@ -43,7 +43,7 @@
         }
 
         .store-view-map .map {
-            max-width: 986px;
+            max-width: 100%;
             height: 400px;
             background: #666;
             z-index: 1;
@@ -59,7 +59,8 @@
             list-style-type: none;
             margin: 10px 0 0;
             padding: 0;
-            max-height: 420px;
+            max-height: 215px;
+            min-height: 215px;
             overflow-y: scroll;
 
             li.result-item {

view/frontend/web/js/retailer/product-availability.js

@@ -172,6 +172,27 @@ define([
                 this.map.refreshDisplayedMarkers();
                 this.displayedOffers(this.map.displayedMarkers());
             }.bind(this));
+        },
+
+        /**
+         * Load modal function to set moveend event on map
+         *
+         * @returns {string}
+         */
+        loadRetailerAvailabilityModal : function () {
+            let self = this;
+            registry.get(this.name + '.map', function (map) {
+                this.map = map;
+
+                // Update map if geolocation is ON and customer already click to geolocalize button
+                if (navigator.geolocation && window.location.search === '' && window.location.hash.length > 1) {
+                    self.geolocalizeMe();
+                }
+
+                // Refresh moveen trigger
+                this.map.map.off('moveend');
+                this.map.map.on('moveend', self.updateDisplayedOffers.bind(self));
+            }.bind(this));
         }
     });
 });