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.

Vivek Aasaithambi
la source

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.

Raphael chez Digital Pianism
la source
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>
7ochem
la source
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.

Murtuza Zabuawala
la source
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>
Ruslan Mavlyanov
la source
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
});
Benny Powers
la source
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/

Rahul Dadhich
la source