Magento 2 Knockout js auf der Checkout-Seite

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?

— 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:

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

Um eine JS-Komponente in einem HTML-Element ohne direkten Zugriff auf das Element oder ohne Beziehung zu einem bestimmten Element aufzurufen, verwendet Magento das Tag.

Weitere Informationen finden Sie unter http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html

— KAndy
quelle