Thema: Formular "Konto erstellen" mit JS nutzerfreundlich gestaltet

hpzeller · **am:** 08. Oktober 2017, 13:05:10

Hallo Community

Ich habe ein kleines Skript für das Template "tpl_modified" geschrieben welches das Formular "Konto erstellen" nutzerfreundlicher macht, damit werden jetzt neu etwaige nicht oder nicht richtig ausgefüllte Formularfelder direkt im Formular selbst farblich Markiert und mit erläuterndem Text versehen angezeigt. So sind Eingabefehler für den Kunden sofort identifizierbar und können leicht korrigiert werden.

Vorher:
[ Für Gäste sind keine Dateianhänge sichtbar ]

Nachher:
[ Für Gäste sind keine Dateianhänge sichtbar ]

Voraussetzung: charset="UTF-8"

Skriptcode: Den folgenden Code ganz am Ende der Datei '/templates/tpl_modified/javascript/general_bottom.js.php' einfügen.

Code: PHP [Auswählen]

<?php if (strstr($PHP_SELF, FILENAME_CREATE_ACCOUNT) || strstr($PHP_SELF, FILENAME_CREATE_GUEST_ACCOUNT)) {
require_once (DIR_FS_EXTERNAL.'password_policy/password_policy.php');
?>
<script>
$(function () {
var key, hasWarnings;
var colorWarnings = "#ff0000";
var strWarnings = $("#create_account .errormessage").html();
var warnings = {
<?php
if (defined('ENTRY_GENDER_ERROR')) echo ' "' . html_entity_decode(ENTRY_GENDER_ERROR) . '" : "gender",' . PHP_EOL;
if (defined('ENTRY_FIRST_NAME_ERROR')) echo ' "' . html_entity_decode(ENTRY_FIRST_NAME_ERROR) . '" : "firstname",' . PHP_EOL;
if (defined('ENTRY_LAST_NAME_ERROR')) echo ' "' . html_entity_decode(ENTRY_LAST_NAME_ERROR) . '" : "lastname",' . PHP_EOL;
if (defined('ENTRY_DATE_OF_BIRTH_ERROR')) echo ' "' . html_entity_decode(ENTRY_DATE_OF_BIRTH_ERROR) . '" : "dob",' . PHP_EOL;
if (defined('ENTRY_EMAIL_ADDRESS_ERROR')) echo ' "' . html_entity_decode(ENTRY_EMAIL_ADDRESS_ERROR) . '" : "email_address",' . PHP_EOL;
if (defined('ENTRY_EMAIL_ADDRESS_CHECK_ERROR')) echo ' "' . html_entity_decode(ENTRY_EMAIL_ADDRESS_CHECK_ERROR) . '" : "email_address",' . PHP_EOL;
if (defined('ENTRY_EMAIL_ADDRESS_ERROR_EXISTS')) echo ' "' . html_entity_decode(ENTRY_EMAIL_ADDRESS_ERROR_EXISTS) . '" : "email_address",' . PHP_EOL;
if (defined('ENTRY_EMAIL_ERROR_NOT_MATCHING')) echo ' "' . html_entity_decode(ENTRY_EMAIL_ERROR_NOT_MATCHING) . '" : "confirm_email_address",' . PHP_EOL;
if (defined('ENTRY_STREET_ADDRESS_ERROR')) echo ' "' . html_entity_decode(ENTRY_STREET_ADDRESS_ERROR) . '" : "street_address",' . PHP_EOL;
if (defined('ENTRY_POST_CODE_ERROR')) echo ' "' . html_entity_decode(ENTRY_POST_CODE_ERROR) . '" : "postcode",' . PHP_EOL;
if (defined('ENTRY_CITY_ERROR')) echo ' "' . html_entity_decode(ENTRY_CITY_ERROR) . '" : "city",' . PHP_EOL;
if (defined('ENTRY_STATE_ERROR')) echo ' "' . html_entity_decode(ENTRY_STATE_ERROR) . '" : "state",' . PHP_EOL;
if (defined('ENTRY_STATE_ERROR_SELECT')) echo ' "' . html_entity_decode(ENTRY_STATE_ERROR_SELECT) . '" : "state",' . PHP_EOL;
if (defined('ENTRY_COUNTRY_ERROR')) echo ' "' . html_entity_decode(ENTRY_COUNTRY_ERROR) . '" : "country",' . PHP_EOL;
if (defined('ENTRY_TELEPHONE_NUMBER_ERROR')) echo ' "' . html_entity_decode(ENTRY_TELEPHONE_NUMBER_ERROR) . '" : "telephone",' . PHP_EOL;
if (defined('ENTRY_PASSWORD_ERROR')) echo ' "' . sprintf(html_entity_decode(ENTRY_PASSWORD_ERROR), ENTRY_PASSWORD_MIN_LENGTH) . '" : "password",' . PHP_EOL;
if (defined('ENTRY_PASSWORD_ERROR_MIN_LOWER')) echo ' "' . sprintf(html_entity_decode(ENTRY_PASSWORD_ERROR_MIN_LOWER), POLICY_MIN_LOWER_CHARS) . '" : "password",' . PHP_EOL;
if (defined('ENTRY_PASSWORD_ERROR_MIN_UPPER')) echo ' "' . sprintf(html_entity_decode(ENTRY_PASSWORD_ERROR_MIN_UPPER), POLICY_MIN_UPPER_CHARS) . '" : "password",' . PHP_EOL;
if (defined('ENTRY_PASSWORD_ERROR_MIN_NUM')) echo ' "' . sprintf(html_entity_decode(ENTRY_PASSWORD_ERROR_MIN_NUM), POLICY_MIN_NUMERIC_CHARS) . '" : "password",' . PHP_EOL;
if (defined('ENTRY_PASSWORD_ERROR_MIN_CHAR')) echo ' "' . sprintf(html_entity_decode(ENTRY_PASSWORD_ERROR_MIN_CHAR), POLICY_MIN_SPECIAL_CHARS) . '" : "password",' . PHP_EOL;
if (defined('ENTRY_PASSWORD_ERROR_NOT_MATCHING')) echo ' "' . html_entity_decode(ENTRY_PASSWORD_ERROR_NOT_MATCHING) . '" : "confirmation",' . PHP_EOL;
if (defined('ENTRY_PRIVACY_ERROR')) echo ' "' . html_entity_decode(ENTRY_PRIVACY_ERROR) . '" : "privacy",' . PHP_EOL;
if (defined('ERROR_VVCODE_POPUP')) echo ' "' . html_entity_decode(ERROR_VVCODE_POPUP) . '" : "vvcode",' . PHP_EOL;
?>
};

for (key in warnings) {
if (strWarnings.includes(key)) {
if (warnings[key] == "privacy") {
$("#create_account *[name='" + warnings[key] + "']").closest("td").next("td").append('<div class="create-account-warning-text">' + key + '</div>').css("color", colorWarnings);
} else {
$("#create_account *[name='" + warnings[key] + "']").closest("td").append('<div class="create-account-warning-text">' + key + '</div>').css("color", colorWarnings);
}
if (hasWarnings != 1) {
$("#create_account .errormessage").css("display", "none");
$("#create_account *[name='password'], #create_account *[name='confirmation'], #create_account *[name='vvcode']").closest("td").css("color", colorWarnings);
}
hasWarnings = 1;
}
}

});
</script>
<?php } ?>

