Jump to content

Insertar código PHP y CSS en header.tpl

JesseNaylor

By JesseNaylor
in Discusión general

 Share

Recommended Posts

JesseNaylor Newbie

JesseNaylor

Posted
Posted

¡Hola! Éste es mi primer post en el foro. He recurrdio a esto porque pienso que tiene que haber una manera sencilla de solucionar mi problema, y que no requiera la programación de un complejo módulo de PrestaShop.

 

Estoy personalizando una instalación de PrestaShop y tengo preparadas unas pequeñas "inyecciones" de código PHP y CSS que me permitirán mostrar una imagen de fondo aleatoria a pantalla completa en la tienda, de modo que cada vez que un usuario navegue por la tienda, en cada página le aparecerá una imagen de fondo distinta, ocupando la totalidad de la pantalla.

 

Para ello, tengo un códgo PHP que necesito cargar antes o dentro del <head>, similar a esto:

 

<?php
$bg = array('img_001.jpg', 'img_002.jpg', ... 'img_044.jpg'); // array de nombres de archivo
$i = rand(0, count($bg)-1); // generamos un número aleatorio del array
$selectedBg = "$bg[$i]"; // fijamos una variable con la imagen aleatoria generada
?>

 

y luego, antes de que termine el </head>, necesito insertar este otro pequeño trozo de CSS que contiene un poquito de PHP:

 

<style type="text/css">
<!--
html {
background: url(<?php echo $selectedBg; ?>) no-repeat center center fixed black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
-->
</style>

 

Por favor, PrestaShop me encanta y estoy convencido de que tiene que haber una manera sencilla de realizar esta leve modificación. Si no fuese PrestaShop, probablemente lo tendría resuelto en 30 segundos, pero aquí me pierdo un poco. Estoy pegado en smarty y me gustaría solucionar esto sin tener que aprender a programar un complejísimo módulo.

 

¡Mil gracias de antemano por vuestra ayuda! :D

  • Like 1
Link to comment
Share on other sites
JesseNaylor Newbie

JesseNaylor

Posted
  • Author
Posted

Hola JesseNaylor, bienvenido al foro.

 

No creo que sea complejo en crear este módulo. Aquí tienes la documentación básica http://doc.prestasho...estaShop+module... anímate!

 

Saludos

 

Muchas gracias por tu respuesta, Statictic.

 

La verdad es que, antes de colgar mi post en el foro, ya había probado a crear un módulo puesto que tenía entendido que sería la manera más sencilla de solucionar lo que esta intentando. De hecho, estuve siguiendo justo el tutorial que me mandas. Lo que pasa es que, teniendo ya mi módulo creado e instalado, llegué al punto en el que elijo el Hook para que salga en la columna izquierda o derecha, y ahí es donde desistí del tutorial, puesto que no quiero mostrar ningún tipo de contenido como si fuese un módulo estándar sino que quiero, tal y como explicaba en mi post, editar el código de header.tpl.

 

Hasta aquí llegué con la programación de mi módulo (randomfullscreenbgimg.php):

<?php
if (!defined('_PS_VERSION_'))
 exit;
class RandomFullScreenBgImg extends Module
{
public function __construct()
 {
 $this->name = 'randomfullscreenbgimg';
 $this->tab = 'Imágenes de Fondo LCSH';
 $this->version = 0.1;
 $this->author = 'Jesse Naylor [theRoom1.0]';
 $this->need_instance = 0;

 parent::__construct();

 $this->displayName = $this->l('Random Full Screen Background Images');
 $this->description = $this->l('Un módulo creado por [theRoom1.0] para generar imágenes de fondo aleatorias');
 }

public function install()
 {
 if (parent::install() == false)
  return false;
 return true;
 }
}
?>

y los dos trozos de código que quiero insertar en header.tpl son los que aparecen arriba en mi primer post.

 

Quizás tendría que haber empezado diciendo que ya tengo mi módulo creado y que ahora necesito saber cómo hacer que este módulo "inyecte" esos dos trozos de código PHP y CSS en mi header.tpl... Porque en el tutorial estándar no veo suficiente información, y como decía no me veo capacitado para aprender todo lo necesario sobre smarty y PrestaShop como para poder desarrollar esto sin ayuda.

 

Eso sí, a lo mejor he llegado a un punto (tener creado e instalado mi módulo básico) en el que, con un poquito de ayuda externa (tuya o de otros miembros del foro), quizás es muy fácil añadir un poco de código al módulo que he creado para así conseguir mi objetivo de añadir código a header.tpl.

 

¡Ayuda, por favor! :D

 

(Al que me ayude, si quiere, lo que podría ofrecerle a cambio es añadir su nombre en los "créditos" de mi pequeño módulo, jeje)

 

De nuevo, muchas gracias de antemano.

Link to comment
Share on other sites
JesseNaylor Newbie

JesseNaylor

Posted
  • Author
Posted

Buenas, no es necesario que uses los hooks para las columnas, el que te interesa es el hookHeader:

public function hookHeader( $params )
{
 //Tu código...
 //Tu css...
}

 

Ahora, ¿comó piensas gestionar las imagenes que uses de fondo?...

Necesitarias desarrollar la función getContent() creando un formulario y tabla para poder gestinarlas. Subir imágenes, eliminarlas, posiciones, etc...

 

Saludos

 

Gracias de nuevo por tu respuesta, Statictic, pero debo ser más lerdo en esto de lo que piensas... Obviamente me he puesto a intentar resolverlo con la información que me has pasado pero no lo consigo.

 

Dime, por favor,

1) si tengo que escribir algo en header.tpl para que mi código aparezca.

