¿Cómo agregar bloque personalizado en los métodos de envío a continuación en el pago de una página?

11

Quiero agregar un bloque personalizado debajo de los métodos de envío y este bloque personalizado debe estar dentro del formulario del método de envío. Creo que la siguiente línea de código es útil para agregar esto, pero no tengo idea de cómo proceder.

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

Respuestas:

43

1. Declarar la dependencia de pago del módulo

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. Sobrescribir diseño de pago

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. Crear componente de la interfaz de usuario de JavaScript

La comprobación de Magento 2 se gestiona en JavaScript (con Knockout). Por lo tanto, debe crear un componente JS personalizado. Se creará el enlace entre el componente de la interfaz de usuario de pago y su plantilla HTML personalizada.

app / code / NameSpace / ModuleName / view / frontend / web / js / view / checkout / shipping / optional-block.js

definir([
    'uiComponent'

], función (Componente) {
    'uso estricto';

    return Component.extend ({
        valores predeterminados: {
            plantilla: 'NameSpace_ModuleName / checkout / shipping / adicional-block'
        }
    });
});

4. Crear plantilla HTML

Luego, cree la plantilla HTML que se mostrará en el proceso de pago.

app / code / NameSpace / ModuleName / view / frontend / web / template / checkout / shipping / optional-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. Borrar caché

Finalmente ejecuta los siguientes comandos: 

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

Descargue el módulo de demostración de ejemplo completo desde aquí

Sohel Rana
fuente
1
realmente eres increíble. no hay fin para la comunidad de magento. es siempre verde
Sivakumar K
¿Recibiste estos errores? 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
Consejo para otros novatos: el módulo debe entrar app/code/SR/AdditionalShippingBlock, no app/code/Magento/AdditionalShippingBlock.
Thiago Figueiro
@sohel rana, me gustaría desplegar dinámicamente en lugar de campo de texto en el mismo lugar, dame una sugerencia para eso. Gracias.
Rakesh Jesadiya
¿Esto es en serio? : S wtf
OZZIE
7

En el archivo presentado "checkout_index_index.xml" hay un pequeño error. Debe ser

<?xml version="1.0"?>

no 

<xml version="1.0"?>

Señorita primer char '?

Marcin Korzystka
fuente
Esto podría haber sido un elogio a la respuesta de Sohel. En cualquier caso, el archivo es correcto en su repositorio github.com/sohelrana09/…
Thiago Figueiro
Sí, por supuesto. Pero debo tener 50 reputación para comentar; (
Marcin Korzystka