- Screenshots für Modul "Amazon" Doku

2 files changed, 398 insertions, 75 deletions

diff --git a/views/mods/mod_addressvalidation/addressvalidation.js b/views/mods/mod_addressvalidation/addressvalidation.js
index b74aa5b..089788b 100644
--- a/views/mods/mod_addressvalidation/addressvalidation.js
+++ b/views/mods/mod_addressvalidation/addressvalidation.js
@@ -1,82 +1,351 @@
 /**

- * Globale Funktionen zur Adressvalidation

+ * Adressvalidierung im Browser

+ * Fragt wpsg_mod_addressvalidation::ajaxValidate() im Shop an, der API-Key bleibt auf dem Server

+ * Die Konfiguration (ajaxurl, action, nonce, labelApply, labelProposal) setzt wpsg_mod_addressvalidation::wpsg_enqueue_scripts()

  */

 

-function validateAddressBind(data) {

-	jQuery(data.PLZ).on("input", function () {

-		validateAddress(data);

-	});

-	jQuery(data.Ort).on("input", function () {

-		validateAddress(data);

-	});

-	jQuery(data.Strasse).on("input", function () {

-		validateAddress(data);

-	});

-	jQuery(data.Land).on("input", function () {

-		validateAddress(data);

+/** Verzögerung, damit mehrere geänderte Felder nur eine Anfrage auslösen (ms) */

+var wpsg_mod_addressvalidation_delay = 400;

+

+/**

+ * Selektoren der Adressfelder je Adresse

+ * Klassische Kasse, OnePage, Profil und Registrierung (#strasse …) sowie SmartCheckout (#wpsg_sc_strasse …)

+ * Die Lieferanschrift (#shipping_…) ist in beiden gleich

+ */

+var wpsg_mod_addressvalidation_fields = [

+	{

+		type: 'billing',

+		strasse: '#strasse, #wpsg_sc_strasse',

+		nr: '#nr, #wpsg_sc_nr',

+		plz: '#plz, #wpsg_sc_plz',

+		ort: '#ort, #wpsg_sc_ort',

+		land: '#wpsg_land, #wpsg_sc_land'

+	},

+	{

+		type: 'shipping',

+		strasse: '#shipping_strasse',

+		nr: '#shipping_nr',

+		plz: '#shipping_plz',

+		ort: '#shipping_ort',

+		land: '#shipping_land'

+	}

+];

+

+/**

+ * Liefert das erste vorhandene Feld zu einem Schlüssel (strasse, nr, plz, ort, land)

+ *

+ * @param oFields

+ * @param strKey

+ * @return jQuery

+ */

+function wpsg_mod_addressvalidation_getField(oFields, strKey) {

+

+	return jQuery(oFields[strKey]).first();

+

+} // function wpsg_mod_addressvalidation_getField(oFields, strKey)

+

+/**

+ * Bindet die Prüfung an die Felder einer Adresse

+ * Über document, damit auch Felder greifen, die erst später erzeugt werden (SmartCheckout baut sie mit Vue auf)

+ *

+ * @param oFields Selektoren der Felder (strasse, nr, plz, ort, land) und type ('billing' oder 'shipping')

+ */

+function wpsg_mod_addressvalidation_bind(oFields) {

+

+	var oTimer = null;

+

+	jQuery(document).on('change', [oFields.strasse, oFields.nr, oFields.plz, oFields.ort, oFields.land].join(', '), function() {

+

+		window.clearTimeout(oTimer);

+

+		oTimer = window.setTimeout(function() {

+

+			wpsg_mod_addressvalidation_check(oFields);

+

+		}, wpsg_mod_addressvalidation_delay);

+

 	});

-}

-

-// Adress-Validation

-function validateAddress(data) {

-	var

-		plz,

-		ort,

-		strasse,

-		astr1,

-		land = 'de',

-		rw;

-	plz = jQuery(data.PLZ).val();

-	ort = jQuery(data.Ort).val();

-	strasse = jQuery(data.Strasse).val();

-	nr = jQuery(data.Nr).val();

-	if (nr !== undefined) {

-		strasse = strasse + ' ' + nr;

+

+} // function wpsg_mod_addressvalidation_bind(oFields)

+

+/**

+ * Liefert das Element für die Meldung einer Adresse und legt es bei Bedarf direkt hinter dem Land an

+ * (ohne Land hinter Ort bzw. PLZ)

+ *

+ * @param oFields

+ * @return jQuery

+ */

+function wpsg_mod_addressvalidation_getMessage(oFields) {

+

+	var strClass = 'wpsg_mod_addressvalidation_message_' + oFields.type;

+	var oMessage = jQuery('.' + strClass);

+

+	if (oMessage.length) return oMessage;

+

+	oMessage = jQuery('<div class="wpsg_mod_addressvalidation_message ' + strClass + '" role="status"></div>').css({

+		'margin': '0 0 1rem 0',

+		'padding': '3px 0 3px 8px'

+	}).hide();

+

+	var arAnchor = ['land', 'ort', 'plz'];

+

+	for (var i = 0; i < arAnchor.length; i ++) {

+

+		var oField = wpsg_mod_addressvalidation_getField(oFields, arAnchor[i]);

+

+		if (oField.length) {

+

+			// SmartCheckout: Die Felder liegen in einem Grid, die Meldung belegt dort eine eigene Zeile über die volle Breite

+			var oBlock = oField.closest('.sc_field');

+

+			if (oBlock.length) {

+

+				oMessage.css({ 'grid-column': '1 / -1', 'margin': '0' });

+

+			} else {

+

+				oBlock = oField.closest('.wpsg_checkoutblock');

+

+			}

+

+			((oBlock.length)?oBlock:oField).after(oMessage);

+

+			break;

+

+		}

+

 	}

-	land = jQuery(data.Land + ' option:selected').val();

-	land = jQuery(data.Land + ' option:selected').attr('data-land');

 

-	astr1 = localStorage.getItem(data.StorageKey);

-	if ((plz.length > 3) && (ort.length > 3) && (strasse.length > 3) &&

-		(astr1 != (strasse + plz + ort + land))) 

-	{

+	return oMessage;

+

+} // function wpsg_mod_addressvalidation_getMessage(oFields)

+

+/**

+ * Setzt den Wert eines Feldes und meldet die Änderung, damit auch Vue (SmartCheckout) den Wert übernimmt

+ *

+ * @param oField

+ * @param strValue

+ */

+function wpsg_mod_addressvalidation_setValue(oField, strValue) {

+

+	if (!oField.length) return;

+

+	var el = oField[0];

+

+	el.value = strValue;

+	el.dispatchEvent(new Event('input', { bubbles: true }));

+	el.dispatchEvent(new Event('change', { bubbles: true }));

+

+} // function wpsg_mod_addressvalidation_setValue(oField, strValue)

+

+/**

+ * Übernimmt den Vorschlag des Dienstes in die Felder einer Adresse

+ *

+ * @param oFields

+ * @param oProposal strasse, nr, plz, ort

+ */

+function wpsg_mod_addressvalidation_apply(oFields, oProposal) {

+

+	var oNr = wpsg_mod_addressvalidation_getField(oFields, 'nr');

+	var strStrasse = oProposal.strasse;

+

+	// Ohne eigenes Feld für die Hausnummer gehört sie zur Straße

+	if (oNr.length) {

+

+		wpsg_mod_addressvalidation_setValue(oNr, oProposal.nr);

+

+	} else if (oProposal.nr !== '') {

+

+		strStrasse = strStrasse + ' ' + oProposal.nr;

 

-		astr1 = strasse + plz + ort + land;

-		localStorage.setItem(data.StorageKey, astr1);

-	    jQuery.ajax({

-	        url: 'http://api.address-validator.net/api/verify',

-	        type: 'POST',

-	        data: { StreetAddress: strasse,

-	                City: ort,

-	                PostalCode: plz,

-	                //State: State,

-	                CountryCode: land,

-	                //Locale: land,

-	                APIKey: data.Key},

-	        dataType: 'json',

-	        success: function (json) {

-	            // check API result

-	            if (typeof(json.status) != "undefined") {

-	                status = json.status;

-	                formattedaddress = json.formattedaddress;

-	                if (json.status === 'VALID') {

-

-

-	                } else if ((json.status === 'INVALID') || (json.status === 'SUSPECT')) {

-

-	                	alert(data.MsgTeil1 + '-Validation fehlerhaft. Bitte Straße, Hausnummer, PLZ, Ort und Land überprüfen.');

-		                

-	                } else {

-

-						alert('Adress-Validation Serverproblem: ' + json.status);

-						

-	                }

-	            }

-

-	        }

-	    });

-		

 	}

 

-}

+	wpsg_mod_addressvalidation_setValue(wpsg_mod_addressvalidation_getField(oFields, 'strasse'), strStrasse);

+	wpsg_mod_addressvalidation_setValue(wpsg_mod_addressvalidation_getField(oFields, 'plz'), oProposal.plz);

+	wpsg_mod_addressvalidation_setValue(wpsg_mod_addressvalidation_getField(oFields, 'ort'), oProposal.ort);

+

+} // function wpsg_mod_addressvalidation_apply(oFields, oProposal)

+

+/**

+ * Baut die Zeile mit dem Vorschlag des Dienstes, Werte, die von der Eingabe abweichen, sind fett

+ *

+ * @param oFields

+ * @param oData eingegebene Werte (strasse, nr, plz, ort)

+ * @param oProposal vorgeschlagene Werte (strasse, nr, plz, ort)

+ * @return jQuery

+ */

+function wpsg_mod_addressvalidation_renderProposal(oFields, oData, oProposal) {

+

+	var oLine = jQuery('<div class="wpsg_mod_addressvalidation_proposal"></div>').css('margin-top', '4px');

+	var bNr = (wpsg_mod_addressvalidation_getField(oFields, 'nr').length > 0);

+

+	var normalize = function(strValue) {

+

+		return jQuery.trim(String(strValue || '')).replace(/\s+/g, ' ').toLowerCase();

+

+	};

+

+	var addValue = function(strValue, strInput) {

+

+		oLine.append(jQuery((normalize(strValue) !== normalize(strInput))?'<strong></strong>':'<span></span>').text(strValue));

+

+	};

+

+	oLine.append(jQuery('<span></span>').text(wpsg_mod_addressvalidation.labelProposal + ' '));

+

+	// Ohne eigenes Feld für die Hausnummer steht sie in der Eingabe mit in der Straße

+	if (bNr) {

+

+		addValue(oProposal.strasse, oData.strasse);

+

+		if (oProposal.nr !== '') {

+

+			oLine.append(' ');

+			addValue(oProposal.nr, oData.nr);

+

+		}

+

+	} else {

+

+		addValue(jQuery.trim(oProposal.strasse + ' ' + oProposal.nr), oData.strasse);

+

+	}

+

+	oLine.append(', ');

+	addValue(oProposal.plz, oData.plz);

+	oLine.append(' ');

+	addValue(oProposal.ort, oData.ort);

+

+	return oLine;

+

+} // function wpsg_mod_addressvalidation_renderProposal(oFields, oData, oProposal)

+

+/**

+ * Prüft die Adresse über den Shop und zeigt die Meldung an

+ *

+ * @param oFields

+ */

+function wpsg_mod_addressvalidation_check(oFields) {

+

+	var oStrasse = wpsg_mod_addressvalidation_getField(oFields, 'strasse');

+	var oPlz = wpsg_mod_addressvalidation_getField(oFields, 'plz');

+	var oOrt = wpsg_mod_addressvalidation_getField(oFields, 'ort');

+

+	if (!oStrasse.length || !oPlz.length || !oOrt.length) return;

+

+	var oMessage = wpsg_mod_addressvalidation_getMessage(oFields);

+

+	var oData = {

+		action: wpsg_mod_addressvalidation.action,

+		nonce: wpsg_mod_addressvalidation.nonce,

+		type: oFields.type,

+		strasse: jQuery.trim(oStrasse.val() || ''),

+		nr: jQuery.trim(wpsg_mod_addressvalidation_getField(oFields, 'nr').val() || ''),

+		plz: jQuery.trim(oPlz.val() || ''),

+		ort: jQuery.trim(oOrt.val() || ''),

+		land: wpsg_mod_addressvalidation_getField(oFields, 'land').val() || ''

+	};

+

+	// Unvollständige Adressen nicht anfragen

+	if (oData.strasse.length < 3 || oData.plz.length < 3 || oData.ort.length < 2) {

+

+		oMessage.removeData('address').hide().empty();

+

+		return;

+

+	}

+

+	var strAddress = JSON.stringify([oData.strasse, oData.nr, oData.plz, oData.ort, oData.land]);

+

+	if (oMessage.data('address') === strAddress) return;

+

+	oMessage.data('address', strAddress);

+

+	jQuery.post(wpsg_mod_addressvalidation.ajaxurl, oData).done(function(response) {

+

+		// Inzwischen wurde die Adresse erneut geändert

+		if (oMessage.data('address') !== strAddress) return;

+

+		if (!response || !response.success || !response.data.message) {

+

+			oMessage.hide().empty();

+

+			return;

+

+		}

+

+		oMessage.empty().append(jQuery('<span></span>').text(response.data.message));

+

+		if (response.data.proposal) {

+

+			var oProposal = response.data.proposal;

+

+			oMessage.append(wpsg_mod_addressvalidation_renderProposal(oFields, oData, oProposal).append(' ', jQuery('<button type="button" class="button wpsg_mod_addressvalidation_apply"></button>').text(wpsg_mod_addressvalidation.labelApply).on('click', function() {

+

+				wpsg_mod_addressvalidation_apply(oFields, oProposal);

+

+			})));

+

+		}

+

+		oMessage.css('border-left', '4px solid ' + ((response.data.blocked)?'#DD3D36':'#F0AD4E')).show();

+

+	}).fail(function() {

+

+		// Ohne Antwort beim nächsten Ändern erneut versuchen, checkCheckout() prüft beim Absenden trotzdem

+		oMessage.removeData('address').hide().empty();

+

+	});

+

+} // function wpsg_mod_addressvalidation_check(oFields)

+

+/**

+ * Prüft eine bereits ausgefüllte Adresse direkt nach dem Laden, z.B. nach einem abgewiesenen Absenden

+ * Wartet, bis die Felder vorhanden sind (SmartCheckout baut sie erst mit Vue auf)

+ *

+ * @param oFields

+ * @param nTry bisherige Versuche

+ */

+function wpsg_mod_addressvalidation_checkInitial(oFields, nTry) {

+

+	if (!wpsg_mod_addressvalidation_getField(oFields, 'strasse').length) {

+

+		if (nTry < 20) {

+

+			window.setTimeout(function() {

+

+				wpsg_mod_addressvalidation_checkInitial(oFields, nTry + 1);

+

+			}, 250);

+

+		}

+

+		return;

+

+	}

+

+	wpsg_mod_addressvalidation_check(oFields);

+

+} // function wpsg_mod_addressvalidation_checkInitial(oFields, nTry)

+

+/**

+ * Früherer Aufruf aus checkout.phtml, bleibt für angepasste Templates im Theme erhalten

+ * Die Felder werden inzwischen automatisch gebunden, der übergebene API-Key wird nicht mehr verwendet

+ *

+ * @param data

+ */

+function validateAddressBind(data) {

+

+} // function validateAddressBind(data)

+

+jQuery(document).ready(function() {

+

+	if (typeof(wpsg_mod_addressvalidation) == 'undefined') return;

+

+	for (var i = 0; i < wpsg_mod_addressvalidation_fields.length; i ++) {

+

+		wpsg_mod_addressvalidation_bind(wpsg_mod_addressvalidation_fields[i]);

+		wpsg_mod_addressvalidation_checkInitial(wpsg_mod_addressvalidation_fields[i], 0);

+	}

 

+});

diff --git a/views/mods/mod_addressvalidation/settings_edit.phtml b/views/mods/mod_addressvalidation/settings_edit.phtml
index db047cc..76bf30b 100644
--- a/views/mods/mod_addressvalidation/settings_edit.phtml
+++ b/views/mods/mod_addressvalidation/settings_edit.phtml
@@ -5,8 +5,62 @@
 	 */

 

 ?>

-<?php echo wpsg_drawForm_Input('wpsg_mod_addressvalidation_apikey', __('API-Key', 'wpsg'), $this->get_option('wpsg_mod_addressvalidation_apikey'), array('help' => 'wpsg_mod_addressvalidation_apikey')); ?>

+<?php echo wpsg_drawForm_Input('wpsg_mod_addressvalidation_apikey', __('API-Key', 'wpsg'), $this->get_option('wpsg_mod_addressvalidation_apikey'), ['help' => 'wpsg_mod_addressvalidation_apikey']); ?>

+<?php echo wpsg_drawForm_Select('wpsg_mod_addressvalidation_suspect', __('Verdächtige Adressen', 'wpsg'), $this->view['wpsg_mod_addressvalidation']['arSuspect'], $this->view['wpsg_mod_addressvalidation']['suspect'], ['hint' => __('Der Dienst meldet eine Adresse als verdächtig, wenn sie gefunden wurde, aber einzelne Angaben abweichen, z. B. ein früherer Gemeindename. Mit "Nur Hinweis" geht die Bestellung durch und der Kunde sieht die vorgeschlagene Schreibweise.', 'wpsg')]); ?>

+<?php echo wpsg_drawForm_Input('wpsg_mod_addressvalidation_ratelimit', __('Anfragen je Besucher (10 Minuten)', 'wpsg'), $this->view['wpsg_mod_addressvalidation']['ratelimit'], ['help' => 'wpsg_mod_addressvalidation_ratelimit']); ?>

+<?php echo wpsg_drawForm_Input('wpsg_mod_addressvalidation_daylimit', __('Anfragen je Tag (ganzer Shop)', 'wpsg'), $this->view['wpsg_mod_addressvalidation']['daylimit'], ['help' => 'wpsg_mod_addressvalidation_daylimit']); ?>

+

+<?php echo wpsg_drawForm_TextStart(); ?>

+<button type="button" class="button" id="wpsg_mod_addressvalidation_test" data-url="<?php echo esc_url(WPSG_URL_WP.'wp-admin/admin.php?page=wpsg-Admin&action=module&modul=wpsg_mod_addressvalidation&do=testApiKey&noheader=1'); ?>" data-nonce="<?php echo esc_attr(wp_create_nonce('wpsg-addressvalidation-testApiKey')); ?>" data-field="#<?php echo esc_attr(wpsg_drawForm_getID('wpsg_mod_addressvalidation_apikey')); ?>">

+	<?php echo esc_html__('API-Key testen', 'wpsg'); ?>

+</button>

+<p id="wpsg_mod_addressvalidation_test_result"></p>

+<p class="description"><?php echo esc_html__('Die Testanfrage verbraucht beim Dienst ein Guthaben.', 'wpsg'); ?></p>

+<?php echo wpsg_drawForm_TextEnd(__('Verbindungstest', 'wpsg'), ['noP' => true]); ?>

 

 <a class="button-primary" id="button-google" target="popup" href="http://www.address-validator.net/address-online-verification-api.html" onclick="window.open('', 'popup', 'width=500;height=200,resizable=yes,menubar=yes')">

-	<?php echo __('Schlüssel anfordern', 'wpsg'); ?>

-</a>
\ No newline at end of file
+	<?php echo esc_html__('Schlüssel anfordern', 'wpsg'); ?>

+</a>

+

+<script type="text/javascript">/* <![CDATA[ */

+

+	jQuery(document).ready(function() {

+

+		jQuery('#wpsg_mod_addressvalidation_test').on('click', function() {

+

+			var oButton = jQuery(this);

+			var oResult = jQuery('#wpsg_mod_addressvalidation_test_result');

+

+			oButton.prop('disabled', true);

+			oResult.removeClass('text-success text-danger').text('<?php echo esc_js(__('Prüfe API-Key …', 'wpsg')); ?>');

+

+			jQuery.post(oButton.data('url'), {

+				apikey: jQuery(oButton.data('field')).val(),

+				wpsg_nonce: oButton.data('nonce')

+			}).done(function(response) {

+

+				oResult.addClass((response.success)?'text-success':'text-danger').text(response.data.message);

+

+			}).fail(function(xhr) {

+

+				var strMessage = '<?php echo esc_js(__('Die Prüfung ist fehlgeschlagen.', 'wpsg')); ?>';

+

+				if (xhr.responseJSON && xhr.responseJSON.data && xhr.responseJSON.data.message) {

+

+					strMessage = xhr.responseJSON.data.message;

+

+				}

+

+				oResult.addClass('text-danger').text(strMessage);

+

+			}).always(function() {

+

+				oButton.prop('disabled', false);

+

+			});

+

+		});

+

+	});

+

+/* ]]> */</script>
\ No newline at end of file