Magento che aggiunge CSS e JS include nel piè di pagina

Sto eseguendo l'ottimizzazione di Yslow del mio sito Magento e sto cercando di aggiungere CSS e Js a piè di pagina del sito.

Al momento sto usando un tag di riferimento principale nel layout XML e utilizzo addJse addCssazioni per includere tutti i miei file. Ho provato a scambiare il riferimento principale al piè di pagina, ma mi è stato dato un errore quando ho provato a visualizzare il sito. Esiste un modo per farlo local.xml o deve essere fatto hardcoded nel file modello footer stesso?

layout javascript css

— Chris Morris
fonte

possibile duplicato di Sposta tutto Javascript incluso prima </body>

— Ben Lessani - Sonassi

Fornire l'errore che hai ricevuto durante il tentativo di visualizzare il sito dopo lo scambio potrebbe aiutare le persone a rispondere alla tua domanda.

— Alan Storm,

Oltre a spostare JS nel piè di pagina, sono abbastanza sicuro che non vuoi spostare CSS nel piè di pagina. Dovrebbe essere dentro <head>.

— pspahn,

Dai un'occhiata al link @sonassi al mio post precedente. Una delle soluzioni era corretta e funziona, ma tieni presente che ottieni più file JS uniti quando abiliti l'unione. Questo sembra accadere se includi anche JS usando diversi handle.

— Mark Weston,

CSS nel piede. Yuck on page display ... E JS dovrebbe essere fatto solo per inclusioni esterne che possono bloccare la visualizzazione della pagina. Tutto ciò che viene servito dal tuo server dovrebbe essere nella testa. È framework, framework è ampiamente utilizzato nell'assembly di pagina e dovrebbe essere lì prima che la pagina inizi a renderizzare. La maggior parte delle raccomandazioni ciecamente seguite senza capire (culto del carico) perché danneggi.

— Fiasco Labs,

Risposte:

So che questa non è una risposta alla tua domanda, ma qualcosa che potresti voler considerare comunque.

Magento utilizza un bel po 'di javascript incorporato, specialmente nella pagina dei dettagli del prodotto. Poiché javascript dipende da script esterni caricati nell'intestazione, dovrai spostare anche tutti gli script incorporati in file esterni e aggiungerli nel piè di pagina.

Potresti essere più veloce e migliore comprimendo CSS e JS con gli strumenti integrati in Magento e usando le intestazioni di compressione gzip e scadenza lontana per accelerarli. In questo modo il "ritardo" causato da JavaScript e CSS verrebbe ridotto al minimo senza la necessità di modificare il layout predefinito di estensioni di Magento e di terze parti. In questo modo, quando aggiorni Magento o estensioni, non devi ripetere tutto il lavoro.

Il .htaccess fornito dal progetto HTML5 boilerplate fornisce questa compressione gzip e le intestazioni di scadenza remota, si prega di consultare http://inchoo.net/ecommerce/magento/magento-boilerplate/

— Levigatrice
fonte

Gli errori di OP sono molto probabilmente causati dal caricamento fuori servizio - la maggior parte degli script in linea richiede prototype et al. Se lo stai caricando solo nel piè di pagina, è troppo tardi. Rimuovere il JS in linea sarebbe il primo passo. Molto lavoro - buona fortuna.

— Kristof a Fooman il

Il primo passo è creare un blocco chiamato "foot" che è essenzialmente lo stesso di "head" ma lo emetterai in un punto diverso. Puoi aggiungere questo al tuo page.xml:

    <block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>

Ora puoi aggiungere JS / CSS (anche se i CSS nel piè di pagina non sono consigliati) usando questo comando in uno qualsiasi dei tuoi file XML:

    <reference name="foot">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/somefile.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/main.js</name>
        </action>
    </reference>

All'interno page/html/foot.phtml:

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>

Nei file del modello di pagina (ad es. page/1column.phtml) Dovrai generare questo blocco prima del tag body di chiusura:

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

Se stai utilizzando i modelli Magento predefiniti otterrai errori JS. Prendi ad esempio il mini modulo di ricerca ( catalogsearch/form.mini.phtml). Ha questo script incorporato:

<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search Redset...') ?>');
    //]]>
</script>

Questo verrà chiamato non appena viene caricato, poiché non è presente in nessun gestore di documenti pronto. Varien non esiste ancora perché è nel piè di pagina, quindi viene visualizzato un errore. È possibile risolvere questo problema aggiungendo un gestore pronto per il documento o spostando tutti i JS in linea di questa natura in un file esterno che viene anche caricato nel piè di pagina. Problemi come questo si verificano in tutto il sito, in particolare nella pagina di checkout e nelle pagine dei prodotti configurabili.

L'altro problema che potresti riscontrare è se stai usando jQuery insieme a Prototype in modalità noConflict. Devi assicurarti che jQuery sia caricato prima di Prototype in modo che non si verifichino conflitti.

— jharrison.au
fonte

Per Magento v1.6 + (è necessario testare nelle versioni precedenti);

1 - crea un file modello page/html/footer/extras.phtmlcon questo contenuto:

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

2 - Aggiungi questo nodo html al tuo xml di layout:

<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 - Questo è tutto!

— Marcio Maciel
fonte

Metodo molto più semplice di quanto sopra per aggiungere script js prima del tag body di chiusura

— asherrard