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/js/retailer/product-availability.js

@@ -141,8 +141,6 @@ define([
 
         /**
          * Geolocalize me button action
-         *
-         * @returns {string}
          */
         geolocalizeMe: function() {
             registry.get(this.name + '.geocoder', function (geocoder) {
@@ -153,8 +151,6 @@ define([
 
         /**
          * Action on geolocation success
-         *
-         * @returns {string}
          */
         geolocationSuccess: function(position) {
             if (position.coords && position.coords.latitude && position.coords.longitude) {
@@ -169,15 +165,26 @@ define([
 
         /**
          * Update list of displayed offers
-         *
-         * @returns {string}
          */
         updateDisplayedOffers: function () {
             registry.get(this.name + '.map', function (map) {
                 this.map = map;
                 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;
+                this.map.map.on('moveend', self.updateDisplayedOffers.bind(self));
+            }.bind(this));
         }
     });
 });