489 lines
17 KiB
JavaScript
489 lines
17 KiB
JavaScript
/**
|
|
* TNT OFFICIAL MODULE FOR PRESTASHOP
|
|
*
|
|
* @author GFI Informatique <www.gfi.fr>
|
|
* @copyright 2016 GFI Informatique, 2016 TNT
|
|
* @license https://opensource.org/licenses/MIT MIT License
|
|
*/
|
|
|
|
|
|
// On DOM Ready.
|
|
$(function () {
|
|
|
|
if (
|
|
// If Google Map API not loaded.
|
|
!(window.google && window.google.maps && window.google.maps.Map)
|
|
// and Google Map config exist.
|
|
&& (window.TNTOfficiel && window.TNTOfficiel.config && window.TNTOfficiel.config.google && window.TNTOfficiel.config.google.map)
|
|
) {
|
|
// Load Google Map API.
|
|
$.ajax({
|
|
"url": window.TNTOfficiel.config.google.map.url,
|
|
"data": window.TNTOfficiel.config.google.map.data,
|
|
"dataType": 'script',
|
|
"cache": true
|
|
})
|
|
.done(function () {});
|
|
}
|
|
|
|
});
|
|
|
|
|
|
// Constructor
|
|
function TNTOfficielGMapMarkersConstrutor(elmtMapContainer, objGoogleMapsConfig) {
|
|
return this.init(elmtMapContainer, objGoogleMapsConfig);
|
|
};
|
|
|
|
// Prototype
|
|
TNTOfficielGMapMarkersConstrutor.prototype = {
|
|
|
|
// Google Map Default Config.
|
|
objGMapsConfig: {
|
|
"lat": 46.227638,
|
|
"lng": 2.213749,
|
|
"zoom": 4
|
|
},
|
|
|
|
// Google Map Object.
|
|
objGMapMap: null,
|
|
// Google Map Markers Area Boundaries.
|
|
objGMapMarkersBounds: null,
|
|
// Google Map Markers Collection.
|
|
arrGMapMarkersCollection: [],
|
|
// Google Map Markers Info Window (Bubble).
|
|
objGMapMarkersInfoWindow: null,
|
|
|
|
/**
|
|
* Initialisation.
|
|
*/
|
|
init: function init(elmtMapContainer, objGoogleMapsConfig) {
|
|
// Extend Configuration.
|
|
jQuery.extend(this.objGMapsConfig, objGoogleMapsConfig);
|
|
|
|
// Google Map Object.
|
|
this.objGMapMap = new window.google.maps.Map(elmtMapContainer, {
|
|
center: new window.google.maps.LatLng(this.objGMapsConfig.lat, this.objGMapsConfig.lng),
|
|
zoom: this.objGMapsConfig.zoom
|
|
});
|
|
|
|
// Init Markers.
|
|
this.objGMapMarkersBounds = new window.google.maps.LatLngBounds();
|
|
this.arrGMapMarkersCollection = [];
|
|
this.objGMapMarkersInfoWindow = new window.google.maps.InfoWindow();
|
|
|
|
return this;
|
|
},
|
|
/**
|
|
*
|
|
*/
|
|
addMarker: function addMarker(fltLatitude, fltLongitude, strURLIcon, strInfoWindowContent, objListeners) {
|
|
var _this = this;
|
|
|
|
var objGMapLatLng = new window.google.maps.LatLng(fltLatitude, fltLongitude);
|
|
|
|
// Create a new Google Map Marker.
|
|
var objGMapMarker = new window.google.maps.Marker({
|
|
position: objGMapLatLng,
|
|
icon: strURLIcon
|
|
});
|
|
// Add Marker to the Google Map.
|
|
objGMapMarker.setMap(this.objGMapMap);
|
|
// Extend Markers Area Boundaries.
|
|
this.objGMapMarkersBounds.extend(objGMapMarker.getPosition() /* objGMapLatLng */);
|
|
|
|
//objGMapMarker.getMap();
|
|
|
|
// Bind Markers Events.
|
|
jQuery.each(objListeners, function (strEventType, evtCallback) {
|
|
// If callback is a function.
|
|
if (jQuery.type(evtCallback) === 'function') {
|
|
// Set Marker Event Listeners and Bind this to callback.
|
|
objGMapMarker.addListener(strEventType, $.proxy(function (objGMapEvent) {
|
|
// Default click action is to show InfoWindow (if any).
|
|
if (strEventType === 'click') {
|
|
this.objGMapMarkersInfoWindow.close();
|
|
if (strInfoWindowContent) {
|
|
this.objGMapMarkersInfoWindow.setContent(strInfoWindowContent);
|
|
this.objGMapMarkersInfoWindow.open(this.objGMapMap /* objGMapMarker.getMap() */, objGMapMarker);
|
|
}
|
|
// Adjust zoom min/max range.
|
|
objGMapMarker.map.setZoom(Math.max(Math.min(17, objGMapMarker.map.getZoom()),10));
|
|
// Update the Google Maps size.
|
|
this.trigger('resize', this.objGMapMap);
|
|
// Go to marker position.
|
|
objGMapMarker.map.panTo(objGMapMarker.getPosition());
|
|
}
|
|
|
|
return evtCallback.call(this, objGMapEvent);
|
|
}, _this));
|
|
}
|
|
});
|
|
|
|
// Add Marker to collection.
|
|
this.arrGMapMarkersCollection.push(objGMapMarker);
|
|
|
|
return objGMapMarker;
|
|
},
|
|
/**
|
|
*
|
|
*/
|
|
fitBounds: function () {
|
|
// Fit Boundaries to display all markers.
|
|
if (this.arrGMapMarkersCollection.length > 0) {
|
|
this.objGMapMap.fitBounds(this.objGMapMarkersBounds);
|
|
}
|
|
|
|
// Bind event to callback to execute only once.
|
|
window.google.maps.event.addListenerOnce(this.objGMapMap, 'bounds_changed', function () {
|
|
// this === this.objGMapMap
|
|
this.setZoom(Math.min(17, this.getZoom()));
|
|
});
|
|
|
|
// Update the Google Maps size.
|
|
this.trigger('resize', this.objGMapMap);
|
|
|
|
return this;
|
|
},
|
|
/**
|
|
*
|
|
*/
|
|
trigger: function (strEventType, objBind) {
|
|
window.google.maps.event.trigger(objBind, strEventType);
|
|
|
|
return this;
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
*
|
|
* @param method
|
|
* @param strDataB64
|
|
* @constructor
|
|
*/
|
|
var TNTOfficiel_deliveryPointsBox = function (method, strDataB64) {
|
|
var _this = this;
|
|
|
|
// xett, pex
|
|
this.strRepoType = (method === 'relay_points') ? 'xett' : 'pex';
|
|
// relay_points, repositories.
|
|
this.method = method;
|
|
// ClassName Plural Prefix.
|
|
this.strClassNameRepoPrefixPlural = (this.strRepoType === 'xett') ? 'relay-points' : 'repositories';
|
|
// ClassName Prefix.
|
|
this.strClassNameRepoPrefix = (this.strRepoType === 'xett') ? 'relay-point' : 'repository';
|
|
|
|
this.strClassNameInfoBlocSelected = 'is-selected';
|
|
|
|
this.CSSSelectors = {
|
|
// Loading Mask and Progress indicator.
|
|
loading: '#loading',
|
|
// Popin Content Container.
|
|
// div#repositories.repositories
|
|
popInContentContainer: '#' + this.method,
|
|
// Popin Header Container.
|
|
// div.repositories-header
|
|
popInHeaderContainer: '.' + this.strClassNameRepoPrefixPlural + '-header',
|
|
|
|
// Search form CP/Cities.
|
|
// form#repositories_form.repositories-form
|
|
formSearchRepo: 'form.' + this.strClassNameRepoPrefixPlural + '-form',
|
|
// Repo List Container.
|
|
// ul#repositories_list.repositories-list
|
|
infoBlocListContainer: '.' + this.strClassNameRepoPrefixPlural + '-list',
|
|
// Google Map Container.
|
|
// div#repositories_map.repositories-map
|
|
mapContainer: '.' + this.strClassNameRepoPrefixPlural + '-map',
|
|
|
|
// All Repo Bloc Item Container.
|
|
// li#repositories_item_<INDEX>.repository-item
|
|
infoBlocItemContainerCollection: '.' + this.strClassNameRepoPrefix + '-item',
|
|
// Repo Selected Button Bloc Item.
|
|
// button.repository-item-select
|
|
infoBlocItemButtonSelected: '.' + this.strClassNameRepoPrefix + '-item-select'
|
|
|
|
// One Repo Bloc Item Container.
|
|
// li#repositories_item_<CODE>.repository-item
|
|
// '#' + this.method + '_item_' + id
|
|
};
|
|
|
|
// getRelayPoints, getRepositories List.
|
|
this.arrRepoList = JSON.parse(base64_decode(strDataB64)) || null;
|
|
|
|
// If invalid repo list.
|
|
if ($.type(this.arrRepoList) !== 'array') {
|
|
// Set empty repo list.
|
|
this.arrRepoList = [];
|
|
}
|
|
|
|
// On repo form search submit.
|
|
$(this.CSSSelectors.formSearchRepo).on('submit', function (objEvent) {
|
|
|
|
$(_this.CSSSelectors.loading).show();
|
|
|
|
objEvent.preventDefault();
|
|
|
|
// If test is valid, get all data for postcode and city and update the list
|
|
var objJqXHR = $.ajax({
|
|
"url": window.TNTOfficiel.link.front.module[_this.strRepoType === 'xett' ? 'boxRelayPoints' : 'boxDropOffPoints'],
|
|
"method": 'GET',
|
|
"data": $(objEvent.target).serialize(),
|
|
"dataType": 'html',
|
|
"cache": false,
|
|
"global": false
|
|
});
|
|
|
|
objJqXHR
|
|
.done(function (mxdData, strTextStatus, objJqXHR) {
|
|
// Update PopIn Content.
|
|
$(_this.CSSSelectors.popInContentContainer).parent().html(mxdData);
|
|
})
|
|
.fail(function (objJqXHR, strTextStatus, strErrorThrown) {
|
|
// console.error( objJqXHR.status + ' ' + objJqXHR.statusText );
|
|
alert('Une erreur de communication avec le serveur est survenue, le transporteur TNT est momentanément indisponible.');
|
|
location.reload();
|
|
})
|
|
.always(function () {
|
|
$(_this.CSSSelectors.loading).hide();
|
|
});
|
|
|
|
});
|
|
|
|
// TODO: remove or add unbinding on close.
|
|
/*
|
|
$(window).off('.'+window.TNTOfficiel.module.name)
|
|
.on('resize.'+window.TNTOfficiel.module.name, $.proxy(this.prepareScrollbar, this));
|
|
// this.eventGoogleMaps();
|
|
*/
|
|
|
|
// On select button repo info bloc click.
|
|
$(this.CSSSelectors.infoBlocItemButtonSelected).off().on('click', function () {
|
|
var intMarkerIndex = $(this).parents(_this.CSSSelectors.infoBlocItemContainerCollection).attr('id').split('_').pop();
|
|
|
|
// Loading.
|
|
$(_this.CSSSelectors.loading).show();
|
|
|
|
var objJqXHR = $.ajax({
|
|
"url": window.TNTOfficiel.link.front.module.saveProductInfo,
|
|
"method": 'GET',
|
|
"data": {
|
|
product: _this.arrRepoList[intMarkerIndex]
|
|
},
|
|
"dataType": 'html',
|
|
"cache": false,
|
|
"global": false
|
|
});
|
|
|
|
objJqXHR
|
|
.done(function (mxdData, strTextStatus, objJqXHR) {
|
|
// Delete existing Repository Info.
|
|
$('.shipping-method-info').remove();
|
|
// Add Repository Info in Carrier Bloc.
|
|
$('.tnt_carrier_radio:checked').parents('tr').find('td.delivery_option_info').append(mxdData);
|
|
|
|
$.fancybox.close();
|
|
|
|
$(document).trigger('hook_extra_carrier_shipping_method_popup:close');
|
|
})
|
|
.fail(function (objJqXHR, strTextStatus, strErrorThrown) {
|
|
// console.error( objJqXHR.status + ' ' + objJqXHR.statusText );
|
|
})
|
|
.always(function () {
|
|
$(_this.CSSSelectors.loading).hide();
|
|
// if ($('#opc_payment_methods').length > 0) {
|
|
// }
|
|
});
|
|
});
|
|
|
|
|
|
this.eventGoogleMaps = function () {
|
|
// If no Google library.
|
|
if (window.google && window.google.maps) {
|
|
var objTNTOfficielGMapMarkers = new TNTOfficielGMapMarkersConstrutor(
|
|
$(_this.CSSSelectors.mapContainer)[0],
|
|
window.TNTOfficiel.config.google.map.default
|
|
);
|
|
|
|
// Prepare and returns data marker to add on the map.
|
|
for (var intMarkerIndex = 0; intMarkerIndex < _this.arrRepoList.length; intMarkerIndex++) {
|
|
|
|
var objRepoItem = _this.arrRepoList[intMarkerIndex];
|
|
|
|
// Set Marker InfoWindow Content.
|
|
var strInfoWindowContent = '\
|
|
<ul style="margin: 0;">\
|
|
' + ( this.strRepoType == 'xett' ? '<li>Code: <b>' + objRepoItem[this.strRepoType] + '</b></li>' : '') + '\
|
|
<li><b>' + objRepoItem.name + '</b></li>\
|
|
<li>' + ( objRepoItem.address ? objRepoItem.address : objRepoItem.address1 + '<br />' + objRepoItem.address2 ) + '</li>\
|
|
<li>' + objRepoItem.postcode + ' ' + objRepoItem.city + '</li>\
|
|
</ul>';
|
|
|
|
var strCSSSelectorRepoInfoBloc = '#' + _this.method + '_item_' + intMarkerIndex;
|
|
|
|
var objGMapMarker = objTNTOfficielGMapMarkers.addMarker(
|
|
objRepoItem.latitude,
|
|
objRepoItem.longitude,
|
|
window.TNTOfficiel.link.front.shop + 'modules/' + window.TNTOfficiel.module.name + '/' + 'views/img/' + 'modal/marker/' + (intMarkerIndex + 1) + '.png',
|
|
strInfoWindowContent,
|
|
{
|
|
// On Marker Click.
|
|
"click": $.proxy(function (strCSSSelectorRepoInfoBloc, objGMapEvent) {
|
|
var strClassNameInfoBlocSelected = 'is-selected',
|
|
$elmtInfoBlocSelect = $(strCSSSelectorRepoInfoBloc);
|
|
|
|
// Highlight Selected Marker Info.
|
|
$(_this.CSSSelectors.infoBlocItemContainerCollection + '.' + strClassNameInfoBlocSelected)
|
|
.removeClass(strClassNameInfoBlocSelected);
|
|
$elmtInfoBlocSelect.addClass(strClassNameInfoBlocSelected);
|
|
|
|
// The event is the click on marker (not triggered from list).
|
|
if (objGMapEvent != null) {
|
|
// Scroll to item
|
|
_this.scrollY($elmtInfoBlocSelect);
|
|
}
|
|
}, null, strCSSSelectorRepoInfoBloc)
|
|
}
|
|
);
|
|
|
|
// On click on info bloc item, trigger click on marker.
|
|
$(strCSSSelectorRepoInfoBloc).off().on('click', $.proxy(function (objGMapMarker) {
|
|
objTNTOfficielGMapMarkers.trigger('click', objGMapMarker);
|
|
}, null, objGMapMarker));
|
|
|
|
}
|
|
|
|
objTNTOfficielGMapMarkers.fitBounds();
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* Prepare scrollbar for list item
|
|
* @private
|
|
*/
|
|
this.prepareScrollbar = function () {
|
|
$('#list_scrollbar_container').nanoScroller({
|
|
preventPageScrolling: true
|
|
});
|
|
};
|
|
|
|
// Scroll to item.
|
|
this.scrollY = function ($elmtInfoBlocSelect) {
|
|
var $elmtContainer = $('#list_scrollbar_container'),
|
|
$elmtContent = $('#list_scrollbar_content'),
|
|
intPositionItem = parseInt($elmtInfoBlocSelect.offset().top + $elmtContent.scrollTop() - $elmtContainer.offset().top);
|
|
$elmtContent.scrollTop(intPositionItem);
|
|
};
|
|
|
|
this.prepareScrollbar();
|
|
this.eventGoogleMaps();
|
|
|
|
return this;
|
|
};
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
/*
|
|
* Global jQuery AJAX event, excepted for request with option "global":false.
|
|
*/
|
|
|
|
// Triggered if an AJAX request is started and no other AJAX requests are currently running.
|
|
$(document).ajaxStart(function () {
|
|
$('#loading').show();
|
|
});
|
|
// Triggered if there are no more Ajax requests being processed.
|
|
$(document).ajaxStop(function () {
|
|
$('#loading').hide();
|
|
});
|
|
|
|
/*
|
|
* Payment Choice.
|
|
*/
|
|
|
|
if (window.TNTOfficiel.order.isOPC) {
|
|
// On payment mode choice with OPC.
|
|
$(document).on('click', '#opc_payment_methods a', XHRcheckProductCode);
|
|
} else {
|
|
// On payment mode choice.
|
|
$('#form').on('submit', XHRcheckProductCode);
|
|
}
|
|
|
|
});
|
|
|
|
function XHRcheckProductCode (objEvent) {
|
|
|
|
// result from async AJAX request.
|
|
var result = null;
|
|
|
|
var objJqXHR = $.ajax({
|
|
"url": window.TNTOfficiel.link.front.module.checkProductCode,
|
|
"method": 'POST',
|
|
"data": {
|
|
product: _getCurrentShippingMethod(),
|
|
deliveryOptionTnt: deliveryOptionTnt
|
|
},
|
|
"async": false
|
|
});
|
|
|
|
objJqXHR
|
|
.done(function (mxdData, strTextStatus, objJqXHR) {
|
|
result = JSON.parse(mxdData);
|
|
})
|
|
.fail(function (objJqXHR, strTextStatus, strErrorThrown) {
|
|
// console.error( objJqXHR.status + ' ' + objJqXHR.statusText );
|
|
})
|
|
.always(function () {
|
|
|
|
});
|
|
|
|
// If no result or has error.
|
|
if (!result || result.error == 1) {
|
|
alert("Vous ne pouvez pas continuer votre commande car aucun mode de livraison n'est sélectionné.");
|
|
objEvent.preventDefault();
|
|
|
|
return false;
|
|
}
|
|
|
|
if (!(window.TNTOfficiel.order.isOPC && result.error == 0 && result[ window.TNTOfficiel.module.name ] == 1
|
|
|| !window.TNTOfficiel.order.isOPC && result.error == 0)
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
var $elmtForm = $(this);
|
|
|
|
if (window.TNTOfficiel.order.isOPC) {
|
|
window.$elmtPaymentLink = $elmtForm;
|
|
}
|
|
var $elmtCurrentSpMethod = $('.tnt_carrier_radio:checked');
|
|
var boolCGVDisplayed = $('#cgv').length > 0;
|
|
var boolCGVChecked = $('input#cgv:checked').length > 0;
|
|
var boolHasRepoAddressSelected = $($elmtCurrentSpMethod).closest('table').find('.shipping-method-info').length > 0;
|
|
var boolShowPopup = true;
|
|
|
|
if (($elmtCurrentSpMethod.attr('product-type') == 'dropoffpoint'|$elmtCurrentSpMethod.attr('product-type') == 'depot')& !boolHasRepoAddressSelected) {
|
|
boolShowPopup = false;
|
|
}
|
|
|
|
if ((boolCGVDisplayed&boolCGVChecked| !boolCGVDisplayed) && $elmtCurrentSpMethod.length && boolShowPopup) {
|
|
if (!$elmtForm.data('valid')) {
|
|
// Stop form submit
|
|
objEvent.preventDefault();
|
|
|
|
// Shows the modal popup
|
|
displayExtraAddressDataPopup($elmtCurrentSpMethod.attr('product-type'));
|
|
|
|
// Save which tnt product was chosen
|
|
XHRStoreProductPrice($elmtCurrentSpMethod);
|
|
} else {
|
|
if (window.TNTOfficiel.order.isOPC) {
|
|
window.location = $elmtForm.attr('href');
|
|
} else {
|
|
$elmtForm.submit();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|