como adicionar blocos personalizados aos métodos de envio abaixo no checkout de uma página?

11

Desejo adicionar um bloco personalizado abaixo dos métodos de envio e esse bloco personalizado deve estar dentro do formulário do método de envio. Acho que a seguinte linha de código é útil para adicionar this.but nenhuma idéia de como proceder.

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

Respostas:

43

1. Declarar dependência de checkout do 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. Sobrescrever o layout da caixa

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. Criar componente de interface do usuário JavaScript

O checkout do Magento 2 é gerenciado em JavaScript (com Knockout). Portanto, você precisa criar um componente JS customizado. É criará o link entre o componente da interface do usuário do checkout e seu modelo HTML personalizado.

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

definir([
    'uiComponent'

], função (Componente) {
    'use strict';

    return Component.extend ({
        padrões: {
            modelo: 'NameSpace_ModuleName / checkout / shipping / additional-block'
        }
    });
});

4. Crie um modelo HTML

Em seguida, crie o modelo HTML que será exibido na finalização da compra.

app / code / NameSpace / ModuleName / view / frontend / web / template / checkout / shipping / additional-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. Limpar cache

Por fim, execute os seguintes comandos: 

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

Faça o download do módulo de demonstração de exemplo completo aqui

Sohel Rana
fonte
1
realmente você está awesome.there há fim para magento community.its evergreen
Sivakumar K
Você recebeu esses erros? 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
Dica para outros noobs: o módulo precisa entrar app/code/SR/AdditionalShippingBlock, não app/code/Magento/AdditionalShippingBlock.
Thiago Figueiro
@sohel rana, eu gostaria de um menu suspenso dinâmico em vez de um campo de texto no mesmo local, me dê uma sugestão para isso. Obrigado.
Rakesh Jesadiya
Isso é pra valer? : S wtf
OZZIE
7

No arquivo apresentado "checkout_index_index.xml", há um pequeno erro. Deve ser

<?xml version="1.0"?>

não 

<xml version="1.0"?>

Senhorita primeiro char '?'

Marcin Korzystka
fonte
Isso poderia ter sido um elogio à resposta de Sohel. De qualquer forma, o arquivo está correto em seu repositório github.com/sohelrana09/…
Thiago Figueiro
Sim, claro. Mas devo ter 50 reputação para comentar; (
Marcin Korzystka