¿Hay alguna forma de agregar JS / CSS a la página de pie de página?

9

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 ?

marca
fuente
He escrito el blog para este tema. Consulte aquí: blog.rahuldadhich.com/magento-load-css-js-footer
Rahul Dadhich

Respuestas:

17

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() ?>
Fabian Blechschmidt
fuente
gracias por la respuesta @fabian blechschmidt. Agregué algo como esto pero sin suerte y excepción también. <default> <reference name = "before_body_end"> <action method = "addItem"> <type> skin_js </type> <name> js / test.js </name> <params /> </action> </ reference > </default>
Marque
actualizado la respuesta, necesitas un bloque!
Fabian Blechschmidt
eres el HOMBRE !!! Felicitaciones ... Muchas gracias por la respuesta ... Pero me alegraré si me explicas un poco sobre el código también para una mejor comprensión ...
Mark
Se agregaron algunos comentarios. Si tiene más preguntas,
hágalas.
1
el nombre correcto del bloque es: <reference name = "before_body_end"> y no <reference name = "before_body_ends">
Tomas Dermisek
3

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.

Rajeev K Tomy
fuente
No trabajo con page.xml . En mi local.xml , tengo que incluir el uso del método xml. Su publicación editada solo sugiere cómo puedo agregar un JS / CSS en archivos xml (que no es la pregunta).
Marcar
@ Mark: en su qn, no hay ninguna pista para usar el archivo local.xml para su trabajo Su qn exige que necesite agregar js y css al pie de página. Mi actualización hará ese trabajo perfectamente. De alguna manera, ¿por qué necesita el archivo local.xml para este propósito?
Rajeev K Tomy
Siendo un desarrollador de Mage que mantiene estándares, ¿por qué alguien usaría page.xml? ¡Su código <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!
Mark
2

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>
Diestro
fuente
Método no válido Mage_Page_Block_Html_Footer :: addJs
Mark
@ Mark: Eso sucede porque la clase Footer no tiene un método llamado "addJs". Para obtener más información, eche un vistazo a esto: magento.stackexchange.com/questions/15904/…
pablofiumara
2

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>
zeusstl
fuente
1

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>
Keyul Shah
fuente
Mal consejo, porque no quieres copiar tu código en todas las plantillas.
Fabian Blechschmidt
no podemos agregar js en el pie de página a través de xml, así que uso este flujo.
Keyul Shah
1
Mira mi respuesta. El flujo resuelve el problema, pero debe copiar el código en cada plantilla raíz.
Fabian Blechschmidt
1

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/

paj
fuente