[SOLUCIONADO] Pasar variable de Smarty a JS

[Nalena]

¡Hola a todos!

Quería ver si me podéis echar una mano. Necesito que a la hora de ver los atributos en el producto, cuando es una textura al pasar el ratón por encima se me vea en el bloque de al lado en grande. Haciendo pruebas con una imagen cualquier funciona correctamente pero no cuando lo intento hacer con las variables que forman las imágenes de textura por lo que creo que lo que me ocurre es que no me están pasando bien al codigo JS.

Siendo el código que forma la imagen este:

<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20"  />

Las tengo declaradas tal que así pero no hay forma, ¿alguna ayuda? :/

var imgdir = "{$img_col_dir}";
var imgatt = "{$id_attribute|intval}";

 

Edited March 12, 2019 by Nalena (see edit history)

[joseantgv]

1 hour ago, Nalena said:

¡Hola a todos!

Quería ver si me podéis echar una mano. Necesito que a la hora de ver los atributos en el producto, cuando es una textura al pasar el ratón por encima se me vea en el bloque de al lado en grande. Haciendo pruebas con una imagen cualquier funciona correctamente pero no cuando lo intento hacer con las variables que forman las imágenes de textura por lo que creo que lo que me ocurre es que no me están pasando bien al codigo JS.

Siendo el código que forma la imagen este:

<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20"  />

Las tengo declaradas tal que así pero no hay forma, ¿alguna ayuda? 😕

var imgdir = "{$img_col_dir}";
var imgatt = "{$id_attribute|intval}";

 

Pero ese TPL con el JS dónde está? En un fichero tuyo que lo añades desde un hook? Seguramente esa variable Smarty todavía no esté asignada cuando procesas el TPL y tengas que hacer tú la asignación.

[gusman126]

Yo uso 2 opciones,

esta en los TPL

<script>
  var $tokendb = '{$tokendbup}';
</script>

Antes en el php modulo 

$this->context->smarty->assign('tokendbup', $tokendbup);

Tambien sirve si pones en el tpl

{addJsDef $tokendbup=$tokendbup}

Esta no lo he probado, pero creo que es para variables de texto que se pueden traducir

{addJsDefL name=customizationIdMessage}{l s='Customization #' mod='blockcart' js=1}{/addJsDefL}

 

Esta segunda opcion la uso para añadirla al Backoffice del prestashop, añadiendo el codigo en el fichero php del modulo

public function hookActionAdminControllerSetMedia()
    {
Media::addJsDef(array('$tokendbup' =>  $tokendbup));
}

 

Edited November 15, 2018 by gusman126 (see edit history)

[gusman126]

He visto lo que quieres hacer

• Vas a usar un modulo desarrollado por ti?

Vas a necesitar añadir todas las variables a tu modulo y asignarlas

• o vas a modificar los ficheros product.tpl y los demás para hacer lo que quieres?

comprueba los nombres de las variables en el mismo fichero que estas usando y añade el script para asignarlas y usarlas en javascript o jquery

 

[Nalena]

¡Hola! Antes que nada mil gracias a los dos por contestar.

Realmente no pretendo hacer ningun módulo, o espero no necesitarlo, en principio pensaba que sería algo sencillo pero igual se complica la cosa...

Realmente estaba añadiendo el par de línas de JS en el archivo product.tpl Como comenté, si pongo una imagen cualquiera me la toma, pero no con las variables que forman los atributos de texturas por lo que supongo que el código JS no me anda tomando bien las variables.

Este código está en el archivo product.tpl y dejo en negrita las variables en cuestión:

<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20"  />

Y arriba del archivo simplemente pongo el código:
 

// Funciona
document.getElementById("test").innerHTML='<img src="http://localhost/ps16119/themes/modern_fashion/img/test.jpg" width="250" height="250"/>';

// Así no
var imgdir = "{$img_col_dir}";
var imgatt = "{$id_attribute|intval}";
document.getElementById("test").innerHTML='<img src="' + imgdir + imgdiratt +'.jpg" width="20" height="20"';

Realmente no sé si el código estará mejor o peor, pero la primera parte funciona jajajaja

[gusman126]

Añade el siguiente codigo en el fichero /themes/classic/templates/catalog/_partials/product-cover-thumbnails.tpl

Despues de probar en product.tpl y otro, en este tambien ha funcionado bien product-details.tpl

 

<script>
window.onload = function()
{
$(document).ready(function() {   
var imgdir = "{$img_col_dir}";
var imgatt = "{$id_attribute|intval}";
document.getElementById("test").innerHTML='<img src="' + imgdir + imgatt +'.jpg" width="20" height="20"';
});
}
</script>