Gruss
Hanspeter

Linkback: https://www.modified-shop.org/forum/index.php?topic=38086.0

Viol · **Antwort #1 am:** 08. Oktober 2017, 14:32:50

Danke Hanspeter

hpzeller · **Antwort #2 am:** 20. Oktober 2017, 10:21:56

Hallo Community

Ein kleines Update.

Um das im folgenden Zitat beschriebene Problem zu lösen habe ich einen kleinen Zusatz in den Code aus meinem ersten Beitrag integriert.

Zitat

Hallo!
ich habe immer wieder das Problem, dass Kunden vergessen die Hausnummer einzugeben, und das Programm nicht wie bei anderen Shops meckert, sondern das so hinnimmt.
Gibt es eine Lösung dafür ...

Neu wird der Kunde nun darauf hingewiesen wenn die Hausnummer fehlt nachdem er das Eingabefeld "Strasse/Nr." verlassen hat, siehe Bild.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Zusätzlich hab ich, weil der IE11 und der Safari Browser die Funktion includes() nicht unterstützen, diese durch die Funktion indexOf() ersetzt.

Hier der neue, bereinigte und ergänzte Code.

Code: PHP [Auswählen]

<?php if (strstr($PHP_SELF, FILENAME_CREATE_ACCOUNT) || strstr($PHP_SELF, FILENAME_CREATE_GUEST_ACCOUNT)) {
require_once (DIR_FS_EXTERNAL.'password_policy/password_policy.php');
?>
<script>
$(function () {
var key, hasWarnings;
var colorWarnings = "#ff0000";
var strWarnings = $("#create_account .errormessage").html();
var warnings = {
<?php
if (defined('ENTRY_GENDER_ERROR')) echo ' "' . html_entity_decode(ENTRY_GENDER_ERROR) . '" : "gender",' . PHP_EOL;
if (defined('ENTRY_FIRST_NAME_ERROR')) echo ' "' . html_entity_decode(ENTRY_FIRST_NAME_ERROR) . '" : "firstname",' . PHP_EOL;
if (defined('ENTRY_LAST_NAME_ERROR')) echo ' "' . html_entity_decode(ENTRY_LAST_NAME_ERROR) . '" : "lastname",' . PHP_EOL;
if (defined('ENTRY_DATE_OF_BIRTH_ERROR')) echo ' "' . html_entity_decode(ENTRY_DATE_OF_BIRTH_ERROR) . '" : "dob",' . PHP_EOL;
if (defined('ENTRY_EMAIL_ADDRESS_ERROR')) echo ' "' . html_entity_decode(ENTRY_EMAIL_ADDRESS_ERROR) . '" : "email_address",' . PHP_EOL;
if (defined('ENTRY_EMAIL_ADDRESS_CHECK_ERROR')) echo ' "' . html_entity_decode(ENTRY_EMAIL_ADDRESS_CHECK_ERROR) . '" : "email_address",' . PHP_EOL;
if (defined('ENTRY_EMAIL_ADDRESS_ERROR_EXISTS')) echo ' "' . html_entity_decode(ENTRY_EMAIL_ADDRESS_ERROR_EXISTS) . '" : "email_address",' . PHP_EOL;
if (defined('ENTRY_EMAIL_ERROR_NOT_MATCHING')) echo ' "' . html_entity_decode(ENTRY_EMAIL_ERROR_NOT_MATCHING) . '" : "confirm_email_address",' . PHP_EOL;
if (defined('ENTRY_STREET_ADDRESS_ERROR')) echo ' "' . html_entity_decode(ENTRY_STREET_ADDRESS_ERROR) . '" : "street_address",' . PHP_EOL;
if (defined('ENTRY_POST_CODE_ERROR')) echo ' "' . html_entity_decode(ENTRY_POST_CODE_ERROR) . '" : "postcode",' . PHP_EOL;
if (defined('ENTRY_CITY_ERROR')) echo ' "' . html_entity_decode(ENTRY_CITY_ERROR) . '" : "city",' . PHP_EOL;
if (defined('ENTRY_STATE_ERROR')) echo ' "' . html_entity_decode(ENTRY_STATE_ERROR) . '" : "state",' . PHP_EOL;
if (defined('ENTRY_STATE_ERROR_SELECT')) echo ' "' . html_entity_decode(ENTRY_STATE_ERROR_SELECT) . '" : "state",' . PHP_EOL;
if (defined('ENTRY_COUNTRY_ERROR')) echo ' "' . html_entity_decode(ENTRY_COUNTRY_ERROR) . '" : "country",' . PHP_EOL;
if (defined('ENTRY_TELEPHONE_NUMBER_ERROR')) echo ' "' . html_entity_decode(ENTRY_TELEPHONE_NUMBER_ERROR) . '" : "telephone",' . PHP_EOL;
if (defined('ENTRY_PASSWORD_ERROR')) echo ' "' . sprintf(html_entity_decode(ENTRY_PASSWORD_ERROR), ENTRY_PASSWORD_MIN_LENGTH) . '" : "password",' . PHP_EOL;
if (defined('ENTRY_PASSWORD_ERROR_MIN_LOWER')) echo ' "' . sprintf(html_entity_decode(ENTRY_PASSWORD_ERROR_MIN_LOWER), POLICY_MIN_LOWER_CHARS) . '" : "password",' . PHP_EOL;
if (defined('ENTRY_PASSWORD_ERROR_MIN_UPPER')) echo ' "' . sprintf(html_entity_decode(ENTRY_PASSWORD_ERROR_MIN_UPPER), POLICY_MIN_UPPER_CHARS) . '" : "password",' . PHP_EOL;
if (defined('ENTRY_PASSWORD_ERROR_MIN_NUM')) echo ' "' . sprintf(html_entity_decode(ENTRY_PASSWORD_ERROR_MIN_NUM), POLICY_MIN_NUMERIC_CHARS) . '" : "password",' . PHP_EOL;
if (defined('ENTRY_PASSWORD_ERROR_MIN_CHAR')) echo ' "' . sprintf(html_entity_decode(ENTRY_PASSWORD_ERROR_MIN_CHAR), POLICY_MIN_SPECIAL_CHARS) . '" : "password",' . PHP_EOL;
if (defined('ENTRY_PASSWORD_ERROR_NOT_MATCHING')) echo ' "' . html_entity_decode(ENTRY_PASSWORD_ERROR_NOT_MATCHING) . '" : "confirmation",' . PHP_EOL;
if (defined('ENTRY_PRIVACY_ERROR')) echo ' "' . html_entity_decode(ENTRY_PRIVACY_ERROR) . '" : "privacy",' . PHP_EOL;
if (defined('ERROR_VVCODE_POPUP')) echo ' "' . html_entity_decode(ERROR_VVCODE_POPUP) . '" : "vvcode",' . PHP_EOL;
?>
};
<?php
echo ' $("#create_account *[name=\'street_address\']").blur(function() {if(!/[1-9]/.test(this.value) && this.value.length >= ' . ENTRY_STREET_ADDRESS_MIN_LENGTH . '){$(\'#number-error\').slideDown(200)}else{$(\'#number-error\').slideUp(200)}});' . PHP_EOL;

if ($_SESSION['language_code'] == 'de') {
echo ' $("#create_account *[name=\'street_address\']").closest("td").append(\'<div id="number-error" style="display: none;"><span style="color:\' + colorWarnings + \'">Hausnummer fehlt!</span> Ignorieren Sie diese Meldung wenn Sie keine haben.</div>\');' . PHP_EOL;
} else if ($_SESSION['language_code'] == 'en') {
echo ' $("#create_account *[name=\'street_address\']").closest("td").append(\'<div id="number-error" style="display: none;"><span style="color:\' + colorWarnings + \'">House number is missing!</span> Ignore this message if you have no house number.</div>\');' . PHP_EOL;
} else {
echo ' $("#create_account *[name=\'street_address\']").closest("td").append(\'<div id="number-error" style="display: none;"><span style="color:\' + colorWarnings + \'">House number is missing!</span> Ignore this message if you have no house number.</div>\')' . PHP_EOL;
}
?>
for (key in warnings) {
if (strWarnings.indexOf(key) != -1) {
if (warnings[key] == "privacy") {
$("#create_account *[name='" + warnings[key] + "']").closest("td").next("td").append('<div class="create-account-warning-text">' + key + '</div>').css("color", colorWarnings);
} else {
$("#create_account *[name='" + warnings[key] + "']").closest("td").append('<div class="create-account-warning-text">' + key + '</div>').css("color", colorWarnings);
}
if (hasWarnings != 1) {
$("#create_account .errormessage").css("display", "none");
$("#create_account *[name='password'], #create_account *[name='confirmation'], #create_account *[name='vvcode']").closest("td").css("color", colorWarnings);
}
hasWarnings = 1;
}
}

});
</script>
<?php } ?>

