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: src/guides/v2.3/graphql/queries/get-hosted-pro-url.md
+8Lines changed: 8 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -50,3 +50,11 @@ The query returns the PayPal URL that enables the customer to sign in to PayPal
50
50
Attribute | Data type | Description
51
51
--- | --- | ---
52
52
`secure_form_url` | String | Secure URL generated by PayPal
53
+
54
+
## Errors
55
+
56
+
Error | Description
57
+
--- | ---
58
+
`Could not find a cart with ID \"xxxxx\"` | The ID provided in the `cart_id` field is invalid or the cart does not exist for the customer.
59
+
`The cart isn't active` | The cart with the specified cart ID is unavailable, because the items have been purchased and the cart ID becomes inactive.
60
+
`Field HostedProUrlInput.cart_id of required type String! was not provided` | The value specified in the `HostedProUrlInput.cart_id` argument is empty.
@@ -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).
0 commit comments