Esiste un modo per aggiungere JS / CSS alla pagina a piè di pagina?

Ho un requisito personalizzato per aggiungere un JS e CSS specifici relativi al piè di pagina del sito Web . C'è un modo in Magento con cui posso aggiungerlo nella sezione piè di pagina ?

Il footerblocco non offre alcun supporto direttamente per js, come la testa.

Ma c'è un blocco con il nome in before_body_endcui puoi aggiungere tutto quello che vuoi con un modello o un blocco di testo.

Vorrei pensare al tuo modello e al tipo di blocco Mage_Page_Block_Html_Head, quindi puoi usare ciò che @Dexter ha raccomandato.

No, hai bisogno di qualcosa del genere, non hai nessun blocco page / html_head a cui fare riferimento:

<!-- 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>

E all'interno del tuo modello, hai bisogno di:

<?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() ?>

La parte di intestazione e piè di pagina viene visualizzata dal modulo Pagina in magento. Per vedere i modelli di intestazione e piè di pagina, vai a

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

Dai un'occhiata anche ad altri file nella cartella della pagina. Lì puoi vedere header.phtmlquale sezione dell'intestazione di rendering di ogni pagina. head.phtmlutilizzare per aggiungere file js e css che sono applicabili per ogni pagina di magento.

Vedi anche i file nella cartella della pagina. Questi file verranno renderizzati per ogni pagina in base alle specifiche del layout di una determinata pagina.

Fai uno studio serio su questo modulo. Ti aiuterà molto.

modificare

Puoi aggiungere i tuoi CSS e JS attraverso page.xml. Penso che risolverà il tuo problema. Vai a

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

e aggiungi questo snippet di codice nel suo defeault handle. (Puoi vedere molti file js e css aggiunti in questo handle. Basta aggiungere questo codice sotto quei codici)

 //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>

Questo è tutto. Ora assicurati che i tuoi file js e css personalizzati siano nella posizione

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

Buona fortuna per il tuo lavoro.

Usa XML per questo. Per aggiungere J nel piè di pagina, chiama il riferimento del piè di pagina. Il codice sarà simile a questo

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

Per aggiungere JS nella cartella skin è possibile utilizzare il seguente codice

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

Per aggiungere CSS puoi usare il seguente codice XML

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

oppure puoi anche usare

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

Per javascript, hai mai considerato di usare onload o jquery's $ (document) .ready ()?

Ciò consentirebbe di inserire il codice nell'intestazione come l'impostazione tipica, ma non di eseguirlo fino a quando non viene caricato il contenuto a cui fa riferimento js.

Il tuo codice js nomefile.js sarebbe simile a:

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

Il codice per il layout sarebbe simile al seguente: (Dovresti ovviamente aggiungere le directory appropriate quando le hai impostate.)

<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>

Sì, esiste un modo, ma è necessario aggiungere un codice come di seguito, aggiungere questo codice in fondo al file 1column.phtml appena prima della fine del <body>tag.

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

Consiglio vivamente il modulo mediarox pagepeed per aiutarti a ottimizzare il tuo javascript (e css) e migliorare il posizionamento delle informazioni sulla velocità della pagina di Google.

Funziona analizzando l'output HTML da Magento e quindi eseguendo un'azione taglia e incolla sul codice per spostare javascript nella parte inferiore del codice HTML. Il processo è veloce ma è meglio utilizzato insieme a una cache di pagina intera per memorizzare nella cache le modifiche html.

Maggiori informazioni su come funziona questo modulo e possono aiutarti a migliorare il ranking della velocità della pagina qui:

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