Hello Magento Friends,
Sometimes, you may need to create a custom RequireJS file to add custom functionality or extend existing features. In this blog, we will guide you through the process of creating a custom RequireJS file in Magento 2.
Before diving into the implementation, it’s important to understand how Magento 2 utilizes RequireJS. Magento 2 uses RequireJS to load JavaScript modules asynchronously, which helps in improving page load times by only loading the necessary scripts when required. The requirejs-config.js file is where you configure your custom JavaScript files, dependencies, and paths.
Steps to Create Custom Require JS File in Magento 2:
Step 1: Create a “di.xml” file inside the Extension etc folder.
app\code\Vendor\Extension\etc
Then add the code as follows
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Framework\RequireJs\Config\File\Collector\Aggregated"> <plugin name="requirejsConfigPlugin" type="Vendor\Extension\Plugin\RequireJs\AfterFiles" sortOrder="100" /> </type> </config> |
Step 2: Now create the “Afterfiles.php” file inside the Extension Plugin folder.
app\code\Vendor\Extension\Plugin\RequireJs
And include the code as below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?php namespace Vendor\Extension\Plugin\RequireJs; use Vendor\Extension\Helper\Data; use Magento\Framework\Component\ComponentRegistrar; use Magento\Framework\Component\ComponentRegistrarInterface; use Magento\Framework\RequireJs\Config\File\Collector\Aggregated; use Magento\Framework\View\File; use Magento\Framework\View\File\Factory; class Afterfiles { const MODULE_NAME = 'Vendor_Extension'; protected $fileFactory; private $componentRegistrar; public function __construct( Factory $fileFactory, ComponentRegistrarInterface $componentRegistrar, ) { $this->fileFactory = $fileFactory; $this->componentRegistrar = $componentRegistrar; } /** * Load mage-requirejs-config.js when meet the condition * @param Aggregated $subject * @param $result * @return File[] */ public function afterGetFiles( Aggregated $subject, $result ) { /* You can add your custom conditions here to check extension enable or disable */ $currentModulePath = $this->componentRegistrar->getPath(ComponentRegistrar::MODULE, self::MODULE_NAME); $fileName = $currentModulePath.'/view/frontend/mage-requirejs-config.js'; $newFile = $this->fileFactory->create($fileName, self::MODULE_NAME, null, false); $result[] = $newFile; return $result; } } |
Step 3: Now create the “mage-requirejs-config.js” file inside the Extension Web folder.
app\code\Vendor\Extension\view\frontend\
Then, add the following code
Note: Here, we have overridden the login.js file. You can override the file as per your requirement.
|
1 2 3 4 5 6 7 |
var config = { map: { '*': { 'Magento_Customer/js/action/login' : 'Vendor_Extension/js/action/login', } } }; |
Step 4: Now override the “login.js” file inside the Extension js folder.
app\code\Vendor\Extension\view\frontend\web\js\action
Now add the following code snippet
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
/** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ define([ 'jquery', 'mage/storage', 'Magento_Ui/js/model/messageList', 'Magento_Customer/js/customer-data', 'mage/translate' ], function ($, storage, globalMessageList, customerData, $t) { 'use strict'; /* custom require js call check */ console.log('called Custom js'); var callbacks = [], /** * @param {Object} loginData * @param {String} redirectUrl * @param {*} isGlobal * @param {Object} messageContainer */ action = function (loginData, redirectUrl, isGlobal, messageContainer) { messageContainer = messageContainer || globalMessageList; let customerLoginUrl = 'customer/ajax/login'; if (loginData.customerLoginUrl) { customerLoginUrl = loginData.customerLoginUrl; delete loginData.customerLoginUrl; } return storage.post( customerLoginUrl, JSON.stringify(loginData), isGlobal ).done(function (response) { if (response.errors) { messageContainer.addErrorMessage(response); callbacks.forEach(function (callback) { callback(loginData); }); } else { callbacks.forEach(function (callback) { callback(loginData); }); customerData.invalidate(['customer']); if (response.redirectUrl) { window.location.href = response.redirectUrl; } else if (redirectUrl) { window.location.href = redirectUrl; } else { location.reload(); } } }).fail(function () { messageContainer.addErrorMessage({ 'message': $t('Could not authenticate. Please try again later') }); callbacks.forEach(function (callback) { callback(loginData); }); }); }; /** * @param {Function} callback */ action.registerLoginCallback = function (callback) { callbacks.push(callback); }; return action; }); |
Output:
Conclusion:
Creating a custom RequireJS file in Magento 2 allows you to add bespoke functionality and enhance the front-end experience of your e-commerce store. By following the steps outlined above, you can seamlessly integrate custom JavaScript modules into your Magento 2 store, ensuring that your code is organized, maintainable, and performs optimally.
If you have any questions or run into issues, feel free to leave a comment below, and we’ll be happy to help!
Happy Coding!
