Magento ajoute des inclusions CSS et JS au pied de page

15

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?

Chris Morris
la source
3
doublon possible de Déplacer tout Javascript inclus avant </body>
Ben Lessani - Sonassi
1
Fournir l'erreur que vous avez reçue lorsque vous essayez d'afficher le site après votre échange peut aider les gens à répondre à votre question.
Alan Storm
3
Mis à part le déplacement de JS vers le pied de page, je suis presque sûr que vous ne voulez pas déplacer CSS vers le pied de page. Cela devrait être <head>.
pspahn
Checkout @sonassi lien vers mon ancien poste. L'une des solutions était correcte et fonctionne, mais sachez que vous obtenez plusieurs fichiers JS fusionnés lorsque vous activez la fusion. Cela semble se produire si vous incluez également JS à l'aide de différentes poignées.
Mark Weston
CSS dans le pied. Beurk sur l'affichage des pages ... Et JS ne devrait être fait que pour les inclusions externes qui peuvent bloquer l'affichage des pages. Tout ce qui est servi sur votre serveur devrait être dans la tête. C'est le framework, le framework est fortement utilisé dans l'assemblage de la page et devrait être là avant que la page ne commence à s'afficher. La plupart des recommandations ont suivi aveuglément sans comprendre (culte du fret) pourquoi endommagez-vous.
Fiasco Labs

Réponses:

7

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/

Sander Mangel
la source
2
Les erreurs d'OP sont très probablement causées par le chargement hors service - la plupart des scripts en ligne nécessitent un prototype et al. Si vous ne chargez cela que dans le pied de page, il est trop tard. La suppression du JS en ligne serait la première étape. Beaucoup de travail - bonne chance.
Kristof au Fooman
4

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.

jharrison.au
la source
2

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!

Marcio Maciel
la source
Méthode beaucoup plus simple que celle ci-dessus pour ajouter des scripts js avant la balise body de fermeture
asherrard