Magento fügt der Fußzeile CSS- und JS-Includes hinzu

Ich optimiere meine Magento-Site in Yslow und versuche, CSS und Js in die Fußzeile der Site einzufügen.

Im Moment verwende ich ein Head-Referenz-Tag im Layout-XML und verwende addJsund addCssAktionen, um alle meine Dateien einzuschließen. Ich habe versucht, den Kopf-Verweis auf die Fußzeile zu tauschen, aber beim Versuch, die Site anzuzeigen, ist ein Fehler aufgetreten. Gibt es eine Möglichkeit local.xml , dies in der Footer-Vorlagendatei selbst zu tun, oder muss dies in der Footer-Vorlagendatei selbst hartcodiert erfolgen?

Ich weiß, dass dies keine Antwort auf Ihre Frage ist, sondern etwas, über das Sie dennoch nachdenken sollten.

Magento verwendet ziemlich viel Inline-Javascript, insbesondere auf der Produktdetailseite. Da dieses Javascript von externen Skripten abhängt, die im Header geladen sind, müssen Sie alle Inline-Skripten auch in externe Dateien verschieben und in die Fußzeile einfügen.

Möglicherweise sind Sie schneller und besser dran, wenn Sie CSS und JS mit den in Magento integrierten Tools komprimieren und die GZIP-Komprimierung und Header mit langer Gültigkeitsdauer verwenden, um sie zu beschleunigen. Auf diese Weise wird die Verzögerung, die durch Javascript und CSS verursacht wird, auf ein Minimum reduziert, ohne dass das Standardlayout für Magento und Erweiterungen von Drittanbietern geändert werden muss. Auf diese Weise müssen Sie beim Upgrade Ihres Magento oder Ihrer Erweiterungen nicht die gesamte Arbeit wiederholen.

Der vom HTML5-Boilerplate-Projekt bereitgestellte .htaccess bietet diese GZIP-Komprimierung und die Header für das ferne Ablaufdatum. Weitere Informationen finden Sie unter http://inchoo.net/ecommerce/magento/magento-boilerplate/

Der erste Schritt besteht darin, einen Block mit dem Namen "foot" zu erstellen, der im Wesentlichen mit "head" identisch ist, den Sie jedoch an einer anderen Stelle ausgeben. Sie können dies hinzufügen zu page.xml:

    <block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>

Jetzt können Sie JS / CSS hinzufügen (obwohl CSS in der Fußzeile nicht empfohlen wird), indem Sie diesen Befehl in einer Ihrer XML-Dateien verwenden:

    <reference name="foot">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/somefile.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/main.js</name>
        </action>
    </reference>

Innen page/html/foot.phtml:

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>

In Ihren Seitenvorlagendateien (zB page/1column.phtml) müssen Sie diesen Block vor dem schließenden Body-Tag ausgeben:

    <?php echo $this->getChildHtml('foot') ?>

Wenn Sie die Standard-Magento-Vorlagen verwenden, werden JS-Fehler angezeigt. Nehmen Sie zum Beispiel das Minisuchformular ( catalogsearch/form.mini.phtml). Es hat dieses Inline-Skript:

<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search Redset...') ?>');
    //]]>
</script>

Dies wird aufgerufen, sobald es geladen wird, da es sich nicht in einem dokumentenfertigen Handler befindet. Varien ist noch nicht vorhanden, da es sich in der Fußzeile befindet und Sie eine Fehlermeldung erhalten. Sie können dies beheben, indem Sie einen dokumentenfertigen Handler hinzufügen oder alle Inline-JS dieser Art in eine externe Datei verschieben, die ebenfalls in die Fußzeile geladen wird. Probleme wie diese treten auf der gesamten Website auf, insbesondere auf den Checkout- und konfigurierbaren Produktseiten.

Das andere Problem besteht darin, dass Sie jQuery zusammen mit Prototype im NoConflict-Modus verwenden. Sie müssen sicherstellen, dass jQuery vor Prototype geladen wird, damit keine Konflikte auftreten.

Für Magento v1.6 + (muss in älteren Versionen getestet werden);

1 - Erstellen Sie eine Vorlagendatei page/html/footer/extras.phtmlmit folgendem Inhalt:

<?php echo $this->getCssJsHtml() ?>

2 - Fügen Sie diesen HTML-Knoten zu Ihrer Layout-XML hinzu:

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3 - Das ist es!