This topic contains information for developers who work closely with the Adobe Commerce and Magento Open Source code and want to learn detailed information about the Quick Checkout extension.
Use extension points to customize the Quick Checkout.
By using extension points, you can make customizations without actually altering the core components in the application code.
An extension point can be used to customize the automated step navigation after logging in with Bolt.
Once a shopper logs in with Bolt, all valid information is prefilled and redirected to the payment details step to place the order. See the checkout flow topic for more information.
This extension point allows to prevent navigation to a payment step and can be useful in case there are extensions that require a shopper to perform additional actions on the shipping step. See an example below on how you can use the extension point with a mixin:
Register a new mixin in the require-config.js
file located in app/code/Vendor/ModuleName/view/frontend/
.
var config = {
config: {
mixins: {
"Magento_ExpressCheckout/js/model/can-navigate-to-payment": {
"Vendor/ModuleName/js/model/can-navigate-to-payment-mixin": true
}
}
}
};
Extend the model in the can-navigate-to-payment.js
file located in app/code/Vendor/ModuleName/view/frontend/web/js/model/
.
define([
'Magento_Checkout/js/model/quote',
'mage/utils/wrapper',
], function (quote, wrapper) {
'use strict';
return function (canNavigateToPayment) {
return wrapper.wrap(canNavigateToPayment, function (originalAction) {
/* Include custom checks or conditions to stay on the shipping step,i.e: your shopper is from Germany */
return originalAction() && quote.shippingAddress().countryId !== 'DE');
});
};
});
This is an example for a shopper in Germany (DE) that wants to stay on the Shipping details step.
Check Bolt developer help for more information on Bolt for developers.