So passen Sie den Checkout-Prozess in Magento 2 an
Veröffentlicht: 2018-04-23Inhaltsverzeichnis
In Magento 2 wurde der Checkout-Prozess für eine schnellere und einfachere Erfahrung neu gestaltet. Die Checkout-Seite führt den Kunden durch zwei einfache Schritte des Prozesses. Kunden, die bei ihren Konten angemeldet sind, können den Checkout schnell abschließen, da sich viele der Informationen bereits in ihren Konten befinden. Der erste Schritt des Bestellvorgangs besteht darin, dass der Kunde die Informationen zur Versandadresse ausfüllt und die Versandmethode auswählt. Im zweiten Schritt wählt der Kunde die Zahlungsmethode aus und wendet eventuelle Coupons an, um den Kauf abzuschließen.
Passen Sie den Standard-Checkout von Magento 2 an
Sie können entweder einen neuen Checkout-Schritt hinzufügen oder die Ansicht eines vorhandenen Checkouts ändern, um den Standard-Checkout auf Ihre eigene Weise anzupassen.
Fügen Sie einen neuen Checkout-Schritt hinzu
Sie können einen benutzerdefinierten Checkout-Schritt hinzufügen, der als UI-Komponente implementiert werden sollte. Bearbeiten Sie aus Gründen der Kompatibilität, Erweiterbarkeit und einfachen Wartung nicht den standardmäßigen Magento-Code, sondern fügen Sie Ihre Anpassungen in einem separaten Modul hinzu.
Schritt 1: Erstellen Sie den Ansichtsteil der Checkout-Schrittkomponente
So erstellen Sie den Ansichtsteil des neuen Checkout-Schritts:
- Fügen Sie ein Modulverzeichnis hinzu. Alle benutzerdefinierten Dateien müssen dort gespeichert werden. Damit Ihre Checkout-Anpassung korrekt angewendet wird, sollte Ihr benutzerdefiniertes Modul vom
Magento_Checkout-Modul abhängen. Verwenden SieUinicht für den Namen Ihres benutzerdefinierten Moduls, da die Notation%Vendor%_Ui, die beim Angeben von Pfaden erforderlich ist, Probleme verursachen kann. - Erstellen Sie die
.js-Datei, die das Ansichtsmodell implementiert. - Erstellen Sie eine
.html-Vorlage für die Komponente.
Jeder Schritt wird im Folgenden detailliert beschrieben:
1. Fügen Sie die JavaScript-Datei hinzu, die den neuen Schritt implementiert
Als UI-Komponente muss ein neuer Checkout-Schritt implementiert werden. Das heißt, seine JavaScript-Implementierung muss ein JavaScript-Modul sein.
Die Datei muss im <your_module_dir>/view/frontend/web/js/view werden.
Die Notation <your_module_dir> steht für den Pfad zu Ihrem Modulverzeichnis vom Stammverzeichnis. Normalerweise ist dies einer der folgenden: app/code/<YourVendor>/<YourModule> oder vendor/<yourvendor>/module-<module>-<name> .
Es folgt ein Beispiel my-step-view.js mit Kommentaren:
definieren(
['ko', 'uiComponent', 'underscore', 'Magento_Checkout / js / model / step - navigator'],
Funktion(
ko,
Komponente,
_,
stepNavigator
) {'
benutze strikt';
/**
*
* mystep – ist der Name der HTML-Vorlage der Komponente,
* <Hersteller>_<Modul> – ist der Name Ihres Modulverzeichnisses.
*
*/
return Component.extend({
Voreinstellungen: {
Vorlage: ' < Anbieter > _ < Modul > /mystep'
},
// Fügen Sie hier Ihre Logik zum Anzeigeschritt hinzu,
isVisible: ko.observable(true),
/**
*
* @kehrt zurück {*}
*/
initialisieren: Funktion() {
this._super();
// registriere deinen Schritt
stepNavigator.registerStep(
//Schrittcode wird als Schrittinhalts-ID in der Komponentenvorlage verwendet
'step_code',
//Schritt-Alias
Null,
//Schritttitelwert
'Schritttitel',
// beobachtbare Eigenschaft mit Logik, wenn Schritt angezeigt oder Schritt ausgeblendet wird
this.isVisible,
_.bind(this.navigate, this),
/**
* Wert der Sortierreihenfolge
* 'Bestellwert sortieren' < 10: Schritt wird vor dem Versandschritt angezeigt;
* 10 < 'Bestellwert sortieren' < 20 : Schrittanzeige zwischen Versand- und Zahlungsschritt
* 'Bestellwert sortieren' > 20: Schritt wird nach dem Zahlungsschritt angezeigt
*/
fünfzehn
);
gib das zurück;
},
/**
* Die Methode „navigate()“ ist für die Navigation zwischen den Checkout-Schritten verantwortlich
* während der Kasse. Sie können benutzerdefinierte Logik hinzufügen, beispielsweise einige Bedingungen
* zum Wechseln zu Ihrem benutzerdefinierten Schritt
*/
navigieren: funktion() {
},
/**
* @returns void
*/
NavigierenZumNächstenSchritt: function() {
stepNavigator.next();
}
});
}
);2. Fügen Sie die .html-Vorlage hinzu
Fügen Sie im Modulverzeichnis die .html -Vorlage für die Komponente hinzu. Es muss sich im <your_module_dir>/view/frontend/web/template .
Es folgt ein Beispiel mystep.html :
<!–Der 'step_code'-Wert aus der .js-Datei sollte verwendet werden–>
<li data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Step Title'" data-role="title"></div>
<div class="step-content" data-role="content">
<form data-bind="submit: navigationToNextStep" novalidate="novalidate">
<div class="actions-toolbar">
<div class="primär">
<button data-role="opc-continue" type="submit" class="button action Continue primary">
<span><!– ko i18n: 'Weiter'–><!– /ko –></span>
</button>
</div>
</div>
</form>
</div>
</li>Schritt 2: Fügen Sie Ihren Schritt zum Checkout-Seitenlayout hinzu
Damit der neue Schritt auf der Seite angezeigt wird, müssen Sie ihn im Checkout-Seitenlayout deklarieren, das in checkout_index_index.xml definiert ist.
Sie müssen also eine erweiterte Layoutdatei checkout_index_index.xml an folgendem Speicherort hinzufügen: <your_module_dir>/view/frontend/layout/checkout_index_index.xml
Es folgt ein Beispiel checkout_index_index.xml :
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<Körper>
<referenceBlock name="checkout.root">
<Argumente>
<argument name="jsLayout" xsi:type="array">
<item name="komponenten" xsi:type="array">
<item name="checkout" xsi:type="array">
<Elementname="Kinder" xsi:type="array">
<item name="steps" xsi:type="array">
<Elementname="Kinder" xsi:type="array">
<!– Der neu hinzugefügte Schritt –>
<item name="my-new-step" xsi:type="array">
<item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
<!–Um den Inhalt des Schritts vor dem Versand anzuzeigen, sollte der Wert des Schritts „sortOrder“ < 1–> sein
<!–Zum Anzeigen des Schrittinhalts zwischen Versandschritt und Zahlungsschritt 1 < "sortOrder" < 2 –>
<!–Zum Anzeigen des Schrittinhalts nach dem Zahlungsschritt „sortOrder“ >2 –>
<item name="sortOrder" xsi:type="string">2</item>
<Elementname="Kinder" xsi:type="array">
<!–Hier untergeordnete Komponentendeklaration für Ihren Schritt hinzufügen–>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</Argument>
</argumente>
</ReferenzBlock>
</body>
</Seite> 
Benutzerdefiniertes Magento 2 Checkout-Feld
$119,00
Magento 2 One Step Checkout
$99 $119,00
Passen Sie die Ansicht einer vorhandenen Kasse an
In Magento-Anwendungen wird der Checkout mithilfe von UI-Komponenten implementiert. Sie können jeden Schritt anpassen, indem Sie die JavaScript-Implementierung oder Vorlage für eine Komponente ändern, eine Komponente hinzufügen, entfernen oder deaktivieren.
Schritt 1: Ändern Sie die .js-Implementierung und -Vorlage der Komponente
Um die .js Implementierung und Vorlage zu ändern, die zum Rendern von Komponenten verwendet werden, müssen Sie die neuen Dateien im Checkout-Seitenlayout deklarieren. Führen Sie dazu die folgenden Schritte aus:
- Erstellen Sie in Ihrem benutzerdefinierten Modulverzeichnis die folgende neue Datei:
<your_module_dir>/view/frontend/layout/checkout_index_index.xml. (Damit Ihre Checkout-Anpassung korrekt angewendet wird, sollte Ihr benutzerdefiniertes Modul vom Magento_Checkout-Modul abhängen.) - Fügen Sie in dieser Datei Folgendes hinzu:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<Körper>
<referenceBlock name="checkout.root">
<Argumente>
<argument name="jsLayout" xsi:type="array">
<!– Ihre Anpassung wird hier sein –>
…
</Argument>
</argumente>
</ReferenzBlock>
</body>
</Seite>- Suchen Sie in der Datei
<Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xmldie Komponente, die Sie anpassen müssen. Kopieren Sie den entsprechenden Knoten und alle übergeordneten Knoten bis<argument>. Es ist nicht erforderlich, alle Attribute und Werte der übergeordneten Knoten zu belassen, da Sie sie nicht ändern werden. - Ändern Sie den Pfad zur
.js-Datei, Vorlage oder einer anderen Eigenschaft der Komponente.
Beispiel:
Das Magento_Shipping-Modul fügt dem Versandschritt eine Komponente hinzu, die als Link zu den Versandrichtlinieninformationen gerendert wird:
<Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml
sieht wie folgt aus:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<Körper>
<referenceBlock name="checkout.root">
<Argumente>
<argument name="jsLayout" xsi:type="array">
<item name="komponenten" xsi:type="array">
<item name="checkout" xsi:type="array">
<Elementname="Kinder" xsi:type="array">
<item name="steps" xsi:type="array">
<Elementname="Kinder" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<Elementname="Kinder" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<Elementname="Kinder" xsi:type="array">
<item name="before-shipping-method-form" xsi:type="array">
<Elementname="Kinder" xsi:type="array">
<item name="shipping_policy" xsi:type="array">
<item name="component" xsi:type="string">Magento_Shipping/js/view/checkout/shipping/shipping-policy</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</Argument>
</argumente>
</ReferenzBlock>
</body>
</Seite> Schritt 2: Fügen Sie die neue Komponente zum Checkout-Seitenlayout hinzu
Jede UI-Komponente wird in checkout_index_index.xml ähnlich wie eine Checkout-Schritt-Komponente hinzugefügt.
Stellen Sie sicher, dass Sie eine Komponente so deklarieren, dass sie von der übergeordneten Komponente korrekt gerendert wird. Wenn eine übergeordnete Komponente eine allgemeine UI-Komponente ist (auf die durch den uiComponent Alias verwiesen wird), werden ihre untergeordneten Komponenten ohne Bedingungen gerendert. Wenn eine übergeordnete Komponente jedoch eine Erweiterung einer allgemeinen UI-Komponente ist, kann das Rendering von untergeordneten Elementen auf bestimmte Weise eingeschränkt sein. Beispielsweise kann eine Komponente nur untergeordnete Elemente einer bestimmten displayArea .
Schritt 3 : Deaktivieren Sie eine Komponente
Verwenden Sie die folgenden Anweisungen, um die Komponente in Ihrer checkout_index_index.xml zu deaktivieren:
<item name="%the_component_to_be_disabled%" xsi:type="array">
<item name="config" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>
</item>Schritt 4: Entfernen Sie eine Komponente
Um eine Komponente aus dem Layout-Rendering zu entfernen, müssen Sie ein Plugin für die Methode \Magento\Checkout\Block\Checkout\LayoutProcessor::process . Implementieren Sie in Ihrem Plugin die around-Methode und entfernen Sie die entsprechenden Layout-Knoten zur Laufzeit.
Das folgende Beispiel ist ein Beispiel für die Around-Methode zum Entfernen einer Komponente:
unset($jsLayout['components']['checkout']['children']['steps'][%path_to_target_node%]); //%path_to_target_node% ist der Pfad zum Knoten der Komponente in checkout_index_index.xml gib $jsLayout zurück;
(Wenn Sie dieses Beispiel in Ihrem Code verwenden möchten, ersetzen Sie den Platzhalter %path_to_target_node% durch einen echten Wert.)
*Komponente deaktivieren oder entfernen: Wenn Sie eine Komponente deaktivieren, wird sie geladen, aber nicht gerendert. Wenn Sie eine Komponente entfernen, wird sie nicht geladen.
Zusammenhängende Posts:
So fügen Sie einen Rabattcode zur Kasse in Magento hinzu
So fügen Sie eine benutzerdefinierte Zahlung zu Magento 2 Checkout hinzu