{"id":433,"date":"2019-05-27T06:00:05","date_gmt":"2019-05-27T06:00:05","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/05\/27\/use-javascript-mixins-in-magento-2\/"},"modified":"2025-05-22T16:49:09","modified_gmt":"2025-05-22T11:19:09","slug":"use-javascript-mixins-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/use-javascript-mixins-in-magento-2\/","title":{"rendered":"How to Use Javascript Mixins in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">An alternative to traditional class inheritance, a mixin is a class whose methods are added to, or mixed in, with another class.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of inheriting, the base class includes the methods from a mixin and thus allows to add to or augment the behavior of the base class by adding various mixins to it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To use Javascript mixins in Magento 2 means to use it to overwrite component methods in Magento 2! I&#8217;ll show the use of Javascript mixins in Magento 2 with the example of the change in payment method selection among multiple options in the frontend.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to use Javascript Mixins in Magento 2:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create file&nbsp;<em><strong>requirejs-config.js<\/strong><\/em>&nbsp;&nbsp;at&nbsp;<em><strong>Vendor\/Extension\/view\/frontend<\/strong><\/em><\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Vendor\/Extension\/view\/frontend\nvar config = {\n    config: {\n        mixins: {\n            'Magento_Checkout\/js\/action\/select-payment-method': {\n                'Vendor_Extension\/js\/action\/select-payment-method': true\n            }\n        } \/\/ this is how js mixin is defined\n    }\n};<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create file<strong>&nbsp;<em>select-payment-method.js<\/em>&nbsp;<\/strong>at<strong>&nbsp;<em>Vendor\/Extension\/view\/frontend\/web\/js\/action<\/em><\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">define(\n    [\n        'ko',\n        'Magento_Checkout\/js\/model\/quote',\n        'Magento_Checkout\/js\/model\/full-screen-loader',\n        'jquery',\n        'mage\/storage',\n        'mage\/url',\n        'Magento_Checkout\/js\/action\/get-totals',\n    ],\n    function (ko, quote, fullScreenLoader, jQuery, storage, urlBuilder, getTotalsAction) {\n        'use strict';\n        return function (paymentMethod) {\n            quote.paymentMethod(paymentMethod);\n            \/\/you can write your code according to your need\n        }\n    }\n);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The above method is helpful when you have to do some task before a JS script&#8217;s function run or to extend a function or to modify some data without overwriting JS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hope it helps!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>An alternative to traditional class inheritance, a mixin is a class whose methods are added to, or mixed in, with another class. Instead of inheriting,&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-433","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=433"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/433\/revisions"}],"predecessor-version":[{"id":15408,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/433\/revisions\/15408"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}