Magento agregando CSS y JS incluye al pie de página

Estoy haciendo una optimización de Yslow de mi sitio Magento y estoy tratando de agregar CSS y Js al pie de página del sitio.

En este momento estoy usando una etiqueta de referencia de encabezado en el diseño XML y usando addJsy addCssacciones para incluir todos mis archivos. Intenté cambiar la referencia del encabezado al pie de página, pero recibí un error cuando intenté ver el sitio. ¿Hay alguna manera de hacer esto local.xml o tiene que hacerse codificado en el archivo de plantilla de pie de página?

Sé que esto no es una respuesta a tu pregunta, pero es algo que quizás quieras considerar.

Magento utiliza bastante javascript en línea, especialmente en la página de detalles del producto. Como ese javascript depende de los scripts externos cargados en el encabezado, también deberá mover todos los scripts en línea a archivos externos y agregarlos al pie de página.

Puede ser más rápido y mejor comprimiendo CSS y JS con las herramientas integradas en Magento y utilizando compresión gzip y encabezados de caducidad lejana para acelerarlos. De esa manera, el 'retraso' causado por JavaScript y CSS se mantendría al mínimo sin la necesidad de cambiar el diseño predeterminado de Magento y extensiones de terceros. De esta manera, cuando actualiza su Magento o extensiones, no tiene que rehacer todo el trabajo.

El .htaccess proporcionado por el proyecto HTML5 repetitivo proporciona esta compresión gzip y los encabezados de vencimiento lejano, consulte http://inchoo.net/ecommerce/magento/magento-boilerplate/

El primer paso es crear un bloque llamado "pie" que es esencialmente lo mismo que "cabeza" pero lo sacará en un lugar diferente. Puede agregar esto a su page.xml:

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

Ahora puede agregar JS / CSS (aunque no se recomienda CSS en el pie de página) utilizando este comando en cualquiera de sus archivos 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>

Dentro page/html/foot.phtml:

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

En los archivos de plantilla de página (por ejemplo page/1column.phtml), deberá generar este bloque antes de la etiqueta de cierre del cuerpo:

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

Si está utilizando las plantillas predeterminadas de Magento, obtendrá errores JS. Tome el mini formulario de búsqueda, por ejemplo ( catalogsearch/form.mini.phtml). Tiene este script en línea:

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

Esto se llamará tan pronto como se cargue, ya que no está en ningún manejador listo para documentos. Varien aún no existe porque está en el pie de página, por lo que obtienes un error. Puede solucionar esto agregando un controlador listo para documentos o moviendo todos los JS en línea de esta naturaleza a un archivo externo que también se carga en el pie de página. Problemas como este ocurrirán en todo el sitio, particularmente en las páginas de pago y productos configurables.

El otro problema que puede encontrar es si está utilizando jQuery junto con Prototype en modo noConflict. Deberá asegurarse de que jQuery esté cargado antes de Prototype para que no ocurran conflictos.

Para Magento v1.6 + (necesita probar en versiones anteriores);

1 - crea un archivo de plantilla page/html/footer/extras.phtmlcon este contenido:

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

2 - Agregue este nodo html a su diseño xml:

<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 - ¡Eso es!