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


21

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?

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


Bitte beziehen Sie sich auf den folgenden Link, ich hoffe, es wird Ihnen helfen, magento.stackexchange.com/questions/187847/…
Pradeep Kumar

Antworten:


1

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


Das Überschreiben von Kernmethoden ist nicht zu glücklich. Was ist, wenn ein anderes Modul Ihr Modul überschreibt? magento.stackexchange.com/questions/135969/…
vaso123

Guter Punkt, war sich der alternativen Methode nicht bewusst. Danke für den Hinweis.
NathanielR

@ vaso123 Anscheinend ist mir auch etwas nicht bewusst, denn hier hat Nathaniel ein Plugin und einen Event-Observer erstellt, damit die Kernfunktion hier außer Kraft gesetzt wird. Könnten Sie es bitte etwas näher erläutern, es wäre wirklich hilfreich ... Danke
Sarvagya

@Sarvagya Wenn Sie require js verwenden, verwenden Sie nicht mixin map *.
Vaso123

@ vaso123 Ich glaube, er bezieht sich auf Magento_Checkout / js / model / shipping-save-processor / default -Save-Prozessor / Standard. } Es ist schon eine Weile her, seit ich das geschrieben habe, also korrigiere mich bitte, wenn ich falsch liege.
NathanielR

0

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.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.