Añadir correctamente .css y .js a PS1.7

[davidddp]

Estoy tratando de añadir a Prestashop 1.7 algunas librerías de css y javascript como puede ser fancybox u otras similares.

 

Pero no estoy seguro donde tengo que añadir:

<link rel="stylesheet" type="text/css" href="jquery.fancybox.css">
<script src="jquery.fancybox.min.js"></script>

Alguien puede indicar si hay algún lugar dedicado para añadir esto?

[Sergio Ruiz]

Imagino que estos dos ficheros:

/themes/classic/templates/_partials/stylesheets.tpl (CSS)
/themes/classic/templates/_partials/javascript.tpl (JavaScript)

De todos modos si son librerias que las quieres cargar siempre, a lo mejor te conviene override del
 

FrontController.php

[davidddp]

Lo he añadido en los dos ficheros así y parece que funciona:

 

/themes/classic/templates/_partials/stylesheets.tpl (CSS)

{foreach $stylesheets.external as $stylesheet}
  <link rel="stylesheet" href="/css/fancybox/jquery.fancybox.min.css" type="text/css" media="{$stylesheet.media}">
{/foreach}

/themes/classic/templates/_partials/javascript.tpl (JavaScript)

{foreach $javascript.external as $js}
  <script type="text/javascript" src="/js/fancybox/jquery.fancybox.min.js" {$js.attribute}></script>
{/foreach}

Está bien añadido? he creado yo el {foreach $javascript.external as $js}...{/foreach} aunque ya había otro creado. No se si es más correcto añadir <script type="text/javascript" src="/js/fancybox/jquery.fancybox.min.js" {$js.attribute}></script> dentro del foreach ya creado o añadir yo uno nuevo.

[Sergio Ruiz]

Lo he añadido en los dos ficheros así y parece que funciona:

 

/themes/classic/templates/_partials/stylesheets.tpl (CSS)

{foreach $stylesheets.external as $stylesheet}
  <link rel="stylesheet" href="/css/fancybox/jquery.fancybox.min.css" type="text/css" media="{$stylesheet.media}">
{/foreach}

/themes/classic/templates/_partials/javascript.tpl (JavaScript)

{foreach $javascript.external as $js}
  <script type="text/javascript" src="/js/fancybox/jquery.fancybox.min.js" {$js.attribute}></script>
{/foreach}

Está bien añadido? he creado yo el {foreach $javascript.external as $js}...{/foreach} aunque ya había otro creado. No se si es más correcto añadir <script type="text/javascript" src="/js/fancybox/jquery.fancybox.min.js" {$js.attribute}></script> dentro del foreach ya creado o añadir yo uno nuevo.

Yo lo pondría fuera del foreach, ya que el foreach es un bucle de por si....

 

¿Te funciona lo que quieres hacer, que imagino que  tiene relacion con tu otro tema dell fancybox para la guia: https://www.prestashop.com/forums/topic/591103-mostrar-guia-de-tama%C3%B1os-en-los-productos-para-ps17/ xD ?

Edited March 6, 2017 by Sergio Ruiz (see edit history)

[joseantgv]

Prueba con:

$this->addJqueryPlugin('fancybox');

Edited March 7, 2017 by joseantgv (see edit history)

[davidddp]

Yo lo pondría fuera del foreach, ya que el foreach es un bucle de por si....

 

¿Te funciona lo que quieres hacer, que imagino que  tiene relacion con tu otro tema dell fancybox para la guia: https://www.prestashop.com/forums/topic/591103-mostrar-guia-de-tamaños-en-los-productos-para-ps17/ xD ?

 

Sí, tiene algo de relación. Aunque ya lo de la tabla de medidas no lo quiero hacer de esa manera. Me gustaría poder mostrar tablas personalizadas para cada producto, que hasta ahora lo he solventado añadiendo una tabla manual en cada producto para salir del paso.

 

Acabo de probar sin el foreach y el css funciona perfectamente fuera pero el js no.

Así funciona:

{foreach $javascript.external as $js}
  <script type="text/javascript" src="/js/fancybox/jquery.fancybox.min.js" {$js.attribute}></script>
{/foreach}

Así no funciona, da error:

<script type="text/javascript" src="/js/fancybox/jquery.fancybox.min.js"></script>

Edito: Con el CSS añadido sin el foreach, no da error pero tampoco funciona correctamente fancybox. Lo he añadido así (sin el foreach):

<link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="media">

Edited March 7, 2017 by davidddp (see edit history)

[davidddp]

 

Prueba con:

$this->addJqueryPlugin('fancybox');

 

Para hacerlo de esta manera ¿Esto donde se añadiría?. He visto algún tutorial de añadirlo de esta manera pero la verdad que no se donde añadirlo porque donde lo he visto, me indican unos archivos que después no se corresponden.

[Sergio Ruiz]

Para hacerlo de esta manera ¿Esto donde se añadiría?. He visto algún tutorial de añadirlo de esta manera pero la verdad que no se donde añadirlo porque donde lo he visto, me indican unos archivos que después no se corresponden.

Lo que te dice Jose de:

$this->addJqueryPlugin('fancybox');

es en el ".php" para que luego se muestre la libreria. (Que en realidad teóricamente lo que te dice jose es  mucho mejor que insertandolo a mano en el tpl)

 

PD: Se refiere al uso de la función (addJqueryPlugin) para poder trabajar con ella.

Edited March 7, 2017 by Sergio Ruiz (see edit history)

[davidddp]

Por el método de Sergio Ruiz solo me funciona bien si lo añado tal y como vine en fancybox, es decir:

//themes/classic/templates/_partials/stylesheets.tpl
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css">

//themes/classic/templates/_partials/javascript.tpl
<script src="jquery.fancybox.min.js"></script>

Pero me da este error, a pesar de ello funciona bien por lo que llevo probado:

 

¿Alguien me puede decir a qué se debe este error?

Edited March 7, 2017 by davidddp (see edit history)

[davidddp]

Lo que te dice Jose de:

$this->addJqueryPlugin('fancybox');

es en el ".php" para que luego se muestre la libreria. (Que en realidad teóricamente lo que te dice jose es  mucho mejor que insertandolo a mano en el tpl)

 

PD: Se refiere al uso de la función (addJqueryPlugin) para poder trabajar con ella.

 

Sí, pero en qué .php debo añadirlo?

 

He visto este tutorial que lo añade de esta forma: https://mypresta.eu/basic-tutorials/cms-fancybox-gallery-prestashop-16-17.html

Pero la verdad es que no coincide con PS1.7 porque en controllers/front/CMSController.php no existe la función setMedia(). Entonces no se como hacerlo de esta manera.

Edited March 7, 2017 by davidddp (see edit history)