From 2e22eec2cd981dea890fb1ea85a9287cb4071ef9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20Magrez?= Date: Thu, 7 Mar 2024 17:09:50 +0100 Subject: [PATCH] Add map on modal and set geolocation button --- .../Catalog/Product/Retailer/Availability.php | 17 ++ view/frontend/layout/catalog_product_view.xml | 9 + .../product/view/retailer/availability.phtml | 15 +- view/frontend/web/css/source/_module.less | 160 ++++++++++-------- .../web/js/retailer/product-availability.js | 27 ++- 5 files changed, 152 insertions(+), 76 deletions(-) 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..029582a 100644 --- a/view/frontend/templates/product/view/retailer/availability.phtml +++ b/view/frontend/templates/product/view/retailer/availability.phtml @@ -30,7 +30,7 @@ use Smile\RetailerOffer\Block\Catalog\Product\Retailer\Availability;
-
@@ -39,6 +39,13 @@ use Smile\RetailerOffer\Block\Catalog\Product\Retailer\Availability;
+
+
+ +
+
@@ -48,6 +55,12 @@ 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..a9d3793 100644 --- a/view/frontend/web/css/source/_module.less +++ b/view/frontend/web/css/source/_module.less @@ -1,103 +1,119 @@ // // 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: 986px; + 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: 420px; + 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..b3d8354 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"; @@ -25,6 +27,7 @@ define([ marker.distance = ko.observable(0); }); this.storeOffers = ko.observable(offers.getList()); + console.log(this.storeOffers()) this.displayedOffers = ko.observable(offers.getList()); this.observe(['fulltextSearch']); }, @@ -135,6 +138,24 @@ define([ } return result; - } + }, + + geolocalizeMe: function() { + registry.get(this.name + '.geocoder', function (geocoder) { + this.geocoder = geocoder; + this.geocoder.geolocalize(this.geolocationSuccess.bind(this)) + }.bind(this)); + }, + + geolocationSuccess: function(position) { + if (position.coords && position.coords.latitude && position.coords.longitude) { + var coords = new L.latLng(position.coords.latitude, position.coords.longitude); + registry.get(this.name + '.map', function (map) { + this.map = map; + this.map.applyPosition(position); + this.map.filterMarkersByBounds(this.storeOffers(), bounds); + }.bind(this)); + } + }, }); });