come aggiungere un blocco personalizzato ai metodi di spedizione di seguito nel checkout onepage?

Voglio aggiungere un blocco personalizzato sotto i metodi di spedizione e questo blocco personalizzato dovrebbe essere all'interno del modulo del metodo di spedizione. Penso che la seguente riga di codice sia utile per aggiungere questo. Ma non ho idea di come procedere.

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

magento2

— Sivakumar K
fonte

1. Dichiarare la dipendenza del checkout del modulo

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. Sovrascrivi il layout della cassa

app / code / namespace / ModuleName / 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. Creare un componente dell'interfaccia utente JavaScript

Il checkout di Magento 2 è gestito in JavaScript (con Knockout). Quindi è necessario creare un componente JS personalizzato. Creerà il collegamento tra il componente dell'interfaccia utente del checkout e il modello HTML personalizzato.

app / code / namespace / ModuleName / view / frontend / web / js / view / checkout / trasporto / o supplementari-block.js

definire([
    'UiComponent'

], funzione (componente) {
    'usa rigoroso';

    return Component.extend ({
        impostazioni predefinite: {
            template: 'NameSpace_ModuleName / checkout / shipping / additional-block'
        }
    });
});

4. Creare un modello HTML

Quindi crea il modello HTML che verrà visualizzato in checkout.

app / code / namespace / ModuleName / view / frontend / web / template / cassa / spedizione / addizionale-block.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. Cancella cache

Infine esegui i seguenti comandi:

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

Scarica il modulo demo di esempio completo da qui

— Sohel Rana
fonte

sei davvero fantastico. non c'è fine per magento community.its evergreen

— Sivakumar K

Hai ricevuto questi errori?

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,

Suggerimento per altri rumori: il modulo deve entrare app/code/SR/AdditionalShippingBlock, no app/code/Magento/AdditionalShippingBlock.

— Thiago Figueiro,

@sohel rana, vorrei un menu a discesa dinamico anziché un campo di testo nello stesso posto, dammi un suggerimento per questo. Grazie.

— Rakesh Jesadiya,

È vero? : S wtf

— OZZIE,

Nel file presentato "checkout_index_index.xml" c'è un piccolo errore. Dev'essere

<?xml version="1.0"?>

non

<xml version="1.0"?>

Miss first char '?'

— Marcin Korzystka
fonte

Questo avrebbe potuto essere un encomio alla risposta di Sohel. In ogni caso il file è corretto nel suo repository github.com/sohelrana09/…

— Thiago Figueiro,

Sì, naturalmente. Ma devo avere 50 reputazione per commentare; (

— Marcin Korzystka,