{"id":7908,"date":"2021-05-02T13:38:55","date_gmt":"2021-05-02T13:38:55","guid":{"rendered":"https:\/\/www.bay20.com\/?p=7908"},"modified":"2025-05-21T16:28:39","modified_gmt":"2025-05-21T10:43:39","slug":"anleitung-zum-hinzufugen-von-benutzerdefiniertem-javascript-in-agento-2-mit-require-js","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/anleitung-zum-hinzufugen-von-benutzerdefiniertem-javascript-in-agento-2-mit-require-js\/","title":{"rendered":"Wie man benutzerdefinierte Javascript in Magento 2 mit requireJS hinzuf\u00fcgen?"},"content":{"rendered":"\n

Erstellen Sie ein neues Modul mit Bay20_Bay20CustomJS<\/p>\n\n\n\n

Schritt 1:<\/strong> Erstellen Sie die Datei registration.php.<\/strong><\/p>\n\n\n\n

app\/code\/Bay20\/Bay20CustomJS\/registration.php<\/p>\n\n\n\n

<?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n\t\\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n\t'Bay20_Bay20CustomJS',\n\t__DIR__\n);<\/code><\/pre>\n\n\n\n
Schritt 2:<\/strong> Erstellen Sie die Datei module.xml.<\/strong><\/p>\n\n\n\n
app\/code\/Bay20\/Bay20CustomJS\/etc\/module.xml<\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n    <module name=\"Bay20_Bay20CustomJS\" setup_version=\"1.0.0\">\n    <\/module>\n<\/config><\/code><\/pre>\n\n\n\n
Schritt 3:<\/strong> Erstellen Sie die Datei requirejs-config.js.<\/strong><\/p>\n\n\n\n
app\/code\/Bay20\/Bay20CustomJS\/view\/frontend\/requirejs-config.js<\/p>\n\n\n\n
var config = {\n    map: {\n        '*': {\n            wktestrequire: 'Bay20_Bay20CustomJS\/js\/wkrequirejs',\n        }\n    }\n};<\/code><\/pre>\n\n\n\n
Schritt 4:<\/strong> Datei test.phtml<\/strong> erstellen<\/p>\n\n\n\n
app\/code\/Bay20\/Bay20CustomJS\/view\/frontend\/templates\/test.phtml<\/p>\n\n\n\n
<div id=\"testdiv\">\n\t<a>Test anchor tag<\/a>\n<\/div>\n\n<?php\n$formData = [\n    'divElement'       =>  '#testdiv',\n];\n$serializedFormData = $this->helper('Magento\\Framework\\Json\\Helper\\Data')->jsonEncode($formData);\n?>\n<script type=\"text\/x-magento-init\">\n    {\n        \"*\": {\n            \"wktestrequire\": <?php \/* @noEscape *\/ echo $serializedFormData; ?>\n        }\n    }\n<\/script><\/code><\/pre>\n\n\n\n
Schritt 5:<\/strong> Erstellen Sie die Datei wkrequirejs.js.<\/strong><\/p>\n\n\n\n
app\/code\/Bay20\/Bay20CustomJS\/view\/frontend\/web\/js\/wkrequirejs.js<\/p>\n\n\n\n
define([\n    \"jquery\",\n    'Magento_Ui\/js\/modal\/alert',\n    \"jquery\/ui\",\n], function ($, alert) {\n    'use strict';\n    $.widget('mage.wktestrequire', {\n        options: {\n            confirmMsg: ('divElement is removed.')\n        },\n        _create: function () {\n            var self = this;\n            $(self.options.divElement).remove();\n            alert({\n                content: self.options.confirmMsg\n            });\n        }\n    });\n    return $.mage.wktestrequire;\n});<\/code><\/pre>\n\n\n\n
Schritt 6:<\/strong> F\u00fchren Sie den folgenden Befehl aus.<\/p>\n\n\n\n
php bin\/magento setup:upgrade<\/code><\/pre>\n\n\n\n
Bitte kontaktieren Sie uns unter manish@bay20.com<\/a><\/strong> oder rufen Sie uns unter +91-8800519180<\/a><\/strong> an, wenn Sie Unterst\u00fctzung f\u00fcr Magento 2 ben\u00f6tigen. Sie k\u00f6nnen auch die Magento2-Entwicklungsseite<\/strong><\/a><\/strong> besuchen, um die von uns angebotenen Dienstleistungen zu \u00fcberpr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Magento 2 uses RequireJS for its JavaScript library. To add custom JavaScript to Magento 2, you must create a RequireJS-compatible JavaScript file, and then add it to the page via the layout XML.<\/p>\n","protected":false},"author":1,"featured_media":8429,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77,79],"tags":[],"class_list":["post-7908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento2","category-magento-anleitung"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/7908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=7908"}],"version-history":[{"count":7,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/7908\/revisions"}],"predecessor-version":[{"id":17291,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/7908\/revisions\/17291"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/8429"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=7908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=7908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=7908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}