Existe-t-il un moyen d'ajouter JS / CSS à la page de pied de page?

J'ai une exigence personnalisée pour ajouter un JS et CSS spécifique lié au pied de page du site Web . Existe-t-il un moyen dans Magento par lequel je peux l'ajouter dans la section pied de page ?

Le footerbloc n'offre pas de support pour js directement, comme la tête.

Mais il y a un bloc avec le nom before_body_endoù vous pouvez ajouter tout ce que vous voulez avec un modèle ou un bloc de texte.

Je penserais à votre propre modèle et au type de bloc Mage_Page_Block_Html_Head, alors vous pouvez utiliser ce que @Dexter a recommandé.

Non, vous avez besoin de quelque chose comme ça, vous n'avez pas non plus de bloc page / html_head à référencer:

<!-- get the block which we want our content in -->
<reference name="before_body_end">
    <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
    <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
    <block type="page/html_head" name="scripts_in_footer" template="YOUR TEMPLATE">
        <!-- add whatever you want as you are used to in the head via the standard magento api -->
        <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
    </block>
</reference>

Et à l'intérieur de votre modèle, vous avez besoin de:

<?php // and to echo the whole stuff later in the template, you need to add the code, so the added js/Css files are echoed ?>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

L'en-tête et le pied de page sont rendus par le module Page dans magento. Pour voir les modèles d'en-tête et de pied de page, accédez à

app / design / frontend/ <your_package> /<your_theme> /template / page / html / footer.phtml

Jetez également un œil aux autres fichiers du dossier de pages. Là, vous pouvez voir header.phtmlquelle section d'en-tête de rendu de chaque page. head.phtmlutiliser pour ajouter des fichiers js et css qui s'appliquent à toutes les pages de magento.

Voir également les fichiers dans le dossier de pages. Ces fichiers seront rendus pour chaque page en fonction des spécifications de mise en page d'une page particulière.

Faites une étude sérieuse sur ce module. Cela vous aidera beaucoup.

Éditer

Vous pouvez ajouter vos css et js via page.xml. Je pense que cela résoudra votre problème. Aller à

app / design / frontend/ <your_package> /<your_theme> / layout / page.xml

et ajoutez cet extrait de code dans son defeault handle. (Vous pouvez voir beaucoup de fichiers js et css ajoutés dans cette poignée. Ajoutez simplement ce code sous ces codes)

 //this will add your js
 <action method="addItem">
     <type>skin_js</type>
     <name>js/yourjsfile.js</name>
 </action>  
 //this will add your css file
 <action method="addItem">
     <type>skin_css</type>
     <name>js/yourcssfile.css</name>
 </action>

C'est ça. Assurez-vous maintenant que vos fichiers js et css personnalisés se trouvent à l'emplacement

  skin/frontend/<your_package> /<your_theme>/js/yourjsfile.js
  skin/frontend/<your_package> /<your_theme>/css/yourcssfile.css

Bonne chance pour votre travail.

Utilisez XML pour cela. Pour ajouter des J dans le pied de page, appelez la référence du pied de page. Le code ressemblera à ceci

<reference name="footer">
   <action method="addJs"><script>js/file.js</script></action>
</reference>

Pour ajouter JS dans le dossier skin, vous pouvez utiliser le code suivant

    <reference name="footer">
    <action method="addItem"><type>skin_js</type><name>js/test.js</name></action>
</reference>

Pour ajouter des CSS, vous pouvez utiliser le code XML suivant

<reference name="footer">
    <action method="addCss"><stylesheet>css/layout.css</stylesheet></action>
</reference>

ou vous pouvez également utiliser

<reference name="footer">
<action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
  </reference>

Pour javascript, avez-vous envisagé d'utiliser simplement onload ou $ (document) .ready () de jquery?

Cela vous permettrait de placer votre code dans l'en-tête comme la configuration typique, mais de ne pas l'exécuter jusqu'à ce que le contenu référencé par js soit chargé.

Votre code js filename.js ressemblerait à:

$(document).ready( function(){
   your custom js here
});

Le code de votre mise en page ressemblerait à ceci: (Vous devrez évidemment ajouter les répertoires appropriés au fur et à mesure de leur configuration.)

<reference name="head">
   <action method="addItem"><type>js</type><name>js/jquery/jquery.js</name></action>
   <action method="addItem"><type>js</type><name>js/filename.js</name></action>
</reference>

Oui, il y a un moyen mais vous devez ajouter via du code comme ci-dessous ajoutez ce code au bas du fichier 1column.phtml juste avant la fin de la <body>balise.

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

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

Il fonctionne en analysant la sortie html de Magento, puis en effectuant une action couper-coller sur le code pour déplacer javascript au bas du code html. Le processus est rapide mais il est préférable de l'utiliser en conjonction avec un cache pleine page pour mettre en cache les modifications html.

Plus d'informations sur le fonctionnement de ce module et peuvent vous aider à améliorer le classement de vitesse de page ici:

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