Ejemplo:
Como prestashop es tan especial y solo tendrías que aprender lenguajes de programacion como SMARTY, PHP, y demás (hoy en día, con FireBug y Google, el CSS ya no es tan difícil) para modificar lo que trae por defecto, pero aquí os traemos un truquillo fácil para cambiarlo de una sola pasada, y ojo, lo he testeado en PrestaShop 1.5.6, funciona que da gusto. Pruebalo, da igual la version que tengas. Si ves que no funciona, dimelo, abajo en los comentarios.
Lo primero, es diseñar dos imagenes, con PhotoShop, Paint, lo que nos de la gana. Para saber el tamaño exacto que tiene que tener la imagen, esto es un truco para FireFox, bajamos el complemento para el navegador que se llama MeasureIt, y con eso mediremos el espacio de nuestro log, y a diseñar.
Una vez hayamos elegido los dos logos, por ejemplo, un carrito vacio y otro carrito lleno, así cuando alguien pase el ratón por allí vera como se llena, nos conectaremos al FTP o Gestor de Archivos de nuestro servidor, donde tenemos alojada la tienda, y metemos las dos imagenes en la carpeta:
/themes/default/img
Que traducido al español es:
http://eldominiodetutienda.com/themes/default/img
Una vez allí las imagenes, tendremos que guardar su ruta. Por ejemplo, si hemos llamado a las imagenes logo1 y logo2, nos quedaran dos direcciones como:
/themes/default/img/logo1.png
/themes/default/img/logo2.png
El .png es relativo, si las tenemos en jpg, pues seria logo1.jpg, etc (personalmente, recomiendo crearlas en png, la calidad es genial).
Ahora nos vamos a editar códigos. Para eso podemos utilizar un editor de texto enriquecido, creedme, vuestros ojos agradeceran que todo este ordenado, y no que se vean 30.000 letras juntas en un bloque de texto.
Un buen editor de texto enriquecido es Notepad++, viva Notepad++.
Cuando hayáis instalado el Notepad++, lo primero sera guardar una copia en nuestro ordenador del archivo que vamos a utilizar, pero por si os olvida esta parte, pedir en los comentarios y os daré una copia del original por si los desastres.
Vale, cuando estemos preparados, abrimos la siguiente carpeta de nuestro servidor:
/themes/default
Y allí elegimos el archivo header.tpl, y lo abrimos con el editor de texto que hayamos elegido.
Vereis un monton de letras sin sentido, pero tranquilos, aquí viene lo bueno. Utilizando la herramienta buscar de vuestro editor, que en Notepad++ es Ctrl+F, vamos a buscar el siguiente texto:
<!-- Header -->
Y justo debajo, tendremos que tener un código como este:
<div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/ >
</a>Como veis, he marcado en rojo una parte del código, es la que vamos a modificar, bueno, a eliminar.
La tenemos que sustituir por este código:
<img src="Imagen1" onmouseover="this.src='Imagen2';" onmouseout="this.src='Imagen1';"/>Como veis, he marcado en color Naranja unos trozos del código nuevo, que tenemos que rellenar con la dirección de las imagenes que antes diseñamos, y apuntamos.
Nos quedaría algo así, junto el codigo anterior que no hay que modificar:
<div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
<img src="http://eldominiodetutienda.com/themes/default/img/logo1.png" onmouseover="this.src='http://eldominiodetutienda.com/themes/default/img/logo2.png';" onmouseout="this.src='http://eldominiodetutienda.com/themes/default/img/logo1.png';"/>
</a>Una vez tengamos el código terminado, guardamos, y subimos el archivo header.tpl a donde estaba, sobreescribiéndolo.
Cuando nos vayamos a nuestra tienda, veremos como funciona.
OJO, esto solo funciona en la versión de PC de PrestaShop, aun estoy investigando en el de los moviles.
Pero si necesitáis también en la versión móvil, que me parecería raro porque en pocos moviles (ahora en día bastantes) puedes conectar un ratón, pero aun así pocos lo hacen, dejadme un comentario e investigare.
0 comentarios :
Publicar un comentario