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

15

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?

Chris Morris
fuente
3
posible duplicado de Move all Javascript incluye a antes </body>
Ben Lessani - Sonassi
1
Proporcionar el error que recibió al intentar ver el sitio después de su intercambio podría ayudar a las personas a responder su pregunta.
Alan Storm
3
Además de mover JS al pie de página, estoy bastante seguro de que no desea mover CSS al pie de página. Debería estar adentro <head>.
pspahn
Echa un vistazo a @sonassi que se vincula a mi publicación anterior. Una de las soluciones era correcta y funciona, pero tenga en cuenta que obtiene múltiples archivos JS fusionados cuando habilita la fusión. Esto parece suceder si incluye JS utilizando diferentes manejadores también.
Mark Weston
CSS en el pie. Yuck en la visualización de la página ... Y JS debe hacerse solo para las inclusiones externas que pueden bloquear la visualización de la página. Todo lo que se sirve fuera de su servidor debe estar en la cabeza. Es el marco, el marco se usa mucho en el ensamblaje de la página y debe estar allí antes de que la página comience a representarse. La mayoría de las recomendaciones se siguieron ciegamente sin comprender (culto a la carga) por qué se dañan.
Fiasco Labs

Respuestas:

7

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/

Sander Mangel
fuente
2
Es muy probable que los errores de OP sean causados ​​por la carga fuera de servicio: la mayoría de los scripts en línea requieren prototype et al. Si solo está cargando esto en el pie de página, es demasiado tarde. Eliminar el JS en línea sería el primer paso. Mucho trabajo, buena suerte.
Kristof en Fooman el
4

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.

jharrison.au
fuente
2

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!

Marcio Maciel
fuente
Método mucho más simple que el anterior para agregar scripts js antes de la etiqueta del cuerpo de cierre
asherrard