Last active
September 6, 2024 06:42
-
-
Save 0-Sony/f13ef5847c1811948cb0d68ac11d6b65 to your computer and use it in GitHub Desktop.
Magento 2 : Work around JS : Call a js file using requireJs or call a js file before another one or override existing js method
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0) | |
| * @author Phuong LE <[email protected]> <@> | |
| * @copyright Copyright (c) 2018 Menincode (http://www.menincode.com) | |
| */ | |
| /** MyNamespace/MyModule/view/frontend/web/js/call-custom-js-everywhere.js */ | |
| /** check the requirejs-config.js file */ | |
| define(function () { | |
| 'use strict'; | |
| console.log('This script is loaded on all pages :)'); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0) | |
| * @author Phuong LE <[email protected]> <@> | |
| * @copyright Copyright (c) 2021 Menincode (https://www.menincode.com) | |
| */ | |
| /** MyNamespace_MyModule/js/catalog-add-to-cart-mixin.js */ | |
| define(['jquery'], function ($) { | |
| 'use strict'; | |
| var targetWidgetMixin = { | |
| options: { | |
| minicartSelector: '[data-block="minicart"]', // override an existing option | |
| customLoader : false , // add new option | |
| }, | |
| /** Alter an existing function **/ | |
| isLoaderEnabled: function () { | |
| if (!this.options.customLoader) { | |
| // Do Something | |
| /** Access to an existing option */ | |
| if (this.options.processStart) { | |
| // Do Something | |
| } | |
| } else { | |
| return this._super(); | |
| } | |
| } | |
| }; | |
| return function (targetWidget) { | |
| $.widget('mage.catalogAddToCart', targetWidget, targetWidgetMixin); | |
| return $.mage.catalogAddToCart; // the widget by parent alias should be returned | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0) | |
| * @author Phuong LE <[email protected]> <@> | |
| * @copyright Copyright (c) 2021 Menincode (https://www.menincode.com) | |
| */ | |
| /** MyNamespace_MyModule/js/columns-mixin.js */ | |
| define(function () { | |
| 'use strict'; | |
| var mixin = { | |
| isDisabled: function (elem) { | |
| return elem.blockVisibility || this._super(); | |
| } | |
| }; | |
| return function (target) { // target == Result that Magento_Ui/.../columns returns. | |
| return target.extend(mixin); // new result that all other modules receive | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0"?><!-- | |
| /** | |
| * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0) | |
| * @author Phuong LE <[email protected]> <@> | |
| * @copyright Copyright (c) 2018 Menincode (http://www.menincode.com) | |
| */ | |
| /** MyNamespace/MyModule/view/frontend/layout/default.xml */ | |
| --> | |
| <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> | |
| <!-- | |
| Here is another way to call our custom js for all pages. | |
| Notice that we use the handle "default" (default.xml) | |
| This way is not recommend because the browser will stop to load the page until this script is executed. | |
| To avoid this, and use the layout way, you have to set the defer to "true" | |
| --> | |
| <head> | |
| <script src="MyNamespace_MyModule::js/call-custom-js-everywhere.js" defer="true"/> | |
| </head> | |
| </page> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0) | |
| * @author Phuong LE <[email protected]> <@> | |
| * @copyright Copyright (c) 2018 Menincode (http://www.menincode.com) | |
| */ | |
| /** MyNamespace/MyModule/view/frontend/web/js/loaded-before-another-js.js */ | |
| /** check the requirejs-config.js file */ | |
| define(function () { | |
| 'use strict'; | |
| console.log('This script is loaded before magento catalog upsell-products.js)'); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0) | |
| * @author Phuong LE <[email protected]> <@> | |
| * @copyright Copyright (c) 2021 Menincode (https://www.menincode.com) | |
| */ | |
| /** MyNamespace_MyModule/js/proceed-to-checkout-mixin.js */ | |
| define([ | |
| 'mage/utils/wrapper' | |
| ], function (wrapper) { | |
| 'use strict'; | |
| return function (proceedToCheckoutFunction) { | |
| return wrapper.wrap(proceedToCheckoutFunction, function (originalProceedToCheckoutFunction, config, element) { | |
| originalProceedToCheckoutFunction(config, element); | |
| // add extended functionality here | |
| }); | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0) | |
| * @author Phuong LE <[email protected]> <@> | |
| * @copyright Copyright (c) 2018 Menincode (http://www.menincode.com) | |
| */ | |
| /** MyNamespace/MyModule/view/frontend/requirejs-config.js */ | |
| var config = { | |
| /** This script is loaded on all pages */ | |
| deps: ['MyNamespace_MyModule/js/call-custom-js-everywhere'], | |
| /** Load a specific script before another one, here our js will be called before upsell-product.js */ | |
| shim: { | |
| 'Magento_Catalog/js/upsell-products': { | |
| deps: ['MyNamespace_MyModule/js/loaded-before-another-js'] | |
| } | |
| } | |
| /** Use mixins in purpose to override js method. Here we declare the mixin */ | |
| config: { | |
| mixins: { | |
| /** Mixin Object */ | |
| 'Magento_Checkout/js/model/shipping-service': { | |
| 'MyNamespace_MyModule/js/model/shipping-service-mixin' : true | |
| }, | |
| /** Mixin Function */ | |
| 'Magento_Checkout/js/proceed-to-checkout': { | |
| 'MyNamespace_MyModule/js/proceed-to-checkout-mixin' : true | |
| }, | |
| /** Mixin jQuery Widget */ | |
| 'Magento_Catalog/js/catalog-add-to-cart': { | |
| 'MyNamespace_MyModule/js/catalog-add-to-cart-mixin' : true | |
| }, | |
| /** Mixin Ui Component */ | |
| 'Magento_Ui/js/grid/controls/columns': { | |
| 'MyNamespace_MyModule/js/columns-mixin' : true | |
| } | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0) | |
| * @author Phuong LE <[email protected]> <@> | |
| * @copyright Copyright (c) 2021 Menincode (https://www.menincode.com) | |
| */ | |
| /** MyNamespace_MyModule/js/model/shipping-service-mixin.js */ | |
| define([ | |
| 'ko', | |
| 'mage/utils/wrapper' | |
| ], function (ko, wrapper) { | |
| 'use strict'; | |
| /** | |
| * All mixins return function. The param will be the original module | |
| */ | |
| return function (target) { | |
| // Add your custom properties | |
| target.customArray = ko.observableArray([]); | |
| target.custom = ko.observable(); | |
| /** | |
| * setShippingRates is the original function | |
| * ratesData is the parameter used in the original function | |
| */ | |
| target.setShippingRates = wrapper.wrapSuper(target.setShippingRates, function (ratesData) { | |
| // Do Something | |
| this._super(ratesData); | |
| }); | |
| return target; | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment