Tengo un requisito personalizado para agregar un JS y CSS específico relacionado con el pie de página del sitio web . ¿Hay alguna forma en Magento por la cual pueda agregarlo en la sección de pie de página ?
Tengo un requisito personalizado para agregar un JS y CSS específico relacionado con el pie de página del sitio web . ¿Hay alguna forma en Magento por la cual pueda agregarlo en la sección de pie de página ?
Respuestas:
El footerbloque no ofrece ningún soporte para js directamente, como la cabeza.
Pero hay un bloque con el nombre before_body_enddonde puede agregar todo lo que desee con la plantilla o el bloque de texto.
Mage_Page_Block_Html_HeadPensaría en su propia plantilla y el tipo de bloque , luego puede usar lo que @Dexter recomienda.
No, necesita algo como esto, no tiene un bloque page / html_head para referirse también:
<!-- 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>
Y dentro de su plantilla, necesita:
<?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 de encabezado y pie de página se representa por módulo de página en magento. Para ver las plantillas de encabezado y pie de página, vaya a
app / design / frontend/ <your_package> /<your_theme> /template / page / html / footer.phtml
Eche un vistazo a otros archivos en la carpeta de la página también. Allí puede ver header.phtmlqué sección de encabezado de renderizado de cada página. head.phtmlse usa para agregar archivos js y css que son aplicables para cada página en magento.
También vea los archivos en la carpeta de la página. Esos archivos se procesarán para cada página de acuerdo con la especificación de diseño de una página en particular.
Haga un estudio serio sobre este módulo. Eso te ayudará mucho.
editar
Puede agregar su css y js a través de page.xml. Creo que resolverá tu problema. Ir
app / design / frontend/ <your_package> /<your_theme> / layout / page.xml
y agregue este fragmento de código en su defeault handle. (Puede ver muchos archivos js y css agregados en este identificador. Simplemente agregue este código debajo de esos códigos)
//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>
Eso es. Ahora asegúrese de que sus archivos js y css personalizados estén en la ubicación
skin/frontend/<your_package> /<your_theme>/js/yourjsfile.js
skin/frontend/<your_package> /<your_theme>/css/yourcssfile.css
Buena suerte por tu trabajo.
<action method="addItem"> <type>skin_js</type> <name>js/yourjsfile.js</name> </action>agregará JS en <head> y no en el pie de página!
Use XML para ello. Para agregar Js en el pie de página, llame a la referencia de pie de página. El código se verá así
<reference name="footer">
<action method="addJs"><script>js/file.js</script></action>
</reference>
Para agregar JS en la carpeta de máscara, puede usar el siguiente código
<reference name="footer">
<action method="addItem"><type>skin_js</type><name>js/test.js</name></action>
</reference>
Para agregar css puedes usar el siguiente código xml
<reference name="footer">
<action method="addCss"><stylesheet>css/layout.css</stylesheet></action>
</reference>
o también puedes usar
<reference name="footer">
<action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
</reference>
Para javascript, ¿ha considerado usar solo onload o jquery's $ (document) .ready ()?
Eso le permitiría colocar su código en el encabezado como la configuración típica, pero no ejecutarlo hasta que se cargue el contenido al que hace referencia su js.
Su código js filename.js se vería así:
$(document).ready( function(){
your custom js here
});
El código para su diseño se vería así: (Obviamente, necesitaría agregar los directorios apropiados a medida que los configura).
<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í, hay una forma, pero debe agregar a través del código como se muestra a continuación, agregue este código en la parte inferior del archivo 1column.phtml justo antes del final de la <body>etiqueta.
<script src="<?php echo $this->getSkinUrl('js/jquery.noConflict.js') ?>"></script>
Recomiendo encarecidamente el módulo de velocidad de páginas mediarox para ayudarlo a optimizar su javascript (y css) y mejorar el ranking de información de velocidad de páginas de google.
Funciona analizando la salida html de Magento y luego realizando una acción de cortar y pegar en el código para mover javascript al final del código html. El proceso es rápido, pero se utiliza mejor junto con una caché de página completa para almacenar en caché los cambios de HTML.
Más información sobre cómo funciona este módulo y puede ayudarlo a mejorar el rango de velocidad de página aquí:
http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/