Magento 2 Knockout js auf der Checkout-Seite

8

Ich möchte die Checkout-Seite anpassen, bin aber verwirrt über das Aufrufen der Vorlage mit Knockout-JS. Darin Magento/Checkout/view/frontend/templates/onepage.phtmlgibt es ein Skript wie das folgende:

<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
    "#checkout": {
        "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
    }
}
</script>

Was bedeutet dieses Skript?

magento2 javascript template knockoutjs user48215
quelle
Willkommen bei Magento StackExchange :). Was genau möchten Sie erreichen? Bitte erklären Sie in Frage
Ankit Shah
Hallo @AnkitShah, ich möchte wissen, wo sich eine HTML-Datei befindet, die von knockout js aufgerufen wurde
user48215
magento\vendor\magento\module-checkout\view\frontend\requirejs-config.js
Ankit Shah
@AnkitShah Ich verstehe nicht, dass diese Datei js-Datei enthält.
user48215
Finden Sie heraus, <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>woher das kommt? magento\vendor\magento\module-checkout\Block\Onepage.php public function getJsLayout()
Ankit Shah

Antworten:

9

TL: DR

Die Vorlage, die es aufruft, ist magento/module-checkout/view/frontend/web/template/onepage.html.

Meine Forschung ist unten.

Was macht dieses Skript?

"#checkout": {
    "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
}

Dies weist Magento an, das JS-Layout aufzurufen, wenn das #checkoutElement auf der Seite vorhanden ist.

<!-- ko template: getTemplate() --><!-- /ko -->

Der obige Code weist Magento an, eine Vorlage zu rendern. Woher weiß es nun, welche Vorlage gerendert werden soll? Wenn Sie sich das übergeordnete divElement ansehen, sehen Sie diesen Code:

data-bind="scope:'checkout'"

Dies informiert Magento darüber, dass der verschachtelte Code in Bezug auf die Kaufabwicklung steht (es macht mehr als das, aber ich gehe nicht zu weit hinein).

Suchen Sie die Vorlage

Die Vorlage kann innerhalb des text/x-magento-initTags definiert werden , aber Magento macht dies normalerweise nicht so, wie Sie sehen können. Magento tut dies normalerweise über die XML-Methode, was diese Zeile tut:

$block->getJsLayout();

Dadurch wird die Komponentenkonfiguration aus dem XML-Code abgerufen. Schauen wir uns das an.

Wenn Sie suchen vendor/magento/module-checkout/view/frontend/layoutfür onepage.phtmlsie zurückgeben sollte magento/module-checkout/view/frontend/layout/checkout_index_index.xml. Schauen wir uns hier die Konfiguration an.

In checkout.rootIhnen verschachtelt sehen Sie viele <argument>Tags, wenn Sie sich diese Zeile ansehen - <item name="checkout" xsi:type="array">dies bezieht sich auf den Bereich, den wir zuvor gesehen haben. Darin befindet sich eine Zeile, die eine Vorlage definiert:

<item name="template" xsi:type="string">Magento_Checkout/onepage</item>

Dies bedeutet also, dass der Aufruf von getTemplate () zurückkehrt:

magento/module-checkout/view/frontend/web/template/onepage.html

Wie Sie an der XML-Datei erkennen können, können UI-Komponenten ziemlich überwältigend sein. Es gibt noch viel mehr, das ich ausgelassen habe, es könnte für immer weitergehen, und ich habe noch kein gutes Verständnis für alle Aspekte. Aber hoffentlich weist Sie dies in die richtige Richtung.

Ben Crook
quelle