প্রথমত, আপনি এই জাতীয় 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>
মূলত এক্সএমএল ফাইল চেকআউটকে জেএস ফাইল শুরু করতে বলে যা একটি ইউআইকমপোনেন্ট। এটি নকআউট টেমপ্লেট আরম্ভ করে এবং selectedMethodবর্তমানে নির্বাচিত শিপিংয়ের মূল্য (ক্যারিয়ার_মোথড) পেতে ফাংশনটি ব্যবহার করে। মানটি যা চাইলে তা ব্লকটি প্রদর্শন করবে। আপনি আপনার প্রয়োজন অনুযায়ী এটি পরিবর্তন করতে পারেন, অর্থাত্। শুধুমাত্র নির্বাচিত ক্যারিয়ার পরীক্ষা করা। কারণ selectedMethodএটি নির্ধারিত কারণ knockout.computed()এটি প্রতিবার মূল্যায়িত হবে যখনই ব্যবহারকারী ক্যারিয়ার পরিবর্তন করে কারণ quote.shippingMethod()এটি একটি পর্যবেক্ষণযোগ্য।
আমি আপডেট করেছি কারণ টেমপ্লেটের পথটি ভুল ছিল