Pagamento Magento 2: aggiungi un campo personalizzato tra l'indirizzo di spedizione e il metodo di spedizione


21

Sto cercando di aggiungere un campo personalizzato tra l' indirizzo di spedizione e le sezioni del metodo di spedizione . E voglio che i valori di questo campo vengano archiviati in entrambi quotee nelle sales_ordertabelle alla fine. Questo è qualcosa di simile all'aggiunta di un campo "commento ordine" ma questo campo dovrebbe apparire subito dopo la sezione dell'indirizzo di spedizione e prima della sezione del metodo di spedizione.

Ho seguito le guide agli sviluppatori Magento su come aggiungere un campo personalizzato e un modulo personalizzato alla cassa e ho implementato una soluzione in una certa misura.

Quello che ho fatto finora:

  1. Aggiornato il checkout_index_index.xmllayout, aggiunto un nuovo uiComponent(un contenitore) sotto la voce "shippingAddress".
  2. Aggiunto l'elemento (campo) richiesto all'interno del contenitore.
  3. Sostituisci /js/view/shipping.jse shipping.phtmlnel mio modulo personalizzato.
  4. Invocato il contenitore sopra fatto shipping.phtmltra l'indirizzo di spedizione e il metodo di spedizione (qualcosa di simile all'aggiunta di un nuovo modulo statico)

Ora il campo che voglio viene visualizzato sul checkout di una pagina esattamente dove voglio. Ma ho riscontrato problemi di seguito.

  1. Come accedere al valore del campo personalizzato che ho aggiunto sopra? Sto cercando di salvare il valore in un attributo di estensione shippingAddress. Ho aggiunto un mixin setShippingInformationActionall'interno che prova a fare quanto segue

    shippingAddress['extension_attributes']['custom_field'] = shippingAddress.customAttributes['custom_field'];

Ma il codice precedente in realtà non riesce poiché l'elemento non si trova in shipping-address-fieldset. Potrei essere in grado di ottenere il valore attraverso l' windowelemento. Ma c'è un modo per accedervi tramite Magento?

  1. C'è un modo per salvare il valore di questo elemento nella memoria cache locale ( Magento_Checkout/js/checkout-data) in modo che il valore persista anche dopo un aggiornamento della pagina?


Si prega di fare riferimento al link qui sotto spero che ti possa aiutare magento.stackexchange.com/questions/187847/…
Pradeep Kumar,

Risposte:


1

In base alla tua domanda, suppongo che tu abbia già impostato gli attributi di estensione. Ho effettuato una modifica simile e spero che la mia risposta sia d'aiuto.

Nel tuo modulo personalizzato crea un file requestjs-config per estendere il processore di spedizione predefinito / predefinito

Spazio dei nomi / CustomModule / view / frontend / requirejs-config.js
var config = {
    "carta geografica": {
        "*": {
            'Magento_Checkout / js / model / shipping-save-processor / default': 'Namespace_CustomModule / js / model / shipping-save-processor / default'
        }
    }
};

Aggiungi il tuo attributo di estensione al payload.

/ * definizione globale, avviso * /
definire(
    [
        'Jquery',
        'Ko',
        'Magento_Checkout / js / modello / quote',
        'Magento_Checkout / js / modello / risorsa-url-manager',
        'Mago ​​/ storage',
        'Magento_Checkout / js / modello / pagamento-service',
        'Magento_Checkout / js / modello / pagamento / metodo-converter',
        'Magento_Checkout / js / modello / error-processor',
        'Magento_Checkout / js / modello / full-screen-loader',
        'Magento_Checkout / js / action / select-fatturazione-indirizzo'
    ],
    funzione (
        $,
        ko,
        citazione,
        resourceUrlManager,
        Conservazione,
        paymentService,
        methodConverter,
        errorProcessor,
        fullScreenLoader,
        selectBillingAddressAction
    ) {
        'usa rigoroso';

        ritorno {
            saveShippingInformation: function () {
                var payload;

                if (! quote.billingAddress ()) {
                    selectBillingAddressAction (quote.shippingAddress ());
                }
                // Aggiunta degli attributi di estensione al tuo indirizzo di spedizione
                payload = {
                    addressInformation: {
                        shipping_address: quote.shippingAddress (),
                        billing_address: quote.billingAddress (),
                        shipping_method_code: quote.shippingMethod (). method_code,
                        shipping_carrier_code: quote.shippingMethod (). carrier_code,
                        extension_attributes: {
                            custom_field: $ ('# custom_field'). val (), 
                        }
                    }
                };

                fullScreenLoader.startLoader ();

                return storage.post (
                    resourceUrlManager.getUrlForSetShippingInformation (citazione),
                    JSON.stringify (payload)
                ).fatto(
                    funzione (risposta) {
                        quote.setTotals (response.totals);
                        paymentService.setPaymentMethods (methodConverter (response.payment_methods));
                        fullScreenLoader.stopLoader ();
                    }
                ).fallire(
                    funzione (risposta) {
                        errorProcessor.process (risposta);
                        fullScreenLoader.stopLoader ();
                    }
                );
            }
        };
    }
);

