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..cdf99dd 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,47 @@ define([
}
return result;
+ },
+
+ /**
+ * Geolocalize me button action
+ *
+ * @returns {string}
+ */
+ 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
+ *
+ * @returns {string}
+ */
+ 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
+ *
+ * @returns {string}
+ */
+ updateDisplayedOffers: function () {
+ registry.get(this.name + '.map', function (map) {
+ this.map = map;
+ this.map.refreshDisplayedMarkers();
+ this.displayedOffers(this.map.displayedMarkers());
+ }.bind(this));
}
});
});