सबसे पहले, आप इस तरह से shippingAdditionalफ़ाइल बनाकर एक नए तत्व को परिभाषित view/frontend/layout/checkout_index_index.xmlकरते हैं
<?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>
फिर फ़ाइल बनाने के view/frontend/web/js/view/checkout/shipping/carrier_custom.jsइस रूप में
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;
},
});
});
और फिर एक फाइल बनाएं 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>
मूल रूप से XML फ़ाइल js फ़ाइल आरंभ करने के लिए चेकआउट को बताता है जो एक uiComponent है। यह नॉकआउट टेम्प्लेट आरंभ करता है और selectedMethodवर्तमान में चयनित शिपिंग (वाहक_मिथोड) के मूल्य को प्राप्त करने के लिए फ़ंक्शन का उपयोग करता है । यदि मान है जो आप चाहते हैं तो यह ब्लॉक दिखाएगा। आप इसे अपनी आवश्यकताओं के अनुसार संशोधित कर सकते हैं, अर्थात। केवल चयनित वाहक की जाँच करना। क्योंकि selectedMethodपरिभाषित किया गया है क्योंकि knockout.computed()यह हर बार उपयोगकर्ता द्वारा वाहक को बदलने के बाद पुनर्मूल्यांकन करेगा क्योंकि quote.shippingMethod()यह एक अवलोकन योग्य है।
मैंने अपडेट किया क्योंकि टेम्पलेट पथ गलत था