First, you define a new element in shippingAdditional
by creating file view/frontend/layout/checkout_index_index.xml
like this
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAdditional" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">shippingAdditional</item>
<item name="children" xsi:type="array">
<item name="carrier_custom" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/checkout/shipping/carrier_custom</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Then create file view/frontend/web/js/view/checkout/shipping/carrier_custom.js
as this
define([
'jquery',
'ko',
'uiComponent',
'Magento_Checkout/js/model/quote'
], function ($, ko, Component, quote) {
'use strict';
return Component.extend({
defaults: {
template: 'Vendor_Module/checkout/shipping/carrier_custom'
},
initObservable: function () {
this.selectedMethod = ko.computed(function() {
var method = quote.shippingMethod();
var selectedMethod = method != null ? method.carrier_code + '_' + method.method_code : null;
return selectedMethod;
}, this);
return this;
},
});
});
And then create a file view/frontend/web/template/checkout/shipping/carrier_custom.html
<div id="my-carrier-custom-block-wrapper" data-bind="visible: selectedMethod() == 'mycarrier_mymethod'">
<p data-bind="i18n: 'This is custom block shown only when selected specific method'"></p>
</div>
Basically XML file tells checkout to initiate js file which is an uiComponent. It initiates knockout template and uses selectedMethod
function to get the value of the currently selected shipping (carrier_method). If the value is what you want it will show the block. You can modify it according to your needs, ie. checking only selected carrier. Because selectedMethod
is defined as knockout.computed()
it will get re-evaluated every time user changes the carrier because quote.shippingMethod()
is an observable.
i updated because the template path was wrong
You can simply create your own element with modified validation process for this purpose. In your extension create a new file view/base/web/js/form/element/custom.js
with the following content:
define([
'Magento_Ui/js/form/element/abstract',
'Magento_Ui/js/lib/validation/validator'
], function (Abstract, validator) {
'use strict';
return Abstract.extend({
validate: function () {
var value = this.value(),
result = validator(this.validation, value, this.validationParams),
message = result.message,
isValid = result.passed;
this.error(message);
this.bubble('error', message);
if (!isValid) {
this.source.set('params.invalid', true);
alert('Please, specify a delivery date');
}
return {
valid: isValid,
target: this
};
}
});
});
Then, in LayoutProcessorPlugin change the 'component' value to the newly created element:
'component' => 'Modules_Deliverydate/js/form/element/custom'
In that way, you are able to extend the Abstract element and modify the "validate" method by removing field visibility checking etc. In this example the error message is being shown as an alert but you can use whatever you want.
Hope it will help.
Best Answer
1. Declare module's checkout dependency
2. Overwrite checkout layout
3. Create JavaScript UI Component
Magento 2 checkout is manage in JavaScript (with Knockout). So you need to create a custom JS compnent. It's will create the link between checkout UI component and your custom HTML template.
4. Create HTML template
Then create the HTML template wich going to display in checkout.
5. Clear cache
Finally run following commands :