How To Add Custom JavaScript In Magento 2 With RequireJS?

If you need Custom JavaScript In Magento2 then you can follow this blog step by step.

Step 1: Create registration.php file.

app/code/Bluethink/CustomJS/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
        \Magento\Framework\Component\ComponentRegistrar::MODULE,
        'Bluethink_CustomJS',
        __DIR__
);

1

2

3

4

5

6

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Bluethink_CustomJS',

__DIR__

);

Step 2: Create module.xml file.

app/code/Bluethink/CustomJS/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Bluethink_CustomJS" setup_version="1.0.0">
    </module>
</config>

1

2

3

4

5

<?xml version="1.0"?>

</module>

</config>

Step 3: Create requirejs-config.js file.

app/code/Bluethink/CustomJS/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            wktestrequire: 'Bluethink_CustomJS/js/wkrequirejs',
        }
    }
};

1

2

3

4

5

6

7

var config = {

map: {

'*': {

wktestrequire: 'Bluethink_CustomJS/js/wkrequirejs',

}

};

Step 4: Create test.phtml file.

app/code/Bluethink/CustomJS/view/frontend/templates/test.phtml

<div id="testdiv">
        <a>Test anchor tag</a>
</div>

<?php
$formData = [
    'divElement' =>  '#testdiv',
];
$serializedFormData = $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($formData);
?>
<script type="text/x-magento-init">
    {
        "*": {
            "wktestrequire": <?php /* @noEscape */ echo $serializedFormData; ?>
        }
    }
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<a>Test anchor tag</a>

</div>

<?php

$formData = [

'divElement' => '#testdiv',

];

$serializedFormData = $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($formData);

?>

{

"*": {

"wktestrequire": <?php /* @noEscape */ echo $serializedFormData; ?>

}

</script>

Step 5: Creat wkrequirejs.js file.

app/code/Bluethink/CustomJS/view/frontend/web/js/wkrequirejs.js

define([
    "jquery",
    'Magento_Ui/js/modal/alert',
    "jquery/ui",
], function ($, alert) {
    'use strict';
    $.widget('mage.wktestrequire', {
        options: {
            confirmMsg: ('divElement is removed.')
        },
        _create: function () {
            var self = this;
            $(self.options.divElement).remove();
            alert({
                content: self.options.confirmMsg
            });
        }
    });
    return $.mage.wktestrequire;
});

1

2

3

4

5

6

7

8

9

10

11

12