Recuerda añadir el elemento "test" , cuadro o donde quieras que se muestre

 

Pero esto no va ha hacer que al pasar por el raton haga algo

Edited November 15, 2018 by gusman126 (see edit history)

[Nalena]

No tengo esa ruta ni ningún archivo que se llame así, supongo que es porque estoy usando la versión 1.6 :S

[gusman126]

hace 9 minutos, Nalena dijo:

No tengo esa ruta ni ningún archivo que se llame así, supongo que es porque estoy usando la versión 1.6 :S

entonces, SI usa product.tpl

[Nalena]

Vale, entonces si quiero que se muestre con el mouseover teniendo este código:

<img src="{$img_col_dir}{$id_attribute|intval}.jpg" onmouseover="show()" />

Añado el código conforme me diste pero llamando a la función...

window.onload = function() {
 $(document).ready(show() {
...
  });
 }
 

Y... debería de funcionar pero no T.T

[gusman126]

pues ni idea, eso ya deberas hacer pruebas directamente en la consola, 

Teniendo las variables en la memoria del explorador puedes hacer pruebas directamente añadiendo el codigo en la consola, es lo que yo hago cuando necesito ver si un codigo java funciona sin tener que ir al fichero y cambiando cada 2x3 y actualizando

 

 

 

[Nalena]

Bueno, lo anterior está arreglado, era fallo mio :/ Estando el código bien pruebo con las variables y nada, pruebo con una ruta completa bien  Seguiré dando vueltas a ver qué puedo hacer... Mil gracias por la ayuda!

[gusman126]

hace 3 minutos, Nalena dijo:

Bueno, lo anterior está arreglado, era fallo mio 😕 Estando el código bien pruebo con las variables y nada, pruebo con una ruta completa bien  Seguiré dando vueltas a ver qué puedo hacer... Mil gracias por la ayuda!

pues deberas comprobar si esta leyendo y aplicando bien las variables, usa un console.log()

[Nalena]

No, si es que el problema está ahí, al hacerlo simplemente me muestra "{$img_col_dir}"; {$id_attribute|intval}";  Por lo que no sé si tengo que declarar esas variables en otro sitio, de diferente forma o qué narices pasa u.u 

[gusman126]

Usando 

<script>
window.onload = function()
{
$(document).ready(function() {   
var imgdir = "{$img_col_dir}";
var imgatt = "{$id_attribute|intval}";
console.log('Aqui la variable imgdir->'+imgdir+'<-');
console.log('Aqui la variable imgatt->'+imgatt+'<-');
});
}
</script>

me muestra en la consola

[Nalena]

Pf, lo revisaré más tranquilamente este fin de semana y te cuento por aquí. ¡Millones de gracias, de verdad!

[gusman126]

hace 1 minuto, Nalena dijo:

Pf, lo revisaré más tranquilamente este fin de semana y te cuento por aquí. ¡Millones de gracias, de verdad!

de nada

[Nalena]

Aqui la variable imgdir->{$img_col_dir}<-
Aqui la variable imgatt->{$id_attribute|intval}<-

 

Nada, de verdad que es algo que no entiendo y yo pensaba que sería un cambio facilito u.u

[Nalena]

Si no... alguien sabe de algún módulo que haga lo que necesito?

Os adjunto imagen para ser un poco más gráfica. Básicamente es que cuando el cliente deje el ratón sobre alguno de los atributos se muestre en grande al lado (dónde puse el cuadrado por ej) 😕 Algo que funciona perfectamente con una imagen cualquiera pero no usando las variables u.u

[gusman126]

Un modulo no va a ser posible, tendras que pedir que lo hagan , 

Es algo muy especifico ademas de tener que añadir una caja en un sitio en concreto de la plantilla .

Has pensado en hacer mas grande el cuadro que se muestra la imagen ?

Tendrias que cambiar codigo CSS para que se viera bien en horizontal, pero puede ser una solucion

[Nalena]

Sí, pero el cliente reniega totalmente a eso  

[gusman126]

hace 1 hora, Nalena dijo:

Sí, pero el cliente reniega totalmente a eso  

Ok pues entonces ya tendras que hacer mas pruebas o pedir que un profesional de los que estamos por aqui lo haga por un precio.

 

 

 

[Nalena]

Por supuesto, si alguien (o tú ) está dispuesto a ayudarme fuera de lo gratuito que me hable más detenidamente por privado y lo comentamos  

[gusman126]

Finalmente se ha solucionado.

Pon solucionado en el tema.