İlk olarak, yeni bir eleman tanımlamak shippingAdditional
dosyası oluşturarak view/frontend/layout/checkout_index_index.xml
böyle
<?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>
Sonra view/frontend/web/js/view/checkout/shipping/carrier_custom.js
bu şekilde dosya oluşturun
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;
},
});
});
Ve sonra bir dosya oluşturun 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>
Temelde XML dosyası, bir uiComponent olan js dosyasını başlatması için ödeme yapmasını söyler. Nakavt şablonunu başlatır ve selectedMethod
seçili gönderim bedeli değerini (carrier_method) almak için işlevi kullanır . Değer istediğiniz şeyse bloğu gösterir. İhtiyaçlarınıza göre değiştirebilirsiniz. yalnızca seçilen operatörün kontrol edilmesi. Çünkü kullanıcı taşıyıcıyı her değiştirdiğinde yeniden değerlendirileceği için selectedMethod
tanımlanır knockout.computed()
çünkü quote.shippingMethod()
gözlemlenebilir.
Şablon yolu yanlış olduğu için güncelledim