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

15

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?

Chris Morris
quelle
3
Mögliche Duplikate von Move all Javascript enthält, bevor </ body>
Ben Lessani - Sonassi
1
Die Angabe des Fehlers, den Sie beim Versuch erhalten haben, die Site nach Ihrem Tausch anzuzeigen, kann möglicherweise die Beantwortung Ihrer Frage erleichtern.
Alan Storm
3
Abgesehen davon, dass Sie JS in die Fußzeile verschieben, sind Sie sich ziemlich sicher, dass Sie CSS nicht in die Fußzeile verschieben möchten. Es sollte in sein <head>.
Pspahn
Kasse @sonassi Link zu meinem älteren Post. Eine der Lösungen war korrekt und funktioniert. Beachten Sie jedoch, dass Sie beim Aktivieren des Zusammenführens mehrere zusammengeführte JS-Dateien erhalten. Dies scheint zu passieren, wenn Sie auch JS mit verschiedenen Handles einbinden.
Mark Weston
CSS im Fuß. Yuck on Page Display ... Und JS sollte nur für externe Includes durchgeführt werden, die die Seitenanzeige blockieren können. Alles, was von Ihrem Server aus bedient wird, sollte sich im Kopf befinden. Es handelt sich um ein Framework, das in der Seitenassemblierung häufig verwendet wird und vorhanden sein sollte, bevor die Seite gerendert wird. Die meisten Empfehlungen wurden blindlings befolgt, ohne zu verstehen (Ladungskult), warum Sie Schaden anrichten.
Fiasco Labs

Antworten:

7

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/

Sander Mangel
quelle
2
OPs Fehler werden sehr wahrscheinlich durch das Laden außerhalb der Reihenfolge verursacht - die meisten Inline-Skripte erfordern Prototype et al. Wenn Sie dies nur in die Fußzeile laden, ist es zu spät. Das Entfernen der Inline-JS wäre der erste Schritt. Viel Arbeit - viel Glück.
Kristof bei Fooman
4

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.

jharrison.au
quelle
2

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!

Marcio Maciel
quelle
Viel einfachere Methode als die oben beschriebene, um js-Skripte vor dem schließenden Body-Tag
hinzuzufügen