Déplacer tous Javascript comprend à avant

magento.stackexchange https://magento.stackexchange.com/questions/355

Question

Quelqu'un sait comment avoir toutes les balises de Magento JS par exemple de script <script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script> rendre avant la </body> de fermeture?

Je l'ai essayé une fois avant, mais on m'a donné une erreur que je crois être le long des lignes de la méthode addJS INDISPONIBLES où je l'ai utilisé, éventuellement en pied de page de référence.

Était-ce utile?

La solution

Cela dépend de votre demande. Par exemple, enfin, j'avais enlevé tous les scripts Prototype de la Homepage du magasin Magento que je ne l'ai pas face à tout problème. Mais comme je l'ai dit, cela dépend de votre thème, extensions, etc.

Pour déplacer le script:

Trouvez la ligne suivante dans page.xml de votre thème 

<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">

insérer le texte suivant juste avant: 

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
   <action method="addJs"><script>your_script.js</script></action>
</block>

Pour Magento 1.9 utiliser ceci: 

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
       <action method="addItem"><type>skin_js</type><name>js/yourskinfile.js</name><params/></action>
    </block>

Créez le fichier modèle dans app / design / frontend / [paquet] / [thème] /template/page/html/jsfooter.phtml et mettre les éléments suivants 

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

Ajouter ci-dessous dans votre modèle juste avant la fermeture balise </body>. 

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

Autres conseils

Il y a deux problèmes avec le déplacement de la balise. Le plus grand problème est que, pour une raison quelconque Magento injecte beaucoup de JS qui dépend de prototype directement dans la balise <body/>. Déplacement des scripts à la fin du document (si bon pour les temps de chargement), va briser beaucoup de pages dans Magento.

L'autre problème est en train de faire réellement. Il ne semble pas être étiquette <move />, ou des fonctionnalités similaires. Ce que je l'ai fait pour les scripts personnalisés que je l'ai créé est l'ajout de scripts comme celui-ci. Il est plus redondant, mais cela fonctionne: 

<block type="page/html_head" name="foot.scripts" template="page/template/foot-scripts.phtml">
    <action method="addJs"><script>jmax/global-min.js</script></action>
</block>

Dans ce Magento 1.x est confié une mission d'un fou. Il y a tout simplement trop de scripts en ligne dans tous les fichiers jonchées de modèle dans Magento qui cassera si vous relogé le noyau JS fichiers du <head>. Potentiellement Magento 2, cette situation va changer, mais il est à cheval sur Prototype et jQuery migre Magento loin de Prototype.

Pour d'autres scripts, vous devez les placer avant l'élément </body>. Je l'ai trouvé utile d'ignorer XML <action method="addJS|addItem"> Magento et il suffit de créer un nouveau fichier de modèle pour chaque script, qui comprend une référence de script HTML brut comme: 

<script src="<?php echo $this->getSkinUrl('js/hobbiton.js'); ?>"></script>

Ensuite, vous pouvez intégrer ce fichier modèle partout (et toujours utiliser avant / après pour contrôler l'ordre) comme ceci: 

<block type="core/template name="jquery.hobbiton" after="-" template="custom/jquery/hobbiton.phtml" />

Déplacement JavaScript externe au fond ne suffit pas dans la plupart des cas. Si vous utilisez des modèles avec JavaScript en ligne, comme dans les thèmes par défaut, vous aurez besoin de retarder l'exécution de ces jusqu'à ce que toutes les dépendances (prototype.js, varien.js, ...) sont chargés.

Une approche est d'extraire tous les éléments de <script> en ligne de blocs rendus à l'aide d'un observateur pour http_response_send_before et les déplacer à la fin juste après les scripts externes. Pendant que vous y êtes, vous pouvez déplacer tous les éléments de script, non seulement en ligne. Cela vous évite les tracas de les déplacer via le modèle de mise en page, ce qui n'a manifestement pas voulu par Magento.

Tom Robertshaw a créé une extension qui fait exactement cela, avec un seul observateur qui modifie le code HTML de réponse en utilisant des expressions régulières: https://github.com/bobbyshaw/magento-footer-js

Il utilise l'événement core_block_abstract_to_html_after mais seulement prend des mesures si le bloc courant est le bloc racine. Cela signifie, l'observateur est appelé plus souvent, mais il devrait tirer parti de la mise en cache de bloc à un certain degré.

Je recommande fortement le module pagespeed de mediarox pour vous aider à optimiser votre javascript (et css) et améliorer google aperçu pagespeed classement.

Il fonctionne en analysant la sortie html par Magento et en effectuant ensuite une coupe et coller l'action sur le code de mouvement javascript vers le bas du code HTML. Le processus est rapide mais il est mieux utilisé en conjonction avec un cache de page complète pour mettre en cache les modifications html.

Plus d'informations sur la façon dont fonctionne ce module et peut vous aider à améliorer le rang pagespeed ici:

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

Pour Magento v1.6 + (nécessité de tester dans les anciennes versions);

1 - créer un fichier modèle dans page/html/footer/extras.phtml avec ce contenu: 

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

2 - Ajouter ce nœud html à votre disposition 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-il

En raison d'un problème avec cet autre scénario (dans le produit / list.phtml) <script type="text/javascript"> decorateList('category-list', 'none-recursive') </script> Je devais passer un certain JS à la fin de ma page.

Je n'étais pas en mesure de faire ce qui est indiqué ci-dessus travail donc je trouve une autre façon d'y parvenir:

I remplacer le Mage/page/Block/Html/Footer.php controller en recréant avec le même chemin en app/local folder.

Voici le chemin complet à créer sinon existe: 

app/local/Mage/page/Block/Html/Footer.php

Dans ce fichier, ajouter des fonctions à partir head.php qui se trouve dans le même dossier du noyau de Magento (à savoir Mage / page / Bloc / Html / head.php).

Fonctions que vous devez faire cela fonctionne sont (évidemment la fonction complète, ici, j'indique que le nom de rester concis): 

public function addItem($type, $name, $params=null, $if=null, $cond=null)
{...}

public function addJs($name, $params = "")
{...}

public function getCssJsHtml()
{...}

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{...}

protected function _separateOtherHtmlHeadElements(&$lines, $itemIf, $itemType, $itemParams, $itemName, $itemThe)
{...}

protected function _prepareOtherHtmlHeadElements($items)
{...}

Puis-je ajouter à mon habitude (celui de mon thème) la page / html / footer.phtml l'appel à ceci: 

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

A la fin, je peux maintenant ajouter JS dans mon pied en appelant dans une mise en page 

<action method="addJs"><script>yourscript.js</script></action>
Licencié sous: CC-BY-SA avec attribution
Non affilié à magento.stackexchange
scroll top