You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Nov 19, 2024. It is now read-only.
Copy file name to clipboardExpand all lines: guides/v2.2/javascript-dev-guide/javascript/js_mixins.md
+31-1Lines changed: 31 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -105,6 +105,29 @@ define(['jquery'], function ($) {
105
105
});
106
106
```
107
107
108
+
#### Extend JS Object
109
+
110
+
Another use-case of JS mixin is when the base Javascript file returns an object. In this case, a wrapper is necessary. The following is an example of a mixin that extends the `setHash` function of [step navigator object][]. Here, `_super()` is the base method that can be called if needed.
stepNavigator.setHash=wrapper.wrap(stepNavigator.setHash, function (_super) {
122
+
window.location.hash= hash;
123
+
// add extended functionality here or modify method logic altogether
124
+
});
125
+
126
+
return stepNavigator;
127
+
};
128
+
});
129
+
```
130
+
108
131
## Declaring a mixin
109
132
110
133
Mixins are declared in the `mixins` property in the `requirejs-config.js` configuration file.
@@ -114,7 +137,7 @@ The mixins configuration in the `requirejs-config.js` associates a target compon
114
137
115
138
### Example
116
139
117
-
The following is an example of a `requirejs-config.js` file that adds the `columns-mixin` and `modal-widget-mixin`mixins, defined in the previous examples, to the [grid column component][] and [modal widget][].
140
+
The following is an example of a `requirejs-config.js` file that adds the `columns-mixin`, `modal-widget-mixin`, and `step-navigator-mixin`mixins, defined in the previous examples, to the [grid column component][], [modal widget][], and [step navigator object][].
The following is an example of a `requirejs-config.js` file that adds the `step-navigator-mixin` mixin defined in the previous example, to the [step navigator object][].
163
+
164
+
136
165
## Mixin examples in Magento
137
166
138
167
The following is a list of files in the [`Magento_CheckoutAgreement`] module that declare and define mixins that modify checkout behavior:
@@ -150,6 +179,7 @@ The following is a list of files in the [`Magento_CheckoutAgreement`] module tha
0 commit comments