Ich muss in jedem Versand- und Zahlungsschritt der Checkout-Seite in Magento 2 zwei benutzerdefinierte Felder hinzufügen. Außerdem sollten die Daten in den erforderlichen Tabellen gespeichert werden
wie es in Magento 2 geht
Heute werde ich erklären, wie man allen Schritten der Checkout-Seite benutzerdefinierte Felder hinzufügt und diese nach der Bestellung speichert und wie man gebuchte Daten nach der Bestellung verwendet
1. Felder delivery_date
: - wo der Kunde am Liefertermin im Versandschritt angeben wird
2. Felder Bestellung Kommentare: - befindet sich im Zahlungsschritt und nach der Bestellung werden diese Kommentare zum Bestellkommentarverlauf hinzugefügt
Schritt 1 : - Stellen Sie sicher, dass Delivery_date in allen erforderlichen Tabellen wie quote sales_order
und sales_order_grid
über das Installations- oder Upgrade-Skript hinzugefügt wird
<?php
namespace Sugarcode\Deliverydate\Setup;
use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
/**
* @codeCoverageIgnore
*/
class InstallSchema implements InstallSchemaInterface
{
/**
* {@inheritdoc}
* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
*/
public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
{
$installer = $setup;
$installer->startSetup();
$installer->getConnection()->addColumn(
$installer->getTable('quote'),
'delivery_date',
[
'type' => 'datetime',
'nullable' => false,
'comment' => 'Delivery Date',
]
);
$installer->getConnection()->addColumn(
$installer->getTable('sales_order'),
'delivery_date',
[
'type' => 'datetime',
'nullable' => false,
'comment' => 'Delivery Date',
]
);
$installer->getConnection()->addColumn(
$installer->getTable('sales_order_grid'),
'delivery_date',
[
'type' => 'datetime',
'nullable' => false,
'comment' => 'Delivery Date',
]
);
$setup->endSetup();
}
}
Schritt 2 : - Durch Hinzufügen von benutzerdefinierten Feldern in Versand- und Zahlungsschritten können wir auf zwei Arten eines von layout xml
und eines erreichen. Das Plugin unten zeigt, wie die Felder über das Plugin hinzugefügt werden
Wir erstellen eine di.xml
Datei in unserem Modul -Sugarcode/Deliverydate/etc/frontend/di.xml
Wir verwenden den Frontend-Bereich, um ihn sauber zu halten. Unser Plugin sollte nur auf dem Frontend ausgeführt werden.
<?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\Block\Checkout\LayoutProcessor">
<plugin name="add-delivery-date-field"
type="Sugarcode\Deliverydate\Model\Checkout\LayoutProcessorPlugin" sortOrder="10"/>
</type>
</config>
Sugarcode \ Plugin \ Checkout \ LayoutProcessor.php
<?php
namespace Sugarcode\Plugin\Checkout;
class LayoutProcessor
{
/**
* @var \Magento\Framework\App\Config\ScopeConfigInterface
*/
protected $scopeConfig;
/**
* @var \Magento\Checkout\Model\Session
*/
protected $checkoutSession;
/**
* @var \Magento\Customer\Model\AddressFactory
*/
protected $customerAddressFactory;
/**
* @var \Magento\Framework\Data\Form\FormKey
*/
protected $formKey;
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
\Magento\CheckoutAgreements\Model\ResourceModel\Agreement\CollectionFactory $agreementCollectionFactory,
\Magento\Checkout\Model\Session $checkoutSession,
\Magento\Customer\Model\AddressFactory $customerAddressFactory
) {
$this->scopeConfig = $context->getScopeConfig();
$this->checkoutSession = $checkoutSession;
$this->customerAddressFactory = $customerAddressFactory;
}
/**
* @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
* @param array $jsLayout
* @return array
*/
public function afterProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array $jsLayout
) {
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['before-form']['children']['delivery_date'] = [
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/date',
'options' => [],
'id' => 'delivery-date'
],
'dataScope' => 'shippingAddress.delivery_date',
'label' => 'Delivery Date',
'provider' => 'checkoutProvider',
'visible' => true,
'validation' => [],
'sortOrder' => 200,
'id' => 'delivery-date'
];
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children']['before-place-order']['children']['comment'] = [
'component' => 'Magento_Ui/js/form/element/textarea',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'options' => [],
'id' => 'comment'
],
'dataScope' => 'ordercomment.comment',
'label' => 'Order Comment',
'notice' => __('Comments'),
'provider' => 'checkoutProvider',
'visible' => true,
'sortOrder' => 250,
'id' => 'comment'
];
return $jsLayout;
}
}
Jetzt befinden sich alle Felder auf der Checkout-Seite. So speichern Sie die Daten
Im Gegensatz zu M1 in M2 ist die gesamte Checkout-Seite vollständig Knockout-JS und API
Wir haben zwei Schritte: Der erste ist der Versand und der zweite Schritt ist die Zahlung, bei der beide Felder gespeichert werden müssen
Im Folgenden erfahren Sie, wie Sie die Daten nach dem Speichern der Versandadressen speichern
Versandschritt
Zum Speichern von Versandinformationen in M2 verwendet
app/code/Magento/Checkout/view/frontend/web/js/model/shipping-save-processor/default.js
Um sich vorzubereiten json
und den Anruf api
so zu machen, müssen wir dieses js überschreiben und in php
Side Save wird passieren
\ Magento \ Checkout \ Model \ ShippingInformationManagement :: SaveAddressInformation () und ShippingInformationManagement, implementiert von Magento \ Checkout \ Api \ Data \ ShippingInformationInterface
M2 hat ein leistungsfähiges Konzept namens, extension_attributes
das für dynamische Daten verwendet wird, um Kerntabellen zu nutzen
Schritt 3 : - Erstellen Sie eine DateiDeliverydate/etc/extension_attributes.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
<extension_attributes for="Magento\Quote\Api\Data\AddressInterface">
<attribute code="delivery_date" type="string"/>
</extension_attributes>
<extension_attributes for="Magento\Quote\Api\Data\PaymentInterface">
<attribute code="comment" type="string"/>
</extension_attributes>
</config>
Um js zu überschreiben, erstellen Sie eine js-Datei. Deliverydate/view/frontend/requirejs-config.js
Wir müssen mixns verwenden
var config = {
config: {
mixins: {
'Magento_Checkout/js/action/place-order': {
'Sugarcode_Deliverydate/js/order/place-order-mixin': true
},
'Magento_Checkout/js/action/set-payment-information': {
'Sugarcode_Deliverydate/js/order/set-payment-information-mixin': true
},
'Magento_Checkout/js/action/set-shipping-information': {
'Sugarcode_Deliverydate/js/order/set-shipping-information-mixin': true
}
}
};
js / order / set-Versandinformationen-mixin.js Lieferdatum
/**
* @author aakimov
*/
/*jshint browser:true jquery:true*/
/*global alert*/
define([
'jquery',
'mage/utils/wrapper',
'Magento_Checkout/js/model/quote'
], function ($, wrapper, quote) {
'use strict';
return function (setShippingInformationAction) {
return wrapper.wrap(setShippingInformationAction, function (originalAction) {
var shippingAddress = quote.shippingAddress();
if (shippingAddress['extension_attributes'] === undefined) {
shippingAddress['extension_attributes'] = {};
}
// you can extract value of extension attribute from any place (in this example I use customAttributes approach)
shippingAddress['extension_attributes']['delivery_date'] = jQuery('[name="delivery_date"]').val();
// pass execution to original action ('Magento_Checkout/js/action/set-shipping-information')
return originalAction();
});
};
});
Im nächsten Schritt werden diese benutzerdefinierten Feldpostdaten im Angebot gespeichert. Lassen Sie uns ein weiteres Plugin erstellen, indem wir einen XML-Knoten in unseren hinzufügenetc/di.xml
<type name="Magento\Checkout\Model\ShippingInformationManagement">
<plugin name="save-in-quote" type="Sugarcode\Deliverydate\Plugin\Checkout\ShippingInformationManagementPlugin" sortOrder="10"/>
</type>
Erstellen Sie eine Datei Sugarcode \ Deliverydate \ Plugin \ Checkout \ ShippingInformationManagementPlugin.php
<?php
namespace Sugarcode\Deliverydate\Plugin\Checkout;
class ShippingInformationManagementPlugin
{
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
*/
public function beforeSaveAddressInformation(
\Magento\Checkout\Model\ShippingInformationManagement $subject,
$cartId,
\Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
) {
$extAttributes = $addressInformation->getShippingAddress()->getExtensionAttributes();
$deliveryDate = $extAttributes->getDeliveryDate();
$quote = $this->quoteRepository->getActive($cartId);
$quote->setDeliveryDate($deliveryDate);
}
}
Bald nach dem Wechsel zu den Zahlungsschritten werden die Daten in der Angebotstabelle gespeichert
Um die gleichen Daten nach der Bestellung zu speichern, müssen wir das Feldset verwenden
etc / fieldset.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Object/etc/fieldset.xsd">
<scope id="global">
<fieldset id="sales_convert_quote">
<field name="delivery_date">
<aspect name="to_order"/>
</field>
</fieldset>
</scope>
</config>
Jetzt können Sie das Feld Zahlungsschritte speichern
Wenn wir im Zahlungsschritt zusätzliche Felder haben und diese Daten veröffentlichen müssen, müssen wir die anderen js überschreiben, wie wir es für den Versandschritt getan haben
Als Versandinformationen haben wir Zahlungsinformationen
ww kann durch Überschreiben erreicht werden Magento_Checkout/js/action/place-order.js
(aber es wird ein Problem geben, wenn die Vereinbarung aktiviert ist, so dass wir Mixins verwenden müssen, wie in re erwähnt)
Sugarcode_Deliverydate/js/order/place-order-mixin.js
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'mage/utils/wrapper',
'Sugarcode_Deliverydate/js/order/ordercomment-assigner'
], function ($, wrapper, ordercommentAssigner) {
'use strict';
return function (placeOrderAction) {
/** Override default place order action and add comments to request */
return wrapper.wrap(placeOrderAction, function (originalAction, paymentData, messageContainer) {
ordercommentAssigner(paymentData);
return originalAction(paymentData, messageContainer);
});
};
});
Sugarcode_Deliverydate / js / order / ordercomment-assigner.js
/*jshint browser:true jquery:true*/
/*global alert*/
define([
'jquery'
], function ($) {
'use strict';
/** Override default place order action and add comment to request */
return function (paymentData) {
if (paymentData['extension_attributes'] === undefined) {
paymentData['extension_attributes'] = {};
}
paymentData['extension_attributes']['comment'] = jQuery('[name="ordercomment[comment]"]').val();
};
});
Sugarcode_Deliverydate / js / order / set-payment-information-mixin.js
/*jshint browser:true jquery:true*/
/*global alert*/
define([
'jquery',
'mage/utils/wrapper',
'Sugarcode_Deliverydate/js/order/ordercomment-assigner'
], function ($, wrapper, ordercommentAssigner) {
'use strict';
return function (placeOrderAction) {
/** Override place-order-mixin for set-payment-information action as they differs only by method signature */
return wrapper.wrap(placeOrderAction, function (originalAction, messageContainer, paymentData) {
ordercommentAssigner(paymentData);
return originalAction(messageContainer, paymentData);
});
};
});
und müssen ein Plugin für erstellen Magento\Checkout\Model\PaymentInformationManagement
so in etc/di
Add Code unten
<type name="Magento\Checkout\Model\PaymentInformationManagement">
<plugin name="order_comments_save-in-order" type="Sugarcode\Deliverydate\Plugin\Checkout\PaymentInformationManagementPlugin" sortOrder="10"/>
</type>
und erstellen Sie dann eine Datei Sugarcode\Deliverydate\Plugin\Checkout\PaymentInformationManagementPlugin.php
/**
* One page checkout processing model
*/
class PaymentInformationManagementPlugin
{
protected $orderRepository;
public function __construct(
\Magento\Sales\Api\OrderRepositoryInterface $orderRepository
) {
$this->orderRepository = $orderRepository;
}
public function aroundSavePaymentInformationAndPlaceOrder(
\Magento\Checkout\Model\PaymentInformationManagement $subject,
\Closure $proceed,
$cartId,
\Magento\Quote\Api\Data\PaymentInterface $paymentMethod,
\Magento\Quote\Api\Data\AddressInterface $billingAddress = null
) {
$result = $proceed($cartId, $paymentMethod, $billingAddress);
if($result){
$orderComment =$paymentMethod->getExtensionAttributes();
if ($orderComment->getComment())
$comment = trim($orderComment->getComment());
else
$comment = '';
$history = $order->addStatusHistoryComment($comment);
$history->save();
$order->setCustomerNote($comment);
}
return $result;
}
}
Hinweis: - Wenn das Feld im Zahlungsschritt in der Angebotstabelle gespeichert werden muss, verwenden Sie das vorherige Plugin für dieselbe Funktion und folgen Sie den Anweisungen in ShippingInformationManagementPlugin
Führen Sie die folgenden Schritte aus, bevor Sie Anpassungen vornehmen.
Schritt 1: Erstellen Sie die JS-Implementierung der Formular-UI-Komponente
<your_module_dir>/view/frontend/web/js/view/
Erstellen Sie in Ihrem Verzeichnis eine .js-Datei, die das Formular implementiert.Schritt 2: Erstellen Sie die HTML-Vorlage
Fügen Sie die
knockout.js
HTML-Vorlage für die Formularkomponente im<your_module_dir>/view/frontend/web/
Vorlagenverzeichnis hinzu.Beispiel:
Dateien nach Änderung löschen
Wenn Sie Ihre benutzerdefinierte HTML-Vorlage ändern, nachdem sie auf den Store-Seiten angewendet wurde, werden die Änderungen erst angewendet, wenn Sie folgende Schritte ausführen:
Löschen Sie alle Dateien in den Verzeichnissen
pub/static/frontend
undvar/view_preprocessed
. Laden Sie die Seiten neu.Schritt 3: Deklarieren Sie das Formular im Layout der Checkout-Seite
Um dem Schritt Versandinformationen Inhalte hinzuzufügen, erstellen Sie eine
checkout_index_index.xml
Layoutaktualisierung in der<your_module_dir>/view/frontend/layout/
.Es sollte ähnlich wie folgt sein.
Statische Formen:
Das folgende Codebeispiel zeigt die Konfiguration des Formulars, das vier Felder enthält: Texteingabe, Auswahl, Kontrollkästchen und Datum. Dieses Formular verwendet den Checkout-Datenprovider (checkoutProvider), der im Magento_Checkout-Modul eingeführt wird:
Hoffe das hilft.
quelle