Magento 2 fügt ein Skript hinzu, bevor das Body-Tag geschlossen wird


7

Was ist der richtige Weg, um ein Skript vor dem schließenden Body-Tag in Magento 2 hinzuzufügen?

Ich möchte, dass es allen Seiten zur Verfügung steht.

AKTUALISIEREN:

Ich bin reingekommen myvendor/mytheme/Magento_Theme/layout/default.xmlmit:

<referenceContainer name="before.body.end">
    <block class="\Magento\Framework\View\Element\Template" template="Theme_Module::js.phtml" name="module_js"/>
</referenceContainer>

Und das js.phtmlInnere/Magento_Theme/templates

Sollte das richtig sein?

Antworten:


13

Sie können es mit Layout tun

    <referenceContainer name="before.body.end">
        <block class="\Magento\Framework\View\Element\Template" template="You_Module::js.phtml" name="module_js"/>
    </referenceContainer>

und in js.phtml

<script src="//cdn.javascrip.com/test.js" />

Muss ich dafür ein neues Modul erstellen? Ich habe versucht, magento_theme default.xml zu überschreiben und dies dort hinzuzufügen, aber ohne Freude.
Matt

Thema sollte funktionieren
KAndy

Also habe ich in myvendor / mytheme / Magento_Theme / layout / default.xml mit <referenceContainer name = "before.body.end"> <block class = "\ Magento \ Framework \ View \ Element \ Template" template = "Theme_Module :: js.phtml "name =" module_js "/> </ referenceContainer> Und die js.phtml in / Magento_Theme / templates> Sollte das richtig sein? Vielen Dank
Matt

Funktioniert, aber die Antwort könnte etwas vollständiger sein, so dass es sich tatsächlich um ein wirklich klares Beispiel handelt (Dateien usw.).
hakre

Wie kann ich das in einem benutzerdefinierten Modul tun?
Jibin George

3

Fügen Sie referenceContainerCode in die Layoutdatei ein

app/design/frontend/<vendor>/<theme>/Magento_Theme/layout/default.xml

Vor dem Ende des Körpers

 <referenceContainer name="before.body.end">
      <block class="Magento\Framework\View\Element\Js\Components" name="js.beforebody" as="jsbeforebody" template="Magento_Theme::js/js.phtml"/>
    </referenceContainer>

Für nach dem Körperstart

 <referenceContainer name="after.body.start">
      <block class="Magento\Framework\View\Element\Js\Components" name="js.afterbody" as="jsafterbody" template="Magento_Theme::js/js.phtml"/>
    </referenceContainer>

Erstellen Sie eine js.phtmlVorlagendatei und fügen Sie Ihr js-Skript / Ihren js-Code in diese Datei ein.

app/design/frontend/<vendor>/<theme>/Magento_Theme/templates/js/js.phtml

1

Die aktualisierten Codes in Ihrer Frage sind nicht richtig. Sie müssen sich ändern , Theme_Moduleum Magento_Themein der default.xml.

Unten finden Sie den vollständigen Code

Fügen Sie in Ihrem myvendor/mytheme/Magento_Theme/layout/default.xmlInhalt hinzu

<referenceContainer name="before.body.end">
    <block class="Magento\Framework\View\Element\Template" template="Magento_Theme::js.phtml" name="module_js"/>
</referenceContainer>

Fügen Sie die Datei js.phtmlim Verzeichnis hinzu myvendor/mytheme/Magento_Theme/templates.

In der js.phtml, fügen Sie den js Inhalte wie unten

<script>
    ...
</script>

Aktualisieren Sie den Site-Cache und Sie werden den Effekt sehen.


Zusätzliche Tipps

Über den Inhalt von js.phtml

Der js-Inhalt in Magento2 ist ein weiteres Thema. Sie finden ihn im offiziellen Dokument. Aufrufen und Initialisieren von JavaScript .

Ein offizielles Beispiel ist wie folgt

<script>
require([
    'jquery',
    'accordion'  // the alias for "mage/accordion"
], function ($) {
    $(function () { // to ensure that code evaluates on page load
        $('[data-role=example]')  // we expect that page contains the <tag data-role="example">..</tag> markup
            .accordion({ // now we can use "accordion" as jQuery plugin
                header:  '[data-role=header]',
                content: '[data-role=content]',
                trigger: '[data-role=trigger]',
                ajaxUrlElement: "a"
            });
    });
});
</script>
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.