Wie füge ich einen benutzerdefinierten Block bei den unten angegebenen Versandmethoden an der einseitigen Kasse hinzu?

11

Ich möchte einen benutzerdefinierten Block unterhalb der Versandmethoden hinzufügen, und dieser benutzerdefinierte Block sollte sich innerhalb des Versandmethodenformulars befinden. Ich denke, die folgende Codezeile ist hilfreich, um dies hinzuzufügen. Aber keine Ahnung, wie es weitergehen soll.

<div id="onepage-checkout-shipping-method-additional-load">
                    <!-- ko foreach: getRegion('shippingAdditional') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                </div>
magento2 Sivakumar K.
quelle

Antworten:

43

1. Deklarieren Sie die Checkout-Abhängigkeit des Moduls

app / code / NameSpace / ModuleName / etc / module.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="NameSpace_ModuleName" setup_version="0.0.1" active="true">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

2. Überschreiben Sie das Checkout-Layout

app / code / NameSpace / Modulname / view / frontend / layout / checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="additional_block" xsi:type="array">
                                                                    <item name="component" xsi:type="string">NameSpace_ModuleName/js/view/checkout/shipping/additional-block</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

3. Erstellen Sie eine JavaScript-UI-Komponente

Das Auschecken von Magento 2 erfolgt in JavaScript (mit Knockout). Sie müssen also eine benutzerdefinierte JS-Komponente erstellen. Dadurch wird die Verknüpfung zwischen der UI-Komponente zur Kasse und Ihrer benutzerdefinierten HTML-Vorlage hergestellt.

app / code / NameSpace / Modulname / Ansicht / Frontend / Web / js / Ansicht / Kasse / Versand / Zusatzblock.js

definieren([
    'uiComponent'

], Funktion (Komponente) {
    'use strict';

    return Component.extend ({
        Standardeinstellungen: {
            Vorlage: 'NameSpace_ModuleName / Kasse / Versand / Zusatzblock'
        }}
    });
});

4. Erstellen Sie eine HTML-Vorlage

Erstellen Sie dann die HTML-Vorlage, die an der Kasse angezeigt wird.

App / Code / NameSpace / Modulname / Ansicht / Frontend / Web / Vorlage / Kasse / Versand / Zusatzblock.html

<div class="checkout-block" id="block-custom">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>

5. Cache leeren

Führen Sie abschließend folgende Befehle aus: 

php bin/magento cache:clean
php bin/magento setup:upgrade
chmod -R 777 var/*

Zum vollständigen Beispiel Demo - Modul von hier

Sohel Rana
quelle
1
Wirklich, du bist großartig. Es gibt kein Ende für die Magento-Community. Es ist immergrün
Sivakumar K
Hast du diese Fehler bekommen? Broken reference: No element found with ID 'checkout.header.wrapper'. [] [] Class SR\AdditionalShippingBlock\Model\CustomBlockConfigProvider does not exist [] [] [2016-04-13 10:15:06] main.CRITICAL: Invalid block type: Magento\Checkout\Block\Onepage [] []
Thiago Figueiro
Tipp für andere Noobs: Das Modul muss hineingehen app/code/SR/AdditionalShippingBlock, nicht app/code/Magento/AdditionalShippingBlock.
Thiago Figueiro
@sohel rana, ich möchte dynamisches Dropdown anstelle von Textfeld an derselben Stelle, gib mir einen Vorschlag dafür. Vielen Dank.
Rakesh Jesadiya
Ist das echt? : S wtf
OZZIE
7

In der präsentierten Datei "checkout_index_index.xml" gibt es einen kleinen Fehler. Es muss sein

<?xml version="1.0"?>

nicht 

<xml version="1.0"?>

Miss first char '?'

Marcin Korzystka
quelle
Dies könnte ein Lob für Sohels Antwort gewesen sein. In jedem Fall ist die Datei in seinem Repo github.com/sohelrana09/…
Thiago Figueiro
Ja natürlich. Aber ich muss 50 Ruf haben, um zu kommentieren; (
Marcin Korzystka