2) si el código del archivo PHP principal de mi módulo se quedaría así, o si tendría que cambiar algo:

 

<?php
if (!defined('_PS_VERSION_'))
 exit;
class RandomFullScreenBgImg extends Module
{
public function __construct()
 {
 $this->name = 'randomfullscreenbgimg';
 $this->tab = 'Imágenes de Fondo LCSH';
 $this->version = 0.1;
 $this->author = 'Jesse Naylor [theRoom1.0]';
 $this->need_instance = 0;

 parent::__construct();

 $this->displayName = $this->l('Random Full Screen Background Images');
 $this->description = $this->l('Un módulo especial creado por [theRoom1.0] para LCSH para generar imágenes de fondo aleatorias');
 }

public function install()
 {
 if (parent::install() == false)
  return false;
 return true;
 }
}

public function hookHeader( $params )
 {
// mi código PHP:
$bg = array('img_001.jpg', 'img_002.jpg', ... 'img_044.jpg'); // array de nombres de archivo
$i = rand(0, count($bg)-1); // generamos un número aleatorio del array
$selectedBg = "$bg[$i]"; // fijamos una variable con la imagen aleatoria generada
// mi código CSS:
echo "<style type=\"text/css\">
<!--
html {
background: url(".$selectedBg.") no-repeat center center fixed black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
-->
</style>"
 }
?>

 

Ni siquiera sé si necesito hacer echo o pasar una variable o luego llamarlas de alguna manera. No sé si necesito tener más archivos (algún .tpl en mi módulo, otro archivo CSS o PHP, etc).

 

Muchas gracias de nuevo y discúlpame pero, de verdad, estoy pegado en esto.

Link to comment
Share on other sites
JesseNaylor Newbie

JesseNaylor

Posted
  • Author
Posted

Vale, ¡he avanzado mucho desde mi último post! Hasta el momento he conseguido que mi módulo añada el siguiente código a mi archivo header.tpl:

 

<!-- RandomFullScreenBackgroundImage -->
<style type="text/css">
<!--
html {
background: url(themes/lcsh/img/fondos/) no-repeat center center fixed black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
-->
</style>
<!-- /RandomFullScreenBackgroundImage -->

 

El código que aparece en el archivo PHP principal de mi módulo que consigue esto es el siguiente:

 

public function hookHeader($params)
 {
  global $smarty;
  $LCSHbg = array('img_001.jpg', 'img_002.jpg', (...aquí voy a obviar el array de archivos que tengo para mis imágenes de fondo...), ...'img_077.jpg'); // array of filenames
  $i = rand(0, count($LCSHbg)-1); // generate random number size of the array
  $LCSHselectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
  $LCSHrandomBgCss = "<style type=\"text/css\">\r\n";
  $LCSHrandomBgCss .= "<!--\r\n";
  $LCSHrandomBgCss .= "html {\r\n";
  $LCSHrandomBgCss .= " background: url(themes/lcsh/img/fondos/";
  $LCSHrandomBgCss .= $LCSHselectedbg;
  $LCSHrandomBgCss .= ") no-repeat center center fixed black;\r\n";
  $LCSHrandomBgCss .= " -webkit-background-size: cover;\r\n";
  $LCSHrandomBgCss .= " -moz-background-size: cover;\r\n";
  $LCSHrandomBgCss .= " -o-background-size: cover;\r\n";
  $LCSHrandomBgCss .= " background-size: cover;\r\n";
  $LCSHrandomBgCss .= "}\r\n";
  $LCSHrandomBgCss .= "-->\r\n";
  $LCSHrandomBgCss .= "</style>\r\n";
  $smarty->assign('LCSHcss', $LCSHrandomBgCss);
  return $this->display(__FILE__, 'randomfullscreenbgimg-header.tpl');
 }

 

OK, lo único que no consigo es que se mande el valor de mi variable $LCSHselectedbg a mi archivo randomfullscreenbgimg-header.tpl, ¿por qué? ¿Tengo que hacer algo para que llegue esa variable hasta allí? El contenido del archivo TPL es el siguiente:

 

<!-- RandomFullScreenBackgroundImage -->
{$LCSHcss}
<!-- /RandomFullScreenBackgroundImage -->

 

¿Qué me falta? ¡Ya casi estoy! :'D

Link to comment
Share on other sites
JesseNaylor Newbie

JesseNaylor

Posted
  • Author
Posted

¡Dios mío... ¡¡¡tenía una falta de ortografía!!! Jajaja...

 

Antes de nada debo decir que me ha costado muchísimo trabajo llegar hasta este punto, pero ya funciona todo. Mi error era que cuando definía mi variable 

$LCSHselectedBg = "$bg[$i]";

, no había escrito correctamente el nombre del Array (que tendría que haber puesto $LCSHbg).

 

¡Muchas gracias por la ayuda! A pesar de que al final, tras mucho esfuerzo, lo he conseguido resolver, la ayuda recibida ha sido muy útil. ¡Un saludo! :D

Link to comment
Share on other sites
JesseNaylor Newbie

JesseNaylor

Posted
  • Author
Posted (edited)

Bueno, para dar por cerrado este post, explico resumidamente qué es lo que hay que hacer cuando quieres insertar contenido en el header (entre las etiquetas y de tu PrestaShop).

 

1) Necesitas crear un módulo por narices (no hay otra manera factible de conseguir tu objetivo). Para ello, puedes seguir la documentación paso por paso que aparece aquí http://doc.prestashop.com/display/PS15/Creating+a+PrestaShop+module; pero, resumiendo los pasos, esto significa lo siguiente:

 

1) Ve a la carpeta "modules" de tu instalación de PrestaShop, y crea un directorio con el nombre que va a tener tu módulo (vamos a usar como ejemplo un módulo llamado Mi Módulo), "mimodulo".