Salva l'attributo nel preventivo con un plug-in (non sono sicuro di poter utilizzare un osservatore qui non ho verificato).

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\ShippingInformationManagement">
        <plugin name="Namespace_CustomModule_save_delivery_date_in_quote" type="Namespace\CustomModule\Plugin\Checkout\SaveAddressInformation" />
    </type>

</config>

SaveAddressInformation.php

classe SaveAddressInformation
{
    $ quoteRepository protetto;
    funzione pubblica __construct (
        \ Magento \ Quote \ Model \ QuoteRepository $ quoteRepository
    ) {
        $ this-> quoteRepository = $ quoteRepository;
    }
    / **
     * @param \ Magento \ Checkout \ Model \ ShippingInformationManagement $ subject
     * @param $ cartId
     * @param \ Magento \ Checkout \ Api \ Data \ ShippingInformationInterface $ addressInformation
     * /
    funzione pubblica beforeSaveAddressInformation (
        \ Magento \ Checkout \ Model \ ShippingInformationManagement $ subject,
        $ CARTID,
        \ Magento \ Checkout \ Api \ Data \ ShippingInformationInterface $ addressInformation
    ) {
        $ extensionAttributes = $ addressInformation-> getExtensionAttributes ();
        $ customField = $ extensionAttributes-> getCustomField ();
        $ quote = $ this-> quoteRepository-> getActive ($ cartId);
        $ Citazione-> setCustomField ($ customfield);

    }
}

Salva l'attributo nel tuo ordine con un Observer events.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="sales_model_service_quote_submit_before">
        <observer name="unique_observer_name" instance="Namespace\CustomModule\Observer\SaveCustomFieldToOrder"/>
    </event>
</config>

SaveCustomFieldToOrder.php

la classe SaveCustomFieldToOrder implementa ObserverInterface
{
    / **
     * @var \ Magento \ Framework \ ObjectManagerInterface
     * /
    $ _objectManager protetto;

    / **
     * @param \ Magento \ Framework \ ObjectManagerInterface $ objectmanager
     * /
    funzione pubblica __construct (\ Magento \ Framework \ ObjectManagerInterface $ objectmanager)
    {
        $ this -> _ objectManager = $ objectmanager;
    }

    esecuzione della funzione pubblica (EventObserver $ observer)
    {
        $ order = $ observer-> getOrder ();
        $ quoteRepository = $ this -> _ objectManager-> create ('Magento \ Quote \ Model \ QuoteRepository');
        / ** @var \ Magento \ Quote \ Model \ Quote $ quote * /
        $ quote = $ quoteRepository-> get ($ order-> getQuoteId ());
        $ order-> setCustomField ($ quote-> getCustomField ());

        ritorna $ questo;
    }
}


Sostituire i metodi di base non è troppo fortunato. E se un altro modulo ha la precedenza sul tuo? magento.stackexchange.com/questions/135969/…
vaso123

buon punto, non ero a conoscenza del metodo alternativo. Grazie per segnalarlo.
NathanielR,

@ vaso123 Sembra che anche io non sia a conoscenza di qualcosa perché qui Nathaniel ha creato un plugin e un osservatore di eventi in modo che la funzione principale venga ignorata qui. Potresti spiegarlo un po 'di più, sarebbe davvero utile ... Grazie
Sarvagya,

@Sarvagya Quando si utilizza richiedono js, ​​non utilizzare map *, utilizzare invece mixin.
vaso123

@ vaso123 Credo che si riferisca a Magento_Checkout / js / model / shipping-save-processor / default ':' Namespace_CustomModule / js / model / shipping-save-processor / default 'che secondo Ii sostituisce Magento_Checkout / js / model / shipping -save-processore / default. } è passato del tempo da quando l'ho scritto, quindi Sarvagya, per favore, correggimi se sbaglio.
NathanielR,

0

Crea un plug-in per questo \Magento\Checkout\Block\Checkout\LayoutProcessor::processmetodo.

Immettere una voce in di.xml su questo percorso

app/code/CompanyName/Module/etc/frontend/di.xml

Crea classe di plugin in questa directory.

app/code/CompanyName\Module\Model\Plugin\Checkout

2 => Crea classe di plugin in questa directory. app/code/CompanyName\Module\Model\Plugin\Checkout

    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'config' => [
            'customScope' => 'shippingAddress.custom_attributes',
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/input',
            'options' => [],
            'id' => 'custom-field'
        ],
        'dataScope' => 'shippingAddress.custom_attributes.custom_field',
        'label' => 'Custom Field',
        'provider' => 'checkoutProvider',
        'visible' => true,
        'validation' => [],
        'sortOrder' => 250,
        'id' => 'custom-field'
    ];


    return $jsLayout;
}

}

Fatto ciò, controlla la pagina di pagamento.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.