Skip to content

Commit

Permalink
Add map on modal and set geolocation button
Browse files Browse the repository at this point in the history
  • Loading branch information
@cemag44
cemag44 committed Mar 21, 2024
1 parent 1513064 commit 19dad91
Show file tree
Hide file tree
Showing 5 changed files with 166 additions and 74 deletions.
17 changes: 17 additions & 0 deletions Block/Catalog/Product/Retailer/Availability.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
9 changes: 9 additions & 0 deletions view/frontend/layout/catalog_product_view.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,16 @@
<item name="storeOffersListTemplate" xsi:type="string">Smile_RetailerOffer/retailer/product/store-list</item>
<item name="searchTitleText" xsi:type="string" translate="true">Find a store :</item>
<item name="searchButtonText" xsi:type="string" translate="true">Search</item>
<item name="geolocationButtonText" xsi:type="string" translate="true">Geolocalize me</item>
<item name="radius" xsi:type="string">25000</item>
<item name="children" xsi:type="array">
<item name="geocoder" xsi:type="array">
<item name="component" xsi:type="string">smile-geocoder</item>
</item>
<item name="map" xsi:type="array">
<item name="component" xsi:type="string">smile-map</item>
</item>
</item>
</item>
</item>
</argument>
Expand Down
13 changes: 13 additions & 0 deletions view/frontend/templates/product/view/retailer/availability.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,13 @@ use Smile\RetailerOffer\Block\Catalog\Product\Retailer\Availability;
<span data-bind="text: searchButtonText"></span>
</button>
</div>
<div data-bind="{ scope: requestChild('geocoder')}">
<div data-bind="afterRender: initGeocoder">
<button data-bind="click: $parent.geolocalizeMe.bind($parent)" class="action primary">
<span data-bind="text: $parent.geolocationButtonText"></span>
</button>
</div>
</div>
</div>
</form>
</div>
Expand All @@ -48,6 +55,12 @@ use Smile\RetailerOffer\Block\Catalog\Product\Retailer\Availability;
<li data-bind="template: $parent.storeOffersListTemplate" class="result-item"></li>
</ul>
</div>

<div data-bind="{ scope: requestChild('map')}">
<div id="store-view-map" class="store-view-map clearfix">
<div id="map-popin-availability" class="map" data-bind="afterRender: initMap"></div>
</div>
</div>
</div>
<div class="catalog-product-retailer-availability-content">
<div class="title">
Expand Down
160 changes: 88 additions & 72 deletions view/frontend/web/css/source/_module.less
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}

//
Expand Down
41 changes: 39 additions & 2 deletions view/frontend/web/js/retailer/product-availability.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -135,6 +137,41 @@ 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));
}
});
});

0 comments on commit 19dad91

Please sign in to comment.