209 lines
11 KiB
Plaintext
209 lines
11 KiB
Plaintext
@model CheckoutPickupPointsModel
|
|
|
|
@using System.Text
|
|
|
|
@if (!Model.PickupInStoreOnly && Model.PickupPoints.Any())
|
|
{
|
|
<div class="section pickup-in-store">
|
|
<div class="selector">
|
|
<input asp-for="PickupInStore" onclick="togglePickupInStore(this)" />
|
|
<label asp-for="PickupInStore">@T("Checkout.PickupPoints")</label>
|
|
</div>
|
|
<div class="description">
|
|
@T("Checkout.PickupPoints.Description")
|
|
</div>
|
|
<script asp-location="Footer">
|
|
$(function() {
|
|
togglePickupInStore($("#@Html.IdFor(model => model.PickupInStore)")[0]);
|
|
|
|
$(document).on('checkout_toggle_pickup_in_store', function (e) {
|
|
if (e.checked)
|
|
$('.method-list').hide();
|
|
else
|
|
$('.method-list').show();
|
|
});
|
|
});
|
|
|
|
function togglePickupInStore(pickupInStore) {
|
|
if (pickupInStore.checked) {
|
|
$('#pickup-points-form').show();
|
|
$('.method-list').hide();
|
|
} else {
|
|
$('#pickup-points-form').hide();
|
|
$('.method-list').show();
|
|
}
|
|
|
|
$(document).trigger({ type: "checkout_toggle_pickup_in_store", checked: pickupInStore.checked });
|
|
}
|
|
</script>
|
|
</div>
|
|
}
|
|
|
|
|
|
<div class="section pickup-points" id="pickup-points-form">
|
|
@if (Model.PickupPoints.Any())
|
|
{
|
|
if (Model.PickupInStoreOnly)
|
|
{
|
|
<input asp-for="PickupInStore" type="hidden" />
|
|
}
|
|
<div class="select-pickup-point">
|
|
@if (Model.PickupPoints.Count == 1)
|
|
{
|
|
var point = Model.PickupPoints.First();
|
|
<input name="pickup-points-id" id="pickup-points-id" type="hidden" value="@($"{point.Id}___{point.ProviderSystemName}")" />
|
|
<ul>
|
|
<li class="single-pickup-point name">@point.Name</li>
|
|
<li class="single-pickup-point address">@($"{point.AddressLine}")</li>
|
|
@if (!string.IsNullOrEmpty(point.PickupFee))
|
|
{
|
|
<li class="single-pickup-point fee">@point.PickupFee</li>
|
|
}
|
|
</ul>
|
|
}
|
|
else
|
|
{
|
|
<label for="pickup-points-select">@T("Checkout.PickupPoints.SelectPickupPoint")</label>
|
|
<select name="pickup-points-id" id="pickup-points-select" class="address-select" title="">
|
|
@foreach (var point in Model.PickupPoints)
|
|
{
|
|
var addressLine = new StringBuilder();
|
|
var parameters = new List<string>();
|
|
if (!string.IsNullOrEmpty(point.Name))
|
|
{
|
|
parameters.Add(point.Name);
|
|
}
|
|
if (!string.IsNullOrEmpty(point.Address))
|
|
{
|
|
parameters.Add(point.Address);
|
|
}
|
|
if (!string.IsNullOrEmpty(point.City))
|
|
{
|
|
parameters.Add(point.City);
|
|
}
|
|
if (!string.IsNullOrEmpty(point.County))
|
|
{
|
|
parameters.Add(point.County);
|
|
}
|
|
if (!string.IsNullOrEmpty(point.StateName))
|
|
{
|
|
parameters.Add(point.StateName);
|
|
}
|
|
if (!string.IsNullOrEmpty(point.CountryName))
|
|
{
|
|
parameters.Add(point.CountryName);
|
|
}
|
|
if (!string.IsNullOrEmpty(point.PickupFee))
|
|
{
|
|
parameters.Add(point.PickupFee);
|
|
}
|
|
addressLine.AppendJoin(", ", parameters);
|
|
<option selected="@point.IsPreSelected" value="@($"{point.Id}___{point.ProviderSystemName}")">@(addressLine)</option>
|
|
}
|
|
</select>
|
|
}
|
|
</div>
|
|
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CheckoutPickUpPointsAfter, additionalData = Model })
|
|
if (Model.DisplayPickupPointsOnMap)
|
|
{
|
|
var src = $"https://maps.googleapis.com/maps/api/js{(string.IsNullOrEmpty(Model.GoogleMapsApiKey) ? string.Empty : $"?key={Model.GoogleMapsApiKey}")}";
|
|
<div class="pickup-points-map" id="map">
|
|
<script asp-location="Footer">
|
|
var markers = new Map();
|
|
var googleMap = null;
|
|
$(function() {
|
|
$.getScript("@src", function( data, textStatus, jqxhr ) {
|
|
google.maps.visualRefresh = true;
|
|
googleMap = new google.maps.Map(document.getElementById("map"), {
|
|
zoom: 15,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
|
});
|
|
var geocoder = new google.maps.Geocoder();
|
|
var infowindow = new google.maps.InfoWindow();
|
|
@for (var i = 0; i < Model.PickupPoints.Count; i++)
|
|
{
|
|
var point = Model.PickupPoints[i];
|
|
var value = $"{point.Id}___{point.ProviderSystemName}";
|
|
var pickupPointInfo = Html.Raw($@"<div class='pickup-point-info'><ul><li><strong>{point.Name}</strong></li><li>{point.OpeningHours}</li><li>{point.PickupFee}</li></ul></div>");
|
|
if (point.Latitude != null && point.Longitude != null)
|
|
{
|
|
var latitude = point.Latitude.Value.ToString(CultureInfo.InvariantCulture);
|
|
var longitude = point.Longitude.Value.ToString(CultureInfo.InvariantCulture);
|
|
<text>
|
|
(function() {
|
|
var marker = new google.maps.Marker({
|
|
map: googleMap,
|
|
title: "@point.Name",
|
|
position: new google.maps.LatLng(@latitude, @longitude),
|
|
icon: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png"
|
|
});
|
|
markers.set("@value", marker);
|
|
google.maps.event.addListener(marker, 'click', function () {
|
|
$('#pickup-points-select').val("@value");
|
|
googleMap.setCenter(this.getPosition());
|
|
infowindow.setContent("@pickupPointInfo");
|
|
infowindow.open(googleMap, marker);
|
|
});
|
|
@if (i == 0) {
|
|
<text>googleMap.setCenter(marker.getPosition());</text>
|
|
}
|
|
}());
|
|
</text>
|
|
}
|
|
else
|
|
{
|
|
var address = $"{point.Address} {point.City} {point.ZipPostalCode} {point.CountryName}";
|
|
<text>
|
|
var interval_@(i) = setInterval( function () {
|
|
geocoder.geocode({ 'address': "@address" }, function(results, status) {
|
|
if (status === google.maps.GeocoderStatus.OK) {
|
|
var marker = new google.maps.Marker({
|
|
map: googleMap,
|
|
title: "@point.Name",
|
|
position: results[0].geometry.location,
|
|
icon: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png"
|
|
});
|
|
markers.set("@value", marker);
|
|
google.maps.event.addListener(marker, 'click', function () {
|
|
$('#pickup-points-select').val("@value");
|
|
googleMap.setCenter(this.getPosition());
|
|
infowindow.setContent("@pickupPointInfo");
|
|
infowindow.open(googleMap, marker);
|
|
});
|
|
@if (i == 0) {
|
|
<text>googleMap.setCenter(marker.getPosition());</text>
|
|
}
|
|
clearInterval(interval_@i);
|
|
}
|
|
})
|
|
}, 250);
|
|
</text>
|
|
}
|
|
}
|
|
|
|
$('#pickup-points-select').on('change', function() {
|
|
new google.maps.event.trigger(markers.get(this.value), 'click');
|
|
});
|
|
|
|
$("#@Html.IdFor(model => model.PickupInStore)").on('change', function() {
|
|
if ($('#@Html.IdFor(model => model.PickupInStore)').is(':checked')) {
|
|
var center = googleMap.getCenter();
|
|
google.maps.event.trigger(googleMap, 'resize');
|
|
googleMap.setCenter(center);
|
|
}
|
|
})
|
|
})
|
|
})
|
|
</script>
|
|
</div>
|
|
}
|
|
}
|
|
<div class="message-error">
|
|
<ul>
|
|
@foreach (var warning in Model.Warnings)
|
|
{
|
|
<li>@warning</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div> |