Anti-Cyrillic

Kennen Sie das auch? Sie haben einen Online-Shop mit dem Magento CMS aufgebaut, um Ihre Produkte online zu verkaufen. Um die Kundenbindung zu verbessern, können Ihre Kunden Ihnen über Formulare Nachrichten zukommen lassen. Doch Ihr Posteingang ist voller Spam-Nachrichten auf Kyrillisch, Arabisch oder Chinesisch, und Sie wissen nicht, wie Sie sich dagegen effektiv wehren können?

Nichts leichter als das! Wie schon Apple-Mitbegründer Steve Jobs sagte, ist es nur „One more thing“, oder in unserem Fall „One more Extension“. In diesem Blogartikel zeigen wir Ihnen, wie Sie ganz einfach kyrillische, arabische und chinesische Buchstaben mit einer kleinen Extension blockieren und so Ihren Posteingang sauber halten können.

 

 

1. Erstellen Sie einen leeren Ordner unter Ihrem Projekt in app/code/vendor/. Dieser Ordner wird später unsere Extension enthalten. Benennen Sie den Ordner so, wie Sie die Extension betiteln möchten, in unserem Fall nennen wir die Extension „AntiCyrillicGuard“.

 

2. Im nächsten Schritt erstellen Sie in Ihrer Extension, also in dem gerade erstellten Ordner, einen weiteren Ordner mit dem Titel „etc“. Hierbei ist es von höchster Wichtigkeit, dass der Ordner „etc“ benannt wird, da Magento sonst nicht erkennt, dass in diesem Ordner die Konfigurationsdateien liegen, die notwendig sind, um die Extension korrekt zu integrieren.

 

3. Unter dem Ordner „etc“ erstellen Sie die Datei „module.xml“, um die Extension zu deklarieren und Magento grundlegende Informationen wie Modulnamen und Setup-Version mitzuteilen. Wichtig hierbei ist, dass der „module name“ nicht nur den Namen Ihrer Extension enthält, sondern auch den Namen des Vendors mit einem Unterstrich davor. In unserem Fall wäre das also „Econcess_AntiCyrillicGuard“.

 

alt attribute

 

4. Navigieren Sie anschließend zum Hauptverzeichnis Ihrer Extension und erstellen Sie die Datei „registration.php“. Diese Datei teilt Magento mit, dass ein neues Modul bzw. eine neue Extension vorhanden ist und registriert werden muss, da die Funktionalität der Extension ansonsten nicht geladen würde. Auch hier ist es wichtig, den Namen des Vendors beim „componentName“ voranzustellen.

 

alt attribute

 

5. Anschließend erstellen Sie im Hauptverzeichnis Ihrer Extension den Ordner /view/ mit den Unterordnern /layout/ und /web/js. Das Verzeichnis unter view sollte dann wie folgt aussehen:

 

alt attribute

 

6. Unter dem gerade erstellten „layout“-Ordner erstellen Sie die Datei „default.xml“. Diese Datei kann verwendet werden, um JavaScript-Dateien zentral einzubinden und zu laden. Wenn Sie schon einmal eine Webseite per Hand, also ohne CMS, geschrieben haben, dann wissen Sie, dass JavaScript-Dateien in der Regel im -Bereich der Seite eingebaut werden. Ähnlich funktioniert die default.xml-Datei, jedoch zentralisierter. Es ist wohl kein Novum mehr, dass Sie vor der Benennung Ihrer Extension den Namen Ihres Vendors angeben. Außerdem geben Sie hinter ::js/ den Namen der JavaScript-Datei an, die das gewünschte Verhalten ermöglicht. In unserem Fall haben wir diese Datei prevent-cyrillic.js getauft.

 

alt attribute

 

7. Kommen wir zum Kern dieser einfachen Extension, von dem abhängt, wie und ob die Extension kyrillische, arabische und chinesische Buchstaben blockiert. Erstellen Sie unter view/web/js/ eine weitere JavaScript-Datei. In dieser Anleitung benennen wir sie, wie oben bereits erwähnt, „prevent-cyrillic.js“. Wenn Sie der Datei in der default.xml einen anderen Namen gegeben haben, ist es essenziell, dass Sie genau diesen Namen für die Datei verwenden!

 

I. Planung der Funktionalität: Bevor wir mit dem Schreiben des Codes beginnen, überlegen wir uns, wann die Funktionalität der Erweiterung greifen soll. Nach etwas Überlegung haben wir beschlossen, dass die Erweiterung das Eingeben und Einfügen von russischen, arabischen und chinesischen Schriftzeichen verhindern soll. Hierfür benötigen wir im Wesentlichen zwei Event Listener für die Typen „keypress“ und „paste“.

 

II. Sicherstellen des DOM-Ladezustands: Bevor wir die Event Listener schreiben, stellen wir sicher, dass das Skript erst ausgeführt wird, nachdem das DOM vollständig geladen ist. Dies erreichen wir, indem wir einen Event Listener vom Typ „DOMContentLoaded“ erstellen.

 

III. Auswahl der relevanten Elemente: Nun entscheiden wir, welche Elemente auf der Seite überwacht werden sollen, um das Eingeben unerwünschter Zeichen zu verhindern. Üblicherweise reichen die Selektoren „input“ und „textarea“ aus, aber zur zusätzlichen Sicherheit wählen wir auch die Elemente „select“, „button“ und „[contenteditable=true]“.

 

IV. Definition der Regex-Patterns: Wir identifizieren die Regex-Muster, die kyrillische, arabische und chinesische Schriftzeichen abdecken. Für kyrillische Zeichen verwenden wir /[\u0400-\u04FF]/, für arabische /[\u0600-\u06FF]/ und für chinesische /[\u4E00-\u9FFF]/.

 

V. Fertiger Code: Die fertige Datei sieht damit wie folgt aus:

 

alt attribute

 

8. Der letzte Schritt vor Vollendung der Extension, erstellen wir – wichtig – ebenfalls unter dem Hauptverzeichnis die „require-config.js“-Datei, die die JavaScript-Module konfiguriert, definiert und deren Abhängigkeiten in Magento festlegt, um sie im Frontend effizient zu laden.

 

alt attribute

 

9. Und fertig ist die Extension, um die Eingabe und das Einfügen von kyrillischen, arabischen und chinesischen Schriftzeichen in Ihrem Webshop zu verhindern!

 

 

Unsere Internetagentur München, Econcess, legt einen großen Wert auf ein aufgewecktes Design, um viele Kunden anzusprechen. Wenn Sie nun Interesse an einer Webseite für Ihre Firma haben, melden Sie sich gerne bei uns. Wir sind spezialisiert auf maßgeschneiderte Lösungen und bieten Ihnen professionelle Unterstützung bei der Realisierung Ihrer digitalen Projekte.