Gruss
Hanspeter

longchuan · **Antwort #3 am:** 20. Oktober 2017, 10:48:00

Hallo Funktioniert das auch im Orginalen Responsiven Template
Danke schon einmal für deine Arbeit

lg

p3e · **Antwort #4 am:** 20. Oktober 2017, 11:11:07

Das ist eine Gute Idee Hanspeter!
Wieso eigentlich nur für UTF-8?

hpzeller · **Antwort #5 am:** 20. Oktober 2017, 11:47:39

Hallo longchuan,

das 'tpl_modified_responsive' habe ich nicht, aber die Chancen stehen gut das es auch in diesem Template funktioniert. Ich würde sagen einfach mal ausprobieren und Feedback geben.

Gruss
Hasnpeter

Herr_Bert · **Antwort #6 am:** 20. Oktober 2017, 11:56:54

Ich denke mal dass ich das nicht im 1.6er einsetzen kann, oder

Schluchz, Heul

Herr_Bert

hpzeller · **Antwort #7 am:** 20. Oktober 2017, 12:01:00

Hallo p3e,

es ist möglich, dass mein Code auch bei anderen Charsets funktioniert, aber ich prüfe das nicht mehr.

Zum Thema UTF-8 empfehle ich folgende Links.
https://www.w3.org/International/questions/qa-what-is-encoding
https://www.w3.org/International/questions/qa-what-is-encoding#how

