Cómo agregar archivos css y js personalizados después de ciertos archivos predeterminados

Question

Sabemos que todos los archivos css/js agregados por page.xml en default handle son globales, están cargados en todas las páginas.

Cuando agrego algunos archivos css y js en un identificador específico (p. ej. catalog_category_default), se agregan en la parte superior de la cabeza, antes que todos los globales.Pero quiero agregarlos DESPUÉS.

¿Cómo agregar css/js después de archivos globales?

Answer 1

Al investigar, encontré algunas respuestas y tutoriales que me sugieren piratear el código Core.P.ej:agregar algunas funciones adicionales como addItemAfter($after, ...), addItemFirst(...)

Pero creo que no es la solución ideal.

Al mirar en Mage_Page_Block_Html_Head clase, función getCssJsHtml, encontré esta línea:

$lines[$if][$item['type']][$params][$item['name']] = $item['name'];

Significa que los archivos css/js están agrupados por su condición.Los archivos con la misma condición se agregan al mismo grupo.

Entonces, creo que puedes usar la condición del archivo como un gancho.

De acuerdo a documento MSDN, puedes usar algunos comentarios condicionales como este:

<!--[if (gte IE 9) | (IEMobile)]><!-->

O si quieres que siempre sea verdadero, simplemente usa <!--[if true]><!-->

Vamos.

Primero, declara los anzuelos.

1. Cree un archivo js en blanco (o un archivo css).P.ej: skin/frontend/your_package/your_theme/js/blank.js.Déjalo contenido vacío.
2. Abierto app/design/frontend/your_package/your_theme/layout/page.xml
3. En el identificador predeterminado (<default translate="label" module="page">), bloquear head, busque los últimos archivos js actuales (o archivos css si lo desea), agregue:

<action method="addItem"> <type>skin_js</type> <name>js/blank.js</name> <params/> <if><![CDATA[<!--[if true]><!-->]]></if> </action>

Debe especificar un nombre de archivo, porque es solo un enlace, use un archivo en blanco, para que no afecte el rendimiento, especialmente cuando activa el modo Combinar.

En segundo y último lugar, utiliza los ganchos.

En su identificador específico, por ejemplo. catalog_category_default (Página de categoría), agregue el archivo js/css con la misma condición que acaba de declarar.

<reference name="head"> <action method="addItem"> <type>skin_js</type> <name>js/your.custom.js.file.js</name> <params/> <if><![CDATA[<!--[if true]><!-->]]></if> </action> </reference>

Ahora, cargue una página de categoría y vea su fuente.Verás:

<!--[if true]><!-->
<script type="text/javascript" src="http://example.com/skin/frontend/your_package/your_theme/js/blank.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/your_package/your_theme/js/your.custom.js.file.js"></script>
<!--<![endif]-->

Su archivo personalizado se carga en las mismas condiciones que el gancho.Debido a que el gancho está en la parte inferior de los archivos predeterminados, su archivo personalizado también está en la parte inferior.

Está hecho.

PD:No sé si es válido, pero en realidad puedes usar cualquier condición, como esta <!--[if hook_one]><!-->, <!--[if hook_two]><!-->

Entonces, siempre que desee agregar archivos js/css en el lugar deseado, simplemente vaya a la página raíz (o página principal), declare un enlace y luego úselo en un identificador personalizado.Es sencillo.