Come mostrare il blocco personalizzato sul metodo di spedizione selezionare in Magento 2

Utilizzando il link di riferimento come aggiungere un blocco personalizzato ai metodi di spedizione di seguito nel pagamento onepage? , Sono in grado di creare un blocco di spedizione aggiuntivo in basso.

Tuttavia, vorrei mostrare il contenuto solo quando è selezionato il metodo di spedizione. Quando il cliente seleziona un metodo di spedizione, il cursore dovrebbe accedere a informazioni aggiuntive e campi personalizzati e l'utente deve inserire i dati.

Quando selezioniamo un altro metodo di spedizione, le informazioni relative a ciò dovrebbero venire se presente il div dovrebbe essere nascosto.

Come http://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/ in Magento 2. L'avevo implementato in Magento 1.

— santhoshnsscoe
fonte

Innanzitutto, definisci un nuovo elemento shippingAdditionalcreando un file view/frontend/layout/checkout_index_index.xmlcome questo

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

Quindi crea il file view/frontend/web/js/view/checkout/shipping/carrier_custom.jscome questo

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 quindi creare un file 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>

Fondamentalmente il file XML dice al checkout di avviare il file js che è un uiComponent. Avvia il modello knockout e utilizza la selectedMethodfunzione per ottenere il valore della spedizione attualmente selezionata (carrier_method). Se il valore è quello che vuoi, mostrerà il blocco. Puoi modificarlo in base alle tue esigenze, ad es. controllando solo il corriere selezionato. Perché selectedMethodè definito come knockout.computed()verrà rivalutato ogni volta che l'utente cambia il corriere perché quote.shippingMethod()è osservabile.

ho aggiornato perché il percorso del modello era errato

— Zefiryn
fonte

Ho un'area di testo nel blocco personalizzato. Come salvare i dati inseriti nell'area di testo nel preventivo e nell'ordine.

— santhoshnsscoe,