2) Dentro de ese directorio, necesitas un archivo de 16x16px llamado "logo.gif", un archivo PHP con exactamente el mismo nombre que el directorio, "mimodulo.php", y otro archivo TPL "mimodulo-header.tpl".

3) El archivo PHP va a contener, aproximadamente, el siguiente código:

<!--?php
if (!defined('_PS_VERSION_'))
 exit;
class MiModulo extends Module
{
public function __construct()
 {
 $this--->name = 'mimodulo';
 $this->tab = 'Etiqueta donde va mi módulo';
 $this->version = 0.1;
 $this->author = 'Tu nombre como autor';
 $this->need_instance = 0;

 parent::__construct();

 $this->displayName = $this->l('Nombre para mostrar de Mi Módulo');
 $this->description = $this->l('Descripción de Mi Módulo');
 }

public function install()  
 {  
  if (parent::install() == false OR !$this->registerHook('header'))   
 return false;  
  return true;  
 }

public function hookHeader($params)
 {
  global $smarty;
  // Variables o código PHP que queramos insertar
  // Código CSS que queramos insertar
  $smarty->assign('MiVariableoString1', $MiVariableoString1);
  $smarty->assign('MiVariableoString2', $MiVariableoString2);
  return $this->display(__FILE__, 'mimodulo-header.tpl');
 }

}

4) Si os fijáis, si queremos enviar variables o contenidos desde el archivo PHP hasta nuestro PrestaShop, tenemos que mandar esas variables o contenido a un archivo TPL para poder mostrarlos. Para ello, usamos las líneas $smarty->assign('MiVariableoString1', $MiVariableoString1); que sirven para coger ese contenido de PHP y pasárselo al Smarty. Una vez que lo hemos definido bien, podemos mostrar el contenido en nuestro archivo "mimodulo-header.tpl", el cual quedaría así:

<!-- Mi Módulo (ejemplo de cómo mostramos variables o Strings) -->
{$MiVariableoString1}{$MiVariableoString2}
<!-- /Mi Módulo -->

 

En teoría eso es lo único que hace falta. Ignoro si había ya en el foro un hilo que tuviese exactamente este tema, pero si no lo había, ahora creo que ya se queda solucionado por si algún alma en apuros se topa con el mismo problema que tuve yo.

Edited by JesseNaylor (see edit history)
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...