Magento 2-Kaufabwicklung - Fügen Sie ein benutzerdefiniertes Feld zwischen Versandadresse und Versandart hinzu

Ich versuche, ein benutzerdefiniertes Feld zwischen den Abschnitten Versandadresse und Versandart hinzuzufügen . Und ich will Werte dieses Feldes in beiden gespeichert werden quoteund sales_orderTabellen schließlich. Dies ähnelt dem Hinzufügen eines Felds "Bestellkommentar", dieses Feld sollte jedoch direkt nach dem Abschnitt "Lieferadresse" und vor dem Abschnitt "Versandart" angezeigt werden.

Ich habe die Magento-Entwicklerhandbücher zum Hinzufügen eines benutzerdefinierten Felds und eines benutzerdefinierten Formulars zur Kaufabwicklung durchgearbeitet und bis zu einem gewissen Grad eine Lösung implementiert.

Was ich bisher gemacht habe:

1. Das checkout_index_index.xmlLayout wurde aktualisiert. uiComponentUnter dem Punkt "Versandadresse" wurde ein neuer Container hinzugefügt .
2. Das Element (Feld), das ich benötige, wurde im Container hinzugefügt.
3. Überschreiben Sie das /js/view/shipping.jsund shipping.phtmlin meinem benutzerdefinierten Modul.
4. Ruft den oben erstellten Container shipping.phtmlzwischen der Versandadresse und der Versandart auf (ähnlich wie beim Hinzufügen eines neuen statischen Formulars).

Jetzt wird das gewünschte Feld auf der Onpage-Kasse genau dort gerendert, wo ich es möchte. Aber ich habe unten Probleme getroffen.

1. Wie kann ich auf den Wert des benutzerdefinierten Felds zugreifen, das ich oben hinzugefügt habe? Ich versuche, den Wert in einem shippingAddress-Erweiterungsattribut zu speichern. Ich habe ein Mixin hinzugefügt, setShippingInformationActiondas versucht, das Folgende zu tun

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

Der obige Code schlägt jedoch tatsächlich fehl, da sich das Element nicht in der shipping-address-fieldset. Ich könnte in der Lage sein, den Wert durch das windowElement zu erhalten. Aber gibt es eine Möglichkeit, über Magento darauf zuzugreifen?

2. Gibt es eine Möglichkeit, den Wert dieses Elements im lokalen Cache-Speicher ( Magento_Checkout/js/checkout-data) zu speichern, damit der Wert auch nach einer Seitenaktualisierung erhalten bleibt?

Aufgrund Ihrer Frage gehe ich davon aus, dass Sie Ihre Erweiterungsattribute bereits eingerichtet haben. Ich habe eine ähnliche Änderung vorgenommen und hoffe, dass meine Antwort hilft.

Erstellen Sie in Ihrem benutzerdefinierten Modul eine requirejs-config-Datei, um den Standardversandprozessor / -standard zu erweitern

Namespace / CustomModule / view / frontend / requirejs-config.js
var config = {
    "Karte": {
        "*": {
            'Magento_Checkout / js / model / shipping-save-processor / default': 'Namespace_CustomModule / js / model / shipping-save-processor / default'
        }
    }
};

Fügen Sie der Nutzlast Ihr Erweiterungsattribut hinzu.

/ * global definieren, alarmieren * /
definieren(
    [
        "jquery",
        "ko",
        "Magento_Checkout / js / model / quote",
        'Magento_Checkout / js / model / resource-url-manager',
        "Magier / Lagerung",
        'Magento_Checkout / js / model / payment-service',
        'Magento_Checkout / js / model / payment / method-converter',
        'Magento_Checkout / js / model / error-processor',
        'Magento_Checkout / js / model / full-screen-loader',
        'Magento_Checkout / js / action / Rechnungsadresse auswählen'
    ],
    Funktion (
        $,
        ko,
        Zitat,
        resourceUrlManager,
        Lager,
        paymentService,
        methodConverter,
        errorProcessor,
        fullScreenLoader,
        selectBillingAddressAction
    ) {
        'use strict';

        Rückkehr {
            saveShippingInformation: function () {
                var Nutzlast;

                if (! quote.billingAddress ()) {
                    selectBillingAddressAction (quote.shippingAddress ());
                }
                // Hinzufügen der Erweiterungsattribute zu Ihrer Lieferadresse
                Nutzlast = {
                    Adresse: {
                        Versandadresse: quote.shippingAddress (),
                        Rechnungsadresse: quote.billingAddress (),
                        Versandmethodencode: quote.shippingMethod (). method_code,
                        shipping_carrier_code: quote.shippingMethod (). carrier_code,
                        extension_attributes: {
                            custom_field: $ ('# custom_field'). val (), 
                        }
                    }
                };

                fullScreenLoader.startLoader ();

                Rückgabe storage.post (
                    resourceUrlManager.getUrlForSetShippingInformation (quote),
                    JSON.stringify (Nutzlast)
                ).getan(
                    Funktion (Antwort) {
                        quote.setTotals (response.totals);
                        paymentService.setPaymentMethods (methodConverter (response.payment_methods));
                        fullScreenLoader.stopLoader ();
                    }
                ).Scheitern(
                    Funktion (Antwort) {
                        errorProcessor.process (Antwort);
                        fullScreenLoader.stopLoader ();
                    }
                );
            }
        };
    }
);

Speichern Sie das Attribut in Ihrem Angebot mit einem Plugin (Ich bin nicht sicher, ob Sie hier einen Beobachter verwenden könnten, den ich nicht überprüft habe).

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

Klasse SaveAddressInformation
{
    protected $ quoteRepository;
    public function __construct (
        \ Magento \ Quote \ Model \ QuoteRepository $ quoteRepository
    ) {
        $ this-> quoteRepository = $ quoteRepository;
    }
    / **
     * @param \ Magento \ Checkout \ Model \ ShippingInformationManagement $ subject
     * @param $ cartId
     * @param \ Magento \ Checkout \ Api \ Data \ ShippingInformationInterface $ addressInformation
     * /
    öffentliche Funktion beforeSaveAddressInformation (
        \ Magento \ Checkout \ Model \ ShippingInformationManagement $ subject,
        $ cartId,
        \ Magento \ Checkout \ Api \ Data \ ShippingInformationInterface $ addressInformation
    ) {
        $ extensionAttributes = $ addressInformation-> getExtensionAttributes ();
        $ customField = $ extensionAttributes-> getCustomField ();
        $ quote = $ this-> quoteRepository-> getActive ($ cartId);
        $ quote-> setCustomField ($ customField);

    }
}

Speichern Sie das Attribut in Ihrer Bestellung mit einer 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

Die Klasse SaveCustomFieldToOrder implementiert ObserverInterface
{
    / **
     * @var \ Magento \ Framework \ ObjectManagerInterface
     * /
    protected $ _objectManager;

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

    public function execute (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 ());

        return $ this;
    }
}

Erstellen Sie ein Plugin für diese \Magento\Checkout\Block\Checkout\LayoutProcessor::processMethode.

Machen Sie auf diesem Pfad einen Eintrag in di.xml

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

Erstelle eine Plugin-Klasse in diesem Verzeichnis.

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

2 => Plugin-Klasse in diesem Verzeichnis erstellen. 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;
}

}

Sobald dies erledigt ist, überprüfen Sie die Checkout-Seite.