diff --git a/Block/Catalog/Product/Retailer/Availability.php b/Block/Catalog/Product/Retailer/Availability.php index dec4723..53dbd47 100644 --- a/Block/Catalog/Product/Retailer/Availability.php +++ b/Block/Catalog/Product/Retailer/Availability.php @@ -66,6 +66,23 @@ public function getJsLayout() $jsLayout['components']['catalog-product-retailer-availability']['searchPlaceholderText'] = $this ->helperConfig->getSearchPlaceholder(); + // smile-geocoder child + $jsLayout['components']['catalog-product-retailer-availability']['children']['geocoder']['provider'] = $this->map + ->getIdentifier(); + $jsLayout['components']['catalog-product-retailer-availability']['children']['geocoder'] = array_merge( + $jsLayout['components']['catalog-product-retailer-availability']['children']['geocoder'], + $this->map->getConfig() + ); + + // smile-map child + $jsLayout['components']['catalog-product-retailer-availability']['children']['map']['provider'] = $this->map + ->getIdentifier(); + $jsLayout['components']['catalog-product-retailer-availability']['children']['map']['markers'] = $this->getStoreOffers(); + $jsLayout['components']['catalog-product-retailer-availability']['children']['map'] = array_merge( + $jsLayout['components']['catalog-product-retailer-availability']['children']['map'], + $this->map->getConfig() + ); + return json_encode($jsLayout); } diff --git a/view/frontend/layout/catalog_product_view.xml b/view/frontend/layout/catalog_product_view.xml index dc25de3..098f832 100644 --- a/view/frontend/layout/catalog_product_view.xml +++ b/view/frontend/layout/catalog_product_view.xml @@ -16,7 +16,16 @@ Smile_RetailerOffer/retailer/product/store-list Find a store : Search + Geolocalize me 25000 + + + smile-geocoder + + + smile-map + + diff --git a/view/frontend/templates/product/view/retailer/availability.phtml b/view/frontend/templates/product/view/retailer/availability.phtml index 39f84e2..f323790 100644 --- a/view/frontend/templates/product/view/retailer/availability.phtml +++ b/view/frontend/templates/product/view/retailer/availability.phtml @@ -39,6 +39,13 @@ use Smile\RetailerOffer\Block\Catalog\Product\Retailer\Availability; +
+
+ +
+
@@ -48,6 +55,12 @@ use Smile\RetailerOffer\Block\Catalog\Product\Retailer\Availability;
  • + +
    +
    +
    +
    +
    @@ -64,7 +77,7 @@ use Smile\RetailerOffer\Block\Catalog\Product\Retailer\Availability;
    - +
    diff --git a/view/frontend/web/css/source/_module.less b/view/frontend/web/css/source/_module.less index 6176e4f..4dd3de5 100644 --- a/view/frontend/web/css/source/_module.less +++ b/view/frontend/web/css/source/_module.less @@ -1,103 +1,120 @@ // // Shop details on product page // _____________________________________________ - -.catalog-product-retailer-availability-content { - .current-store { - .inStock { - .lib-message-icon-inner(success); +& when (@media-common = true) { + .catalog-product-retailer-availability-content { + .current-store { + .inStock { + .lib-message-icon-inner(success); + } + .outOfStock { + .lib-message-icon-inner(error); + } } - .outOfStock { - .lib-message-icon-inner(error); + + .store-name-value { + font-weight: bold; } } - .store-name-value { - font-weight: bold; + .product-store-availability { + border-bottom: 1px solid @color-gray-light5; + padding-bottom: 15px; + color: @color-gray34; } -} -.product-store-availability { - border-bottom: 1px solid @color-gray-light5; - padding-bottom: 15px; - color: @color-gray34; -} + .catalog-product-stores-availability-content { + .fulltext-search-wrapper { + .form { + display: flex; -.catalog-product-stores-availability-content { - .fulltext-search-wrapper { - .form { - display: flex; + .field { + min-width: 30%; + } - .field { - min-width: 30%; - } + .actions-toolbar { + display: flex; + } - button { - margin-left: 10px; + button { + margin-left: 10px; + } } } - } -} -.store-offers-list { - ul { - list-style-type: none; - margin: 10px 0 0; - padding: 0; - max-height: 420px; - overflow-y: scroll; - - li.result-item { - margin: 0; - padding: 5px; - border-top: 1px solid #d8d8d8; - display: flex; - align-items: center; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - - ::after { - clear: both; - content: ''; - display: table; - } + .store-view-map .map { + max-width: 100%; + height: 400px; + background: #666; + z-index: 1; + float: left; + display: inline-block; + margin-bottom: 20px; + width: 100%; + } + } - .store { - float:left; - min-width: 50%; - } + .store-offers-list { + ul { + list-style-type: none; + margin: 10px 0 0; + padding: 0; + max-height: 215px; + min-height: 215px; + overflow-y: scroll; - .availability { - float:left; - .available { - .lib-message-icon-inner(success); - margin-bottom: 0; + li.result-item { + margin: 0; + padding: 5px; + border-top: 1px solid #d8d8d8; + display: flex; + align-items: center; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + + ::after { + clear: both; + content: ''; + display: table; } - .unavailable { - .lib-message-icon-inner(error); - margin-bottom: 0; + .store { + float:left; + min-width: 50%; } - p { - min-width: 80px; + .availability { + float:left; + .available { + .lib-message-icon-inner(success); + margin-bottom: 0; + } + + .unavailable { + .lib-message-icon-inner(error); + margin-bottom: 0; + } + + p { + min-width: 80px; + } } - } - .actions { - margin-left:auto; - } + .actions { + margin-left:auto; + } - .breaker { - clear:both; + .breaker { + clear:both; + } } } } -} -.catalog-product-retailer-availability .showavailability { - cursor: pointer; + .catalog-product-retailer-availability .showavailability { + cursor: pointer; + } } // diff --git a/view/frontend/web/js/retailer/product-availability.js b/view/frontend/web/js/retailer/product-availability.js index 4d79617..4f94d58 100644 --- a/view/frontend/web/js/retailer/product-availability.js +++ b/view/frontend/web/js/retailer/product-availability.js @@ -5,9 +5,11 @@ define([ 'ko', 'uiRegistry', 'Smile_Map/js/model/markers', + 'leaflet', 'smile-storelocator-store-collection', - 'mage/translate' - ], function ($, Component, storage, ko, registry, Markers, StoreCollection) { + 'mage/translate', + 'jquery/ui' + ], function ($, Component, storage, ko, registry, Markers, L, StoreCollection) { "use strict"; @@ -135,6 +137,62 @@ define([ } return result; + }, + + /** + * Geolocalize me button action + */ + geolocalizeMe: function() { + registry.get(this.name + '.geocoder', function (geocoder) { + this.geocoder = geocoder; + this.geocoder.geolocalize(this.geolocationSuccess.bind(this)) + }.bind(this)); + }, + + /** + * Action on geolocation success + */ + geolocationSuccess: 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); + }.bind(this)); + + this.updateDisplayedOffers(); + } + }, + + /** + * Update list of displayed offers + */ + 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; + + // 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)); } }); });