Charger js en pied de page dans Magento


12
<reference name="footer">
    <action method="addItem">
        <type>skin_js</type>
        <file>js/fabric/tool/controller_tool.js</file>
    </action>
</reference>

J'ai utilisé le code ci-dessus pour charger js en pied de page. Mais Magento lance une erreur comme

Méthode non valide Mage_Page_Block_Html_Footer :: addItem (Array ([0] => skin_js [1] => js / fabric / tool / controller_tool.js))

J'ai besoin de charger js en pied de page. Comment surmonter ce problème.

Réponses:


8

Actuellement, le bloc de pied de page Magento n'a pas été conçu pour ajouter des javascripts.

J'ai essayé il y a quelque temps de refactoriser Magento et le bloc de pied de page pour charger chaque JS dans le pied de page au lieu de l'en-tête, mais la façon dont l'appel JS est appelé dans les modèles rend très difficile le fonctionnement.

Ma suggestion pour résoudre votre problème est de mettre à jour votre mise en page comme ceci:

<reference name="before_body_end">
    <block type="core/template" name="controller_tool_javascript" template="fabric/tool/controller_tool_js.phtml"/>
</reference>

Créez un fabric/tool/controller_tool_js.phtmlfichier dans votre dossier de modèles avec le code suivant:

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/fabric/tool/controller_tool.js') ?>"></script>

Faites-moi savoir si cela fonctionne.


11

Le pied de page n'a pas ces fonctionnalités, seulement le headfait que ce bloc est de type page/html_headqui contient ces méthodes.

Vous pouvez y parvenir en plaçant la <script src=...></script>balise JS dans un modèle ( .phtmlfichier) et en l'incluant en tant que core/templatebloc:

<reference name="footer">
    <block type="core/template" name="fabric_controller_tool_js" template="fabric/controller_tool_js.phtml" />
</reference>

Vous pouvez également l'ajouter via un core/textbloc:

<reference name="footer">
    <block type="core/text" name="fabric_controller_tool_js">
         <action method="setText">
             <text><![CDATA[<script src="/js/fabric/tool/controller_tool.js"></script>]]></text>
         </action>
    </block>
</reference>

2

Je veux juste vous dire pourquoi addItemne pas travaillerreference name="footer"

Lorsque vous utilisez reference name="footer"alors il appellera ce bloc

<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml"> 

que vous trouverez page.xmldans votre thème.

cela signifie donc qu'il vérifiera la addItemméthode / fonction dans cette classe de bloc ou dans leur classe parent, mais cette fonction n'est pas là, c'est pourquoi elle ne fonctionnera pas et elle lèvera une exception.


2

<reference name="footer">ne fonctionne pas dans mon cas. J'ai trouvé un bloc plus approprié pour js appelé js:

<reference name="js">
    <block type="core/text" name="fabric_controller_tool_js">
        <action method="setText">
            <text><![CDATA[<script src="/js/fabric/tool/controller_tool.js"></script>]]></text>
        </action>
    </block>
</reference>

Ou via un modèle séparé. chemin: design / adminhtml / default / default / template / sales / order / js.phtml:

<reference name="js">
    <block type="core/template" name="fabric_controller_tool_js" template="sales/order/js.phtml" />
</reference>

1

J'ai utilisé une méthode différente pour réaliser ce que vous cherchez à accomplir. Au lieu de tordre le bras de magento, je charge simplement mon script dans la tête, mais je définis un DOMContentLoadedécouteur d'événement (non pris en charge dans ie8) pour lequel effectue mes tâches.

app / design / frontend / base / default / layout / namespace_module.xml

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.0.1">
  <default>
    <reference name="head">
      <action method="addJs">
        <script>NameSpace/Module/entry.js</script>
      </action>
    </reference>
  </default>
</layout>

app / code / community / NameSpace / Module / etc / config.xml

<?xml version="1.0" encoding="UTF-8"?>
<config>
  <modules>
    <NameSpace_Module>
      <version>0.0.1</version>
    </NameSpace_Module>
  </modules>
  <frontend>
    <layout>
      <updates>
        <module>
          <file>namespace_module.xml</file>
        </module>
      </updates>
    </layout>
  </frontend>
</config>

js / NameSpace / Module / entry.js

document.addEventListener("DOMContentLoaded", function(event) {
  // do something
});

1

Vous pouvez ajouter un nouveau bloc dans page.xml

<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">
    <block type="page/html_head" name="footerjscss" as="footerjscss" after="-" template="page/html/footerjscss.phtml"/>
</block>

puis ajoutez des fichiers JS et CSS dans n'importe quel fichier layout.xml

<reference name="footerjscss">
    <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
    <action method="addItem"><type>skin_css</type><name>css/madisonisland.css</name><params/><if/></action>
</reference>

Créez un fichier .phtml dans la page / html / footerjscss.phtml et ajoutez ce qui suit

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

Maintenant, appelez le bloc dans le modèle de page «3columns.phtml» et etc., vous devrez sortir ce bloc avant la balise:

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

Référez-vous au code ici: http://blog.rahuldadhich.com/magento-load-css-js-footer/

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.