Gruss
Hasnpeter

p3e · **Antwort #8 am:** 20. Oktober 2017, 12:13:32

Was UTF-8 angeht, gebe ich Dir Recht. Alles führt über kurz oder lang dahin. Ich habe nur noch zu viele dringendere Baustellen als die Umstellung auf UTF-8.

longchuan · **Antwort #9 am:** 20. Oktober 2017, 12:23:14

Super Danke hpzeller
funktioniert bei mir auch.

woodpecker · **Antwort #10 am:** 20. Oktober 2017, 13:17:44

Super Vielen Dank für's teilen

Funktioniert auch im 'tpl_modified_responsive'.

Grüße
Rene

hpzeller · **Antwort #11 am:** 21. Oktober 2017, 10:22:44

Zitat von: Herr_Bert am 20. Oktober 2017, 11:56:54

Ich denke mal dass ich das nicht im 1.6er einsetzen kann, oder Schluchz, Heul

Herr_Bert

In einem 1.6er-SP3-Shop mit Standard-Template xtc5 funktioniert der Code aus Antwort #2, wenn man ihn am Ende in die 'templates/xtc5/javascript/general.js.php' einfügt und die folgende Zeile

Code: PHP [Auswählen]

require_once (DIR_FS_EXTERNAL.'password_policy/password_policy.php');

so

Code: PHP [Auswählen]

// require_once (DIR_FS_EXTERNAL.'password_policy/password_policy.php');

auskommentiert.

Der Grund warum der Code in deinem Shop nicht funktioniert liegt also weniger an der Version, als an deinem speziellen Template.

Gruss
Hanspeter

awids · **Antwort #12 am:** 21. Oktober 2017, 10:36:31

Zitat von: Herr_Bert am 20. Oktober 2017, 11:56:54

Ich denke mal dass ich das nicht im 1.6er einsetzen kann, oder Schluchz, Heul

Herr_Bert

Da sich nach und nach sämtliche Neuentwicklungen und künftigen Anpassungen nur noch auf die modified-2x.-Versionen beziehen werden, würde ich an deiner Stelle ohnehin mal über ein Update nachdenken.

Dies muss ja keine Nacht- und Nebel-Aktion sein, sondern kann über Monate parallel in einem Unterordner oder auf einer Subdomain aufgebaut werden, ehe du tatsächlich auf 2.x wechselst.

Aber das ist natürlich deine Entscheidung, die dir niemand abnehmen wird. Nur irgendwann hilft dir auch kein "Schluchz, Heul" mehr weiter, spätestens wenn sich niemand mehr erbarmt, hier Scripte und Module auch für 1.0x-Versionen kompatibel zu machen, bzw. darauf hinzuweisen, wie du das umsetzt.

Herr_Bert · **Antwort #13 am:** 21. Oktober 2017, 14:59:06

@awids

Zitat

Der Grund warum der Code in deinem Shop nicht funktioniert liegt also weniger an der Version, als an deinem speziellen Template.

Warum soll ich einen "schnurrenden" Shop aktualisieren solange das nicht unbedingt nötig ist? Wir arbeiten schon 18 - 20 Stunden am Tag, da habe ich andere Sorgen

Zwischenzeitlich habe ich einiges von Dienstleistern anpassen lassen und beschäftige mich nur noch mit kleinen Verschönerungen, das "Schluchz, Heul" war einfach nur als Gag und nicht als Hilferuf gedacht.

Herr_Bert

awids · **Antwort #14 am:** 21. Oktober 2017, 15:35:55

Wie gesagt: Deine Entscheidung. Das ändert aber nichts daran, dass ich recht habe.