Acceder al contenido principal

Blog

Volver a Blog

Modificar archivo js incluido en un tema padre

03 Mar 017
drupal
Avatar José Carlos Lucio

Drupal

Hoy vamos a explicaros como podemos modificar un fichero .js incluido en un tema padre en una web realizada con drupal 7.

Imaginamos que tenemos una función en un fichero .js incluido en un tema padre (en nuestro caso un tema contribuido como podría ser bootstrap) que no queremos que se aplique en nuestro tema hijo, ¿cómo podríamos hacerlo?

Una de las opciones sería copiar ese fichero js en nuestro tema hijo, eliminar la parte de código (en el fichero copiado a nuestro tema hijo) que no queremos que se ejecute (En nuestro caso la función que dijimos antes) y posteriormente hacer uso de hook_js_alter()  añadiéndolo a nuestro fichero template.php del tema hijo.

* Este hook nos permite realizar las modificaciones necesarias en los js antes de que sean cargados en la página.

Lo primero a hacer sería sacar los valores que nos llegan a $javascript , con dsm(), xdebug... por ejemplo usando dsm($javascript) dentro del hook veremos algo parecido a esto (repetido muchas veces con varias claves):
 

before_modify_js


una vez sabemos que clave del array es la que contiene el path hasta el js del tema padre lo que haremos será modificar ese path por el path hasta el nuevo fichero js contenido en nuestro subtema hijo. (En nuestro ejemplo la clave sería sites/all/themes/theme_padre/js/theme.js siendo este el js que queremos modificar)

Una vez dentro el código quedaría similar:

/** 
 * Implements hook_js_alter(&$javascript)
 */
nombredemisubtema_js_alter(&$javascript) { 
// Mostramos claves antes de modificarlos.
dsm($javascript);
$javascript [drupal_get_path('theme','theme_padre').'/js/theme.js']['data'] = drupal_get_path('theme', 'subtheme') . '/js/theme.js';
// Mostramos claves después de modificarlos.
dsm($javascript); 
}



Como podémos observar en esta imagen la ruta hacia el js ha cambiado y por tanto ahora estamos usando nuestro .js del tema hijo que sustituye al del tema padre.

after_modify_js

 Hasta la próxima entrada del blog, espero que os valga de ayuda !

Comentarios

Añadir nuevo comentario