Como mostrar o bloco personalizado no método de envio, selecione no Magento 2

15

Usando o link de referência, como adicionar um bloco personalizado aos métodos de envio abaixo no checkout de uma página? , Sou capaz de criar um bloco de remessa adicional na parte inferior.

Gostaria de mostrar apenas o conteúdo quando o método de envio está selecionado. Quando um método de entrega é selecionado pelo cliente, o cursor deve ir para informações adicionais e campos personalizados e o usuário deve inserir os dados.

Quando selecionamos outro método de envio, as informações relacionadas a ele devem vir, se presentes, caso contrário, a div deve ficar oculta.

Igual a http://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/ no Magento 2. Eu o havia implementado no Magento 1.

magento2 checkout javascript uicomponent santhoshnsscoe
fonte

Respostas:

13

Primeiro, você define um novo elemento shippingAdditionalcriando um arquivo view/frontend/layout/checkout_index_index.xmlcomo este

<?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>

Em seguida, crie um arquivo view/frontend/web/js/view/checkout/shipping/carrier_custom.jscomo este

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;
        },
    });
});

E então crie um arquivo view/frontend/web/template/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>

Basicamente, o arquivo XML informa ao checkout para iniciar o arquivo js, ​​que é um uiComponent. Ele inicia o modelo de knockout e usa a selectedMethodfunção para obter o valor do frete atualmente selecionado (carrier_method). Se o valor for o que você deseja, ele mostrará o bloco. Você pode modificá-lo de acordo com suas necessidades, ou seja. verificando apenas a operadora selecionada. Porque selectedMethodé definido, knockout.computed()pois será reavaliado toda vez que o usuário alterar a operadora, pois quote.shippingMethod()é um observável.

Eu atualizei porque o caminho do modelo estava errado

Zefiryn
fonte
Eu tenho uma área de texto no bloco personalizado. Como salvar os dados inseridos na área de texto na cotação e no pedido.
santhoshnsscoe