Does this sound familiar? You have built an online shop with the Magento CMS to sell your products online. To improve customer loyalty, your customers can send you messages via forms. But your inbox is full of spam messages in Cyrillic, Arabic, or Chinese, and you don't know how to effectively protect yourself against them?
Nothing could be easier! As Apple co-founder Steve Jobs once said, it's just “One more thing”, or in our case, “One more Extension”. In this blog post, we will show you how you can easily block Cyrillic, Arabic, and Chinese characters with a small extension and keep your inbox clean.
1. Create an empty folder under your project in app/code/vendor/. This folder will later contain our extension. Name the folder according to the name you want to give your extension; in our case, we will call the extension “AntiCyrillicGuard”.
2. In the next step, create another folder inside your extension, i.e. in the folder you just created, with the name “etc”. It is extremely important that the folder is named “etc”, otherwise Magento will not recognize that this folder contains the configuration files required to integrate the extension correctly.
3. Inside the “etc” folder, create the file “module.xml” to declare the extension and provide Magento with basic information such as the module name and setup version. It is important here that the “module name” contains not only the name of your extension, but also the name of the vendor followed by an underscore. In our case, this would be “Econcess_AntiCyrillicGuard”.
4. Next, navigate to the main directory of your extension and create the file “registration.php”. This file tells Magento that a new module or extension exists and needs to be registered; otherwise, the functionality of the extension would not be loaded. Here too, it is important to prefix the “componentName” with the vendor name.
5. Then create the /view/ directory in the main directory of your extension, with the subdirectories /layout/ and /web/js. The directory structure under view should then look like this:
6. Inside the “layout” folder you just created, create the file “default.xml”. This file can be used to centrally integrate and load JavaScript files. If you have ever written a website by hand, i.e. without a CMS, you know that JavaScript files are generally included in the page's -section. The default.xml file works in a similar way, but in a more centralized manner. It is probably no longer a novelty that you need to specify the name of your vendor before naming your extension. In addition, after ::js/ you specify the name of the JavaScript file that provides the desired behavior. In our case, we named this file prevent-cyrillic.js.
7. Now we come to the core of this simple extension, which determines how and whether the extension blocks Cyrillic, Arabic, and Chinese characters. Create another JavaScript file under view/web/js/. In this guide, we will name it “prevent-cyrillic.js”, as already mentioned above. If you gave the file a different name in default.xml, it is essential that you use exactly that name for the file!
I. Planning the functionality: Before we start writing the code, we consider when the functionality of the extension should take effect. After some consideration, we decided that the extension should prevent users from entering and pasting Russian, Arabic, and Chinese characters. For this, we essentially need two event listeners for the “keypress” and “paste” event types.
II. Ensuring the DOM loading state: Before writing the event listeners, we make sure that the script is only executed after the DOM has been fully loaded. We achieve this by creating an event listener of the “DOMContentLoaded” type.
III. Selecting the relevant elements: We now decide which elements on the page should be monitored to prevent unwanted characters from being entered. Usually, the selectors “input” and “textarea” are sufficient, but for additional security, we also select the elements “select”, “button”, and “[contenteditable=true]”.
IV. Defining the regex patterns: We identify the regex patterns that cover Cyrillic, Arabic, and Chinese characters. For Cyrillic characters, we use /[\u0400-\u04FF]/, for Arabic /[\u0600-\u06FF]/, and for Chinese /[\u4E00-\u9FFF]/.
V. Finished code: The completed file therefore looks like this:
8. The final step before completing the extension is to create the “require-config.js” file – importantly, also in the main directory. This file configures and defines the JavaScript modules and their dependencies in Magento so that they can be loaded efficiently in the frontend.
9. And that's it! The extension is ready to prevent the entry and pasting of Cyrillic, Arabic, and Chinese characters in your webshop!
Our Munich web agency, Econcess, places great emphasis on a vibrant design to appeal to as many customers as possible. If you are now interested in a website for your company, feel free to get in touch with us. We specialize in customized solutions and offer professional support in implementing your digital projects.
