Antwort #11 am: 27. März 2020, 17:32:09
Just for the record:
Wer so einen Reload-Button hinter das Captcha einbauen möchte, hier eine Anleitung:
Dabei ist zu beachten
- was allerdings immer gilt für die Shop-Version 2.0.5.0, also auch ohne den Reload-Button -
daß der Cache ausgeschaltet ist
Backend => Erw. Konfiguration => Cache Optionen => "Cache benutzen". "DB Cache" kann angeschaltet sein.
Das liegt an einem Fehler im Cache-System welches Seiten die Fehlermeldungen ausgeben können undifferenziert cacht und dann immer die gecachte Seite ausgibt, was zu irrsinnigen oder zu fehlenden Fehlermeldungen führen kann.
Anleitung:(am Beispiel Kontaktformular für
tpl_modified_responsive und aktiviertem System-Modul "PhpCaptcha".)
Voraussetzung:
- Shop-Version 2.0.5.0
- Implementierung des Changesets r12611 aus Ticket #1752.
Das changeset kann ruhig in den Shop geladen werden, da es so oder in ähnlicher Funktion in der kommenden 2.0.5.1 ohnehin kommen wird.
1. In
/templates/YOUR_TEMPLATE/module/contact_us.html das suchen
<td><span class="fieldtext">{#text_sec_code#}</span><span class="stern">{$VVIMG}</span></td>
und hiermit ersetzen
<td><span class="fieldtext">{#text_sec_code#}</span><span class="stern">{$VVIMG}</span> <i id="rel-capt" class="fa fa-undo" title="reload"></i></td> {*added reload icon by noRiddle, EUER_KÜRZEL*}
2. In
/templates/YOUR_TEMPLATE/stylesheet.css ganz unten
das einfügen
/*BOC reload icon for Captcha by noRiddle, EUER_KÜRZEL*/
.stern img {vertical-align: middle;}
#rel-capt {
font-size: 50px;
display: inline-block;
padding: 0 0 0 10px;
vertical-align: middle;
cursor:pointer;
}
/*EOC reload icon for Captcha by noRiddle, EUER_KÜRZEL*/
Die
font-size sollte zur im o.g. System-Modul konfigurierten Höhe des Captcha passen, einfach ein wenig experimentieren.
3. Legt eine Datei an namens
captcha.js.php in
/templates/YOUR_TEMPLATE/javascript/extra/ mit folgendem inhalt
<?php
/**********************************************************************************************************
* file: captcha.js.php
* path: /templates/YOUR_TEMPLATE/javascript/extra/
* use: define function for reload button for captcha
* adaptation for reload icon in e.g. /templates/YOUR_TEMPLATE/module/contact_us.html needed
*
* (c) 03-2020, noRiddle
***********************************************************************************************************/
$post_ajax_captcha_url = xtc_href_link('captcha_reload.php');
?>
<script>
$(function(){
var $rel_capt = $('#rel-capt');
$rel_capt.click(function(){
var d = new Date();
$.post("<?php echo $post_ajax_captcha_url; ?>",
{captcha_reloaded: 'cr_true'},
function(data){
$rel_capt.prev('span').find('img').attr('src', data);
}
);
});
});
</script>
4. Legt eine Datei im Root-Verzeichnis des Shops an namens
captcha_reload.php mit folgendem Inhalt
<?php/*******************************************************
* file: captcha_reload.php
* path: /
* use: php response on ajax request to reload captcha
*
* (c) 03-2020, noRiddle
*******************************************************/if(isset($_POST['captcha_reloaded']) && $_POST['captcha_reloaded'] == 'cr_true') { include('includes/application_top.php'); require_once(DIR_WS_CLASSES
.'modified_captcha.php'); $mod_capt_inst = $_mod_captcha_class::getInstance(); echo 'data:image/jpeg;base64,'.base64_encode($mod_capt_inst->output()); exit();} else { echo 'No access to this area.';}?> Außerdem ist es empfehlenswert dem Kunden mitzuteilen, daß bei der Eingabe der Zeichen des Captchas Groß- und Kleinschreibung egal sind, das wird nämlich code-technisch abgefangen und ist für den User/Kunden viel einfacher.
Dafür könnte man folgendes machen:
In
/templates/YOUR_TEMPLATE/lang/lang_german.custom unten das einfügen
#BOC overwrite vars, EUER_KÜRZEL
text_inp_code = 'Sicherheitscode<br />(Groß- und Kleinschreibung egal)'
#EOC overwrite vars, EUER_KÜRZEL
In
/templates/YOUR_TEMPLATE/lang/lang_english.custom unten das einfügen
#BOC overwrite vars, EUER_KÜRZEL
text_inp_code = 'Security code<br />(Don\'t mind upper and lower case.)'
#EOC overwrite vars, EUER_KÜRZEL
Viel Erfolg.
Gruß,
noRiddle
*NACHTRAG*
Hier noch ein Screenshot.