Cómo mostrar bloque personalizado en el método de envío seleccione en Magento 2

15

Usando el enlace de referencia, ¿cómo agregar un bloque personalizado en los métodos de envío a continuación en el pago de una página? , Puedo crear un bloque de envío adicional en la parte inferior.

Pero me gustaría mostrar contenido solo cuando se selecciona el método de envío. Cuando el cliente selecciona un método de envío, el cursor debe ir a información adicional y campos personalizados y el usuario debe ingresar los datos.

Cuando seleccionamos otro método de envío, la información relacionada con eso debería venir si está presente, de lo contrario, el div debería ocultarse.

Lo mismo que http://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/ en Magento 2. Lo implementé en Magento 1.

magento2 checkout javascript uicomponent santhoshnsscoe
fuente

Respuestas:

13

Primero, define un nuevo elemento shippingAdditionalcreando un archivo 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>

Luego crea un archivo 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;
        },
    });
});

Y luego crea un archivo 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>

Básicamente, el archivo XML le dice a checkout que inicie el archivo js que es un uiComponent. Inicia la plantilla de eliminación y usa la selectedMethodfunción para obtener el valor del envío seleccionado actualmente (carrier_method). Si el valor es el que desea, mostrará el bloque. Puede modificarlo según sus necesidades, es decir. comprobando solo el transportista seleccionado. Porque selectedMethodse define porque knockout.computed()se volverá a evaluar cada vez que el usuario cambie el operador porque quote.shippingMethod()es observable.

Actualicé porque la ruta de la plantilla era incorrecta

Zefiryn
fuente
Tengo un área de texto en el bloque personalizado. Cómo guardar los datos ingresados ​​en el área de texto en la cotización y el pedido.
santhoshnsscoe