Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Commit ba710a6

Browse files
committed
Added third type of JS mixin
1 parent 04eac5f commit ba710a6

File tree

1 file changed

+31
-1
lines changed

1 file changed

+31
-1
lines changed

guides/v2.2/javascript-dev-guide/javascript/js_mixins.md

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,29 @@ define(['jquery'], function ($) {
105105
});
106106
```
107107

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.
111+
112+
**File:** `OrangeCompany/Sample/view/frontend/web/js/model/step-navigator-mixin.js`
113+
114+
```javascript
115+
define([
116+
'mage/utils/wrapper'
117+
], function (wrapper) {
118+
'use strict';
119+
120+
return function (stepNavigator) {
121+
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+
108131
## Declaring a mixin
109132

110133
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
114137

115138
### Example
116139

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][].
118141

119142
**File:** `OrangeCompany/Sample/view/base/requirejs-config.js`
120143

@@ -127,12 +150,18 @@ var config = {
127150
},
128151
"Magento_Ui/js/modal/modal": {
129152
"OrangeCompany_Sample/js/modal-widget-mixin": true
153+
},
154+
'Magento_Checkout/js/model/step-navigator': {
155+
'OrangeCompany_Sample/js/model/step-navigator-mixin': true
130156
}
131157
}
132158
}
133159
};
134160
```
135161

162+
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+
136165
## Mixin examples in Magento
137166

138167
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
150179
[application area]: {{ page.baseurl }}/architecture/archi_perspectives/components/modules/mod_and_areas.html
151180
[AMD module]: https://en.wikipedia.org/wiki/Asynchronous_module_definition
152181
[grid column component]: {{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/Ui/view/base/web/js/grid/controls/columns.js
182+
[step navigator object]: {{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/Checkout/view/frontend/web/js/model/step-navigator.js
153183
[`view/frontend/requirejs-config.js`]: {{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/CheckoutAgreements/view/frontend/requirejs-config.js
154184
[`view/frontend/web/js/model/place-order-mixin.js`]: {{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/CheckoutAgreements/view/frontend/web/js/model/place-order-mixin.js
155185
[`view/frontend/web/js/model/set-payment-information-mixin.js`]: {{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/CheckoutAgreements/view/frontend/web/js/model/set-payment-information-mixin.js

0 commit comments

Comments
 (0)