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.