Gibt es eine Möglichkeit, JS / CSS zur Fußzeilenseite hinzuzufügen?

9

Ich habe eine benutzerdefinierte Anforderung, ein bestimmtes JS und CSS hinzuzufügen, die sich auf die Fußzeile der Website beziehen . Gibt es in Magento eine Möglichkeit, es in der Fußzeile hinzuzufügen ?

Kennzeichen
quelle
Ich habe den Blog für diese Ausgabe geschrieben. Siehe hier: blog.rahuldadhich.com/magento-load-css-js-footer
Rahul Dadhich

Antworten:

17

Der footerBlock bietet keine Unterstützung für js direkt, wie der Kopf.

Es gibt jedoch einen Block mit dem Namen, before_body_endin dem Sie mit einer Vorlage oder einem Textblock alles hinzufügen können, was Sie möchten.

Ich würde über Ihre eigene Vorlage und den Blocktyp nachdenken Mage_Page_Block_Html_Head, dann können Sie das verwenden, was @Dexter empfohlen hat.

Nein, Sie benötigen so etwas, Sie haben auch keinen page / html_head-Block, auf den Sie verweisen können:

<!-- get the block which we want our content in -->
<reference name="before_body_end">
    <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
    <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
    <block type="page/html_head" name="scripts_in_footer" template="YOUR TEMPLATE">
        <!-- add whatever you want as you are used to in the head via the standard magento api -->
        <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
    </block>
</reference>

Und innerhalb Ihrer Vorlage benötigen Sie:

<?php // and to echo the whole stuff later in the template, you need to add the code, so the added js/Css files are echoed ?>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
Fabian Blechschmidt
quelle
danke für die antwort @fabian blechschmidt. Ich habe so etwas hinzugefügt, aber auch kein Glück und keine Ausnahme. <default> <reference name = "before_body_end"> <action method = "addItem"> <type> skin_js </ type> <name> js / test.js </ name> <params /> </ action> </ reference > </ default>
Mark
aktualisierte die Antwort, du brauchst einen Block!
Fabian Blechschmidt
Du bist der MANN !!! Ein dickes Lob. Vielen Dank für die Antwort. Aber ich bin froh, wenn du mir zum besseren Verständnis auch ein bisschen den Code erklärst.
Mark
Einige Kommentare hinzugefügt. Wenn Sie weitere Fragen haben, stellen Sie diese bitte - konkrete Fragen :-)
Fabian Blechschmidt
1
Der korrekte Name des Blocks lautet: <reference name = "before_body_end"> und nicht <reference name = "before_body_ends">
Tomas Dermisek
3

Der Kopf- und Fußzeilenteil wird vom Seitenmodul in Magento gerendert. Um Kopf- und Fußzeilenvorlagen anzuzeigen, gehen Sie zu

app / design / frontend/ <your_package> /<your_theme> /template / page / html / footer.phtml

Schauen Sie sich auch andere Dateien im Seitenordner an. Dort können Sie sehen, header.phtmlwelcher Render-Header-Abschnitt jeder Seite angezeigt wird. head.phtmlVerwenden Sie diese Option, um JS- und CSS-Dateien hinzuzufügen, die für alle Seiten in Magento gelten.

Siehe auch Dateien im Seitenordner. Diese Dateien werden für jede Seite gemäß der Layoutspezifikation einer bestimmten Seite gerendert.

Machen Sie eine ernsthafte Studie über dieses Modul. Es wird dir sehr helfen.

bearbeiten

Sie können Ihre CSS und JS über page.xml hinzufügen. Ich denke, es wird Ihr Problem lösen. Gehe zu

app / design / frontend/ <your_package> /<your_theme> / layout / page.xml

und fügen Sie dieses Code-Snippet hinzu defeault handle. (In diesem Handle werden viele JS- und CSS-Dateien hinzugefügt. Fügen Sie einfach diesen Code unter diesen Codes hinzu.)

 //this will add your js
 <action method="addItem">
     <type>skin_js</type>
     <name>js/yourjsfile.js</name>
 </action>  
 //this will add your css file
 <action method="addItem">
     <type>skin_css</type>
     <name>js/yourcssfile.css</name>
 </action>

Das ist es. Stellen Sie nun sicher, dass sich Ihre benutzerdefinierten JS- und CSS-Dateien am Speicherort befinden

  skin/frontend/<your_package> /<your_theme>/js/yourjsfile.js
  skin/frontend/<your_package> /<your_theme>/css/yourcssfile.css

Viel Glück für Ihre Arbeit.

Rajeev K Tomy
quelle
Ich arbeite nicht mit page.xml . In meiner local.xml muss ich die XML-Methode verwenden. Ihr bearbeiteter Beitrag schlägt nur vor, wie ich ein JS / CSS in XML-Dateien hinzufügen kann (was nicht die Frage ist).
Mark
@Mark: In Ihrem qn gibt es keinen Hinweis für die Verwendung der Datei local.xml für Ihre Arbeit. Ihr qn verlangt, dass Sie js und css zur Fußzeile hinzufügen müssen. Meine Aktualisierung wird diesen Job perfekt machen. Wie auch immer, warum benötigen Sie zu diesem Zweck die Datei local.xml?
Rajeev K Tomy
Warum sollte jemand als Mage-Entwickler, der Standards beibehält, page.xml verwenden? Ihr Code <action method="addItem"> <type>skin_js</type> <name>js/yourjsfile.js</name> </action>fügt JS in <head> und nicht in footer hinzu !!!
Mark
2

Verwenden Sie dafür XML. Um Js in die Fußzeile einzufügen, rufen Sie die Fußzeilenreferenz auf. Der Code sieht ungefähr so ​​aus

<reference name="footer">
   <action method="addJs"><script>js/file.js</script></action>
</reference>

Um JS zum Skin-Ordner hinzuzufügen, können Sie den folgenden Code verwenden

    <reference name="footer">
    <action method="addItem"><type>skin_js</type><name>js/test.js</name></action>
</reference>

Zum Hinzufügen von CSS können Sie den folgenden XML-Code verwenden

<reference name="footer">
    <action method="addCss"><stylesheet>css/layout.css</stylesheet></action>
</reference>

oder Sie können auch verwenden

<reference name="footer">
<action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
  </reference>
Dexter
quelle
Ungültige Methode Mage_Page_Block_Html_Footer :: addJs
Mark
@Mark: Das passiert, weil die Footer-Klasse keine Methode namens "addJs" hat. Weitere Informationen finden Sie unter: magento.stackexchange.com/questions/15904/…
pablofiumara
2

Haben Sie für Javascript in Betracht gezogen, nur onload oder jquerys $ (document) .ready () zu verwenden?

Auf diese Weise können Sie Ihren Code wie im typischen Setup in den Header einfügen, ihn jedoch erst ausführen, wenn der Inhalt geladen ist, auf den Ihr js verweist.

Ihr js-Dateiname.js-Code würde folgendermaßen aussehen:

$(document).ready( function(){
   your custom js here
});

Der Code für Ihr Layout würde folgendermaßen aussehen: (Sie müssten natürlich die entsprechenden Verzeichnisse hinzufügen, sobald Sie sie eingerichtet haben.)

<reference name="head">
   <action method="addItem"><type>js</type><name>js/jquery/jquery.js</name></action>
   <action method="addItem"><type>js</type><name>js/filename.js</name></action>
</reference>
zeusstl
quelle
1

Ja, es gibt eine Möglichkeit, aber Sie müssen über den folgenden Code hinzufügen: Fügen Sie diesen Code am Ende der Datei 1column.phtml kurz vor dem Ende des <body>Tags hinzu.

<script src="<?php echo $this->getSkinUrl('js/jquery.noConflict.js') ?>"></script>
Keyul Shah
quelle
Schlechter Rat, weil Sie Ihren Code nicht in alle Vorlagen kopieren möchten.
Fabian Blechschmidt
Wir können js in der Fußzeile nicht über XML hinzufügen, daher verwende ich diesen Flow.
Keyul Shah
1
Schau dir meine Antwort an. Sie fließen löst das Problem, aber Sie müssen den Code in jede Root-Vorlage kopieren.
Fabian Blechschmidt
1

Ich empfehle das Mediarox-Pagespeed-Modul, um Ihnen zu helfen, Ihr Javascript (und CSS) zu optimieren und das Ranking der Google Pagespeed-Einblicke zu verbessern.

Es funktioniert, indem die von Magento ausgegebene HTML-Ausgabe analysiert und anschließend eine Aktion zum Ausschneiden und Einfügen des Codes ausgeführt wird, um Javascript an den unteren Rand des HTML-Codes zu verschieben. Der Prozess ist schnell, wird jedoch am besten in Verbindung mit einem Ganzseiten-Cache verwendet, um die HTML-Änderungen zwischenzuspeichern.

Weitere Informationen zur Funktionsweise dieses Moduls und zur Verbesserung des Seitengeschwindigkeitsrangs finden Sie hier:

http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/

paj
quelle