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.
@@ -29,99 +29,89 @@ To create the view part of the new checkout step:
29
29
30
30
1. Add a module directory (not covered in this topic). See [Build your module]({{ page.baseurl }}/extension-dev-guide/build/build.html) for details). All custom files must be stored there. For your checkout customization to be applied correctly, your custom module should depend on the `Magento_Checkout` module. Do not use `Ui` for your custom module name, because `%Vendor%_Ui` notation, required when specifying paths, might cause issues.
31
31
1.[Create the `.js` file implementing the view model](#component).
32
-
1.[Create an`.html` template for the component](#html-template).
32
+
1.[Create a`.html` template for the component](#html-template).
33
33
34
34
### Add the JavaScript file implementing the new step {#component}
35
35
36
36
A new checkout step must be implemented as UI component. That is, its [JavaScript](https://glossary.magento.com/javascript) implementation must be a JavaScript module.
37
37
38
38
The file must be stored under the `<your_module_dir>/view/frontend/web/js/view` directory.
39
39
40
-
{:.bs-callout-info}
40
+
{:.bs-callout-info}
41
41
`<your_module_dir>` notation stands for the path to your module directory from the root directory. Usually it will be one of the following: `app/code/<YourVendor>/<YourModule>` or `vendor/<yourvendor>/module-<module>-<name>`. For more details see [Conventional notations for paths to modules and themes]({{ page.baseurl }}/frontend-dev-guide/conventions.html)
42
42
43
43
A sample `my-step-view.js` with comments follows:
44
44
45
45
```js
46
-
define(
47
-
[
48
-
'ko',
49
-
'uiComponent',
50
-
'underscore',
51
-
'Magento_Checkout/js/model/step-navigator'
52
-
],
53
-
function (
54
-
ko,
55
-
Component,
56
-
_,
57
-
stepNavigator
58
-
) {
59
-
'use strict';
46
+
define([
47
+
'ko',
48
+
'uiComponent',
49
+
'underscore',
50
+
'Magento_Checkout/js/model/step-navigator'
51
+
], function (ko, Component, _, stepNavigator) {
52
+
'use strict';
53
+
54
+
/**
55
+
* mystep - is the name of the component's .html template,
56
+
* <Vendor>_<Module> - is the name of your module directory.
57
+
*/
58
+
returnComponent.extend({
59
+
defaults: {
60
+
template:'<Vendor>_<Module>/mystep'
61
+
},
62
+
63
+
// add here your logic to display step,
64
+
isVisible:ko.observable(true),
65
+
66
+
/**
67
+
* @returns{*}
68
+
*/
69
+
initialize:function () {
70
+
this._super();
71
+
72
+
// register your step
73
+
stepNavigator.registerStep(
74
+
// step code will be used as step content id in the component template
75
+
'step_code',
76
+
// step alias
77
+
null,
78
+
// step title value
79
+
'Step Title',
80
+
// observable property with logic when display step or hide step
81
+
this.isVisible,
82
+
83
+
_.bind(this.navigate, this),
84
+
85
+
/**
86
+
* sort order value
87
+
* 'sort order value' < 10: step displays before shipping step;
88
+
* 10 < 'sort order value' < 20 : step displays between shipping and payment step
89
+
* 'sort order value' > 20 : step displays after payment step
90
+
*/
91
+
15
92
+
);
93
+
94
+
returnthis;
95
+
},
96
+
97
+
/**
98
+
* The navigate() method is responsible for navigation between checkout steps
99
+
* during checkout. You can add custom logic, for example some conditions
100
+
* for switching to your custom step
101
+
* When the user navigates to the custom step via url anchor or back button we_must show step manually here
102
+
*/
103
+
navigate:function () {
104
+
this.isVisible(true);
105
+
},
106
+
60
107
/**
61
-
*
62
-
* mystep - is the name of the component's .html template,
63
-
* <Vendor>_<Module> - is the name of the your module directory.
64
-
*
65
-
*/
66
-
returnComponent.extend({
67
-
defaults: {
68
-
template:'<Vendor>_<Module>/mystep'
69
-
},
70
-
71
-
//add here your logic to display step,
72
-
isVisible:ko.observable(true),
73
-
74
-
/**
75
-
*
76
-
* @returns{*}
77
-
*/
78
-
initialize:function () {
79
-
this._super();
80
-
// register your step
81
-
stepNavigator.registerStep(
82
-
//step code will be used as step content id in the component template
83
-
'step_code',
84
-
//step alias
85
-
null,
86
-
//step title value
87
-
'Step Title',
88
-
//observable property with logic when display step or hide step
89
-
this.isVisible,
90
-
91
-
_.bind(this.navigate, this),
92
-
93
-
/**
94
-
* sort order value
95
-
* 'sort order value' < 10: step displays before shipping step;
96
-
* 10 < 'sort order value' < 20 : step displays between shipping and payment step
97
-
* 'sort order value' > 20 : step displays after payment step
98
-
*/
99
-
15
100
-
);
101
-
102
-
returnthis;
103
-
},
104
-
105
-
/**
106
-
* The navigate() method is responsible for navigation between checkout step
107
-
* during checkout. You can add custom logic, for example some conditions
108
-
* for switching to your custom step
109
-
* When the user navigates to the custom step via url anchor or back button we_must show step manually here
110
-
*/
111
-
navigate:function () {
112
-
113
-
this.isVisible(true);
114
-
},
115
-
116
-
/**
117
-
* @returns void
118
-
*/
119
-
navigateToNextStep:function () {
120
-
stepNavigator.next();
121
-
}
122
-
});
123
-
}
124
-
);
108
+
* @returns void
109
+
*/
110
+
navigateToNextStep:function () {
111
+
stepNavigator.next();
112
+
}
113
+
});
114
+
});
125
115
```
126
116
127
117
### Add the .html template {#html-template}
@@ -133,7 +123,7 @@ A sample `mystep.html` follows:
133
123
```html
134
124
<!--The 'step_code' value from the .js file should be used-->
<!--add here child component declaration for your step-->
183
172
</item>
184
173
</item>
185
174
</item>
186
175
</item>
187
176
</item>
188
177
</item>
189
-
</argument>
190
-
</arguments>
178
+
</item>
179
+
</argument>
180
+
</arguments>
191
181
</referenceBlock>
192
182
</body>
193
183
</page>
194
184
```
195
185
196
186
## Step 3: Create mixins for payment and shipping steps (optional) {#create-mixin}
197
187
198
-
If your new step is the first step, you have to create mixins for the payment and shipping steps. Otherwise two steps will be activated on loading of the checkout.
188
+
If your new step is the first step, you have to create mixins for the payment and shipping steps. Otherwise, two steps will be activated on the loading of the checkout.
199
189
200
190
Create a mixin as follows:
201
191
@@ -219,28 +209,27 @@ Create a mixin as follows:
219
209
1. Create the mixin. We'll use the same mixin for both payment and shipping:
220
210
221
211
```js
222
-
define(
223
-
[
224
-
'ko'
225
-
], function (ko) {
226
-
'use strict';
227
-
228
-
var mixin = {
229
-
230
-
initialize:function () {
231
-
this.isVisible=ko.observable(false); // set visible to be initially false to have your step show first
232
-
this._super();
233
-
234
-
returnthis;
235
-
}
236
-
};
237
-
238
-
returnfunction (target) {
239
-
returntarget.extend(mixin);
240
-
};
241
-
}
242
-
);
212
+
define([
213
+
'ko'
214
+
], function (ko) {
215
+
'use strict';
216
+
217
+
var mixin = {
218
+
219
+
initialize:function () {
220
+
// set visible to be initially false to have your step show first
221
+
this.isVisible=ko.observable(false);
222
+
this._super();
223
+
224
+
returnthis;
225
+
}
226
+
};
227
+
228
+
returnfunction (target) {
229
+
returntarget.extend(mixin);
230
+
};
231
+
});
243
232
```
244
233
245
-
{:.bs-callout-info}
234
+
{:.bs-callout-info}
246
235
For your changes to be applied, you might need to [clean layout cache]({{ page.baseurl }}/config-guide/cli/config-cli-subcommands-cache.html ) and [static view file cache]({{ page.baseurl }}/frontend-dev-guide/cache_for_frontdevs.html#clean_static_cache). For more info on mixins, see [JS Mixins]({{ page.baseurl }}/javascript-dev-guide/javascript/js_mixins.html).
Copy file name to clipboardExpand all lines: src/guides/v2.3/javascript-dev-guide/javascript/js-resources.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -37,7 +37,7 @@ JS resources are accessed using relative paths.
37
37
**Example 1:**
38
38
39
39
* File actual location: `app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js`
40
-
* File published to `pub/static`: `pub/static/frontend/Magento/<theme>/<locale>/Magento_ConfigurableProduct/js/configurable.js`. Here `<theme>` and `<locale>` are the currently applied in your instance [theme](https://glossary.magento.com/theme) and [locale](https://glossary.magento.com/locale).
40
+
* File published to `pub/static`: `pub/static/frontend/<Vendor>/<theme>/<locale>/Magento_ConfigurableProduct/js/configurable.js`. Here `<theme>` and `<locale>` are the currently applied in your instance [theme](https://glossary.magento.com/theme) and [locale](https://glossary.magento.com/locale).
41
41
* Called in script:
42
42
43
43
```javascript
@@ -59,7 +59,7 @@ JS resources are accessed using relative paths.
59
59
**Example 3:**
60
60
61
61
*File actual location:`lib/web/jquery.js`
62
-
*File published to `pub/static`:`pub/static/<area>/Magento/<theme>/<locale>/jquery.js`
62
+
*File published to `pub/static`:`pub/static/<area>/<Vendor>/<theme>/<locale>/jquery.js`
0 commit comments