Zunächst definieren Sie ein neues Element in, shippingAdditionalindem Sie eine Datei view/frontend/layout/checkout_index_index.xmlwie diese erstellen
<?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>
Dann erstelle die Datei view/frontend/web/js/view/checkout/shipping/carrier_custom.jsso
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;
},
});
});
Und dann eine Datei erstellen view/frontend/web/template/view/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>
Grundsätzlich weist die XML-Datei checkout an, die js-Datei zu initiieren, die eine uiComponent ist. Es initiiert die Knockout-Vorlage und verwendet die selectedMethodFunktion, um den Wert des aktuell ausgewählten Versands (carrier_method) abzurufen. Wenn der Wert Ihren Wünschen entspricht, wird der Block angezeigt. Sie können es entsprechend Ihren Bedürfnissen ändern, dh. Überprüfung nur ausgewählter Anbieter. Da dies selectedMethodso definiert ist knockout.computed(), wird es jedes Mal neu bewertet, wenn der Benutzer den Träger wechselt, da quote.shippingMethod()es sich um ein beobachtbares Ereignis handelt.
