Magento ajoute des inclusions CSS et JS au pied de page

Je fais une optimisation Yslow de mon site Magento et j'essaie d'ajouter le CSS et Js au pied de page du site.

Pour le moment, j'utilise une balise de référence de tête dans la mise en page XML et j'utilise des actions addJset addCsspour inclure tous mes fichiers. J'ai essayé d'échanger la référence de la tête au pied de page, mais j'ai reçu une erreur lorsque j'ai essayé d'afficher le site. Existe-t-il un moyen de le faire dans local.xml ou doit-il être codé en dur dans le fichier de modèle de pied de page lui-même?

Je sais que ce n'est pas une réponse à votre question, mais quelque chose que vous voudrez peut-être néanmoins considérer.

Magento utilise beaucoup de javascript en ligne, en particulier sur la page de détail du produit. Comme javascript dépend des scripts externes chargés dans l'en-tête, vous devrez également déplacer tous les scripts en ligne vers des fichiers externes et les ajouter dans le pied de page.

Vous pourriez être plus rapide et mieux loti en compressant le CSS et le JS avec les outils intégrés à Magento et en utilisant des en-têtes de compression gzip et d'expiration lointaine pour les accélérer. De cette façon, le «décalage» provoqué par le javascript et le CSS serait réduit au minimum sans avoir besoin de modifier la disposition par défaut des extensions Magento et tierces. De cette façon, lorsque vous mettez à niveau votre Magento ou vos extensions, vous n'avez pas à refaire tout le travail.

Le .htaccess fourni par le projet de passe-partout HTML5 fournit cette compression gzip et les en-têtes d'expiration lointaine, veuillez consulter http://inchoo.net/ecommerce/magento/magento-boilerplate/

La première étape consiste à créer un bloc appelé "pied" qui est essentiellement le même que "tête" mais vous le sortirez à un endroit différent. Vous pouvez l'ajouter à votre page.xml:

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

Vous pouvez maintenant ajouter JS / CSS (bien que CSS dans le pied de page ne soit pas recommandé) en utilisant cette commande dans n'importe lequel de vos fichiers XML:

    <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>

À l'intérieur page/html/foot.phtml:

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

Dans vos fichiers de modèle de page (par exemple page/1column.phtml), vous devrez sortir ce bloc avant la balise de fermeture du corps:

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

Si vous utilisez les modèles Magento par défaut, vous obtiendrez des erreurs JS. Prenez le mini formulaire de recherche par exemple ( catalogsearch/form.mini.phtml). Il a ce script en ligne:

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

Elle sera appelée dès son chargement, car elle ne se trouve dans aucun gestionnaire de document prêt. Varien n'existe pas encore car il est dans le pied de page, vous obtenez donc une erreur. Vous pouvez résoudre ce problème en ajoutant un gestionnaire de documents prêt ou en déplaçant tous les JS en ligne de cette nature vers un fichier externe qui est également chargé dans le pied de page. Des problèmes comme celui-ci se produiront sur tout le site, en particulier dans les pages de paiement et les pages de produits configurables.

L'autre problème que vous pourriez rencontrer est si vous utilisez jQuery avec Prototype en mode noConflict. Vous devrez vous assurer que jQuery est chargé avant le prototype afin qu'aucun conflit ne se produise.

Pour Magento v1.6 + (besoin de tester dans les anciennes versions);

1 - créez un fichier modèle page/html/footer/extras.phtmlavec ce contenu:

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

2 - Ajoutez ce noeud html à votre mise en page xml:

<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 - C'est tout!