[Tutorial] Como añadir efecto "Page Peel" a nuestra tienda

[maguila]

Hola!

En esta ocasion vamos a ver como implementar el efecto tan de moda "Page Peel"

Hasta hace no mucho este script era de pago, pero gracias a la gente que comparte sus proyectos en internet a dia de hoy podemos conseguirlo gratuitamente.

Para aquella gente que no sepa de que estamos hablando, es un agradable efecto que se logra a partir de javascript + imágenes + .sfw (flash). El efecto cumple muy bien la función de llamar la atención de tus visitantes hacía esa parte de la web para trasmitir el mensaje que quieras, información extra o publicidad creativa.

Aqui tenemos algunas capturas para que veais el efecto:

!http://i39.tinypic.com/2cpt4ky.png!

Queda como una pequeña esquina doblada por la que al pasar el raton se nos mostrara la parte oculta:

!http://i44.tinypic.com/mms8le.png!

Si quereis ver un pequeño video del efecto, lo teneis en este enlace: muestra_page_flip

Y sin nada mas que comentar, comenzamos con el tutorial.


1- Descarga


A dia de hoy en la red encontraremos varios scripts que nos permitiran hacer lo mismo, yo pondre el enlace del que me a funcionado despues de probar unos cuantos.

Aqui teneis el "enlace":http://funkyupload.com/files/RCJ0UU1R/peel.rar

Y aqui un "enlace alternativo":http://www.fileden.com/files/2006/9/10/211383/peel.rar

Una vez bajado, procedemos a descomprimirlo, quedandonos asi:

!http://i43.tinypic.com/v83r6.png!


2- Editar ficheros



En primer lugar editaremos el fichero peel.js , para ello podemos usar cualquier editor de texto, yo usare Notepad++

!http://i42.tinypic.com/1zq7a01.png!

Antes de explicaros como editarlo a vuestro antojo, me gustaria aclarar una cosa, una vez tengamos descomprimidos la carpeta del script "Peel" tendremos que subir la carpeta a nuestro hosting o servidor, y tener localizada la ruta que tendra, ya que sera necesaria para editar el fichero peel.js , en mi caso mi hosting es http://maguila.20ehost.com/ , pues he subido la carpeta a la raiz del hosting, de tal modo que las llamadas al script quedarian asi http://maguila.20ehost.com/peel/ (Podeis fijaros en la imagen de arriba)

Empezamos a editarlo:

En la linea 2: La direccion que te gustaria linkar (es mi caso como es de prueba, puse google)
En la linea 3: La ruta donde hemos subido el fichero small.swf
En la linea 4: La ruta donde hemos subido el fichero small.jpg
En la linea 9: La ruta donde hemos subido el fichero large.swf
En la linea 10: La ruta donde hemos subido el fichero large.jpg



2.1- Editar imagenes



small.jpg - Fondo pequeño que veran los visitantes antes de desplegar la pestaña.

large.jpg - La imagen que veran cuando pasen el raton y se despliegue la pestaña.

Editalas a tu antojo y necesidad siempre respetando las medidas que traen por defecto.



3- Subir ficheros



Ahora toca subir toda la carpeta "peel" a nuestro hosting mediante el FTP. Asegurate de respetar las rutas que editamos anteriormente en el fichero peel.js

En cuanto esten subidos pasamos al ultimo paso!



4- Añadir Script a nuestra pagina



Para añadir este script a nuestra pagina tendremos que localizar y editar el fichero header.tpl del Theme que estemos usando, en mi caso como tengo puesto el que viene por defecto con el paquete Prestashop, pues lo tengo localizado en "Themes/prestashop/header.tpl"

Una vez localizado lo abrimos con un editor de texto y localizamos estas lineas

!http://i43.tinypic.com/i6ijnp.png!

El script a añadir seria el que pondre a continuacion: (Fijaros que respeto la ruta de directorios en src=)

!http://i44.tinypic.com/148fc6t.png!

Aqui pongo un enlace al script en un txt porque este foro da llantazos a la hora de meter codigos, xD

"script":http://www.fileden.com/files/2006/9/10/211383/scriptpagefeel.zip

Recomiendan añadirlo en la linea 31, pero si lo añadia en esta linea, solo se veia en Firefox y no en Internet explorer, asi que tras investigar un poco, la solucion esta en añadirla en la linea 40, quedando de este modo

!http://i42.tinypic.com/33ykr53.png!

Una vez lo tengas editado, guardalo, y subelo a tu hosting para reemplazar el ya existente.

Y listo, abre tu pagina en el navegador y tendrias que verlo sin problemas.

Un saludo y Feliz Prestashoping! :)

[Carlosmoo]

El efecto en la web que pones está genial, pero no se que me pasa que no logro hacerlo en mi web.

He descargado el fichero comprimido y luego he subido al ftp, paso por paso
modificado los ficheros header.tpl, etc, pero no me funciona. X (

[maguila]

From 1242722203:

El efecto en la web que pones está genial, pero no se que me pasa que no logro hacerlo en mi web.

He descargado el fichero comprimido y luego he subido al ftp, paso por paso
modificado los ficheros header.tpl, etc, pero no me funciona. X (

Hola compañero! Podrias comentarnos porque no logras hacerlo? no te llega a aparecer? o sale algun error? has respetado bien las rutas hacia los ficheros? probastes diferentes navegadores? por ejemplo I.explorer y Firefox...

Si pones algunas capturas mucho mejor!

Un saludo

[dahuegon]

ya lo tengo, gracias por este estupendo efecto

[maguila]

dahuegon me alegro de que ya lo tengas!! si tienes alguna duda comentanoslo.

un saludo! :)

[Carlosmoo]

no llega a salir con ningún navegador y probé con iexplorer 7, 8 y crhome.

La verdad es que las explicaciones, son muy faciles de seguir, no le veo ninguna complicacion y usé los ficheros originales que pusiste, con lo cual, no puede ser un error de que las imagenes sean mas grandes ni nada de eso. Modifique el fichero poniendo mi web y modifique la linea 40
copiando lo mismo que has puesto en tu ejemplo :


[removed][removed]

Y lo que me sale es nada, nada de nada.

PD: Lo he puesto en la linea 31 y 40 y el resultado es igual X( Con lo bonito que quedaría...

[dahuegon]

pues si te sirve mi aportacion, a mi si que me sale, lo unico es que donde dice que hay que ponerlo en la linea 40, yo lo he puesto en la 41, pero porque realmente la linea donde hay que poner debajo el script ya me salia en la 40 del propio fichero de la presta, y ya te digo, funciona en todos los navegadores.
te pongo el link a la tienda, que por cierto, esta totalmente desnuda aun, no espereis encontrar nada que comprar, jejejeje
el link: http://www.tiendayhogar.com

saludos.

[Carlosmoo]

SOLUCIONADO XDDD QUE felicidad mas grande siente uno cuando las cosas bonitas funcionan xDDDD

www.clonic.org/tienda

[dahuegon]

CHICO CON PRODUCTO Y TODO YA, QUE CRACK, JAJAJAJA, solo una cosa, si haces ese enlace, cada vez que pinchas te va abriendo una pestaña nueva con lo que al final se te queda un navegador infinito.... XDD

[Carlosmoo]

XDDD ciertamente, se abre una parte del mismo dominio, pero el apartado de Contacto, que por el momento, es lo que quiero.

[maguila]

Carlosmoo

Me alegro de que ya lo tengas, la verdad es que queda muy bien, por cierto el logo principal te a quedado de lujo ocupando todo el header (cabezera), seguistes algun manual? o a pelo? jejeje (me a molado un monton! jiji)

dahuegon

Te quedo de lujo!


un saludo

[dahuegon]

Bueno, ya que veo que se responde bien aqui, jejeje, me llamo David, y bueno, aun nos queda un larrrrrrrrrrgo camino para acabar al tienda de marras, jajaja.

[wallacept]

no aparece nada minha tienda.
fiz tudo direito.

vejam:
tienda

[Carlosmoo]

Buenas David, un placer tio y gracias por el comentario. La verdad es que yo llevo ya 1 mes preparandome la tienda, realizando pruebas de importacion de productos y destrozandola por todas partes para luego volver a montarla y te recomiendo que lo hagas tambien, pues no hay nada mas importante, que saber como se hace cada una de las cosas que pueden llegar a pasarte, como que alguien te joda la web y te quedes sin nada mas que una copia de seguridad.

A mi, solo me falta solucionar el problema que tengo con la cesta, que por algún motivo que aun desconozco, cuando añado algo a la cesta, no sale nada, ningún articulo, aunque en la parte superior, donde esta la cuenta, pone 5 articulos, pero en la cesta, na de na.

He mirado infinidad de cosas, pero hay algo q se me escapa y esta claro que si me ha pasado a mi, le puede pasar a cualquiera a la hora de restaurar su tienda.

Nos vemos por el camino socio y al wallacept, jejeje no se que dices xD.

[wallacept]

people minha tienda no aparece o efeito. porque?
click direito de rato e aparece, vejam scree.

Attached File(s)

•  scree.png (6bytes)
  Number of downloads: 2189

[JMPC]

Hola,

Seguí la información y está la OK , pueden ver en el link.

http://www.slotarrabida.com/catalogo/

Gracias.

Saludos
JMPC.

Portugal

[maguila]

dahuegon

Yo soy Jose, encantado David! La verdad es que si, que nos queda un caminito por recorrer con el presta, pero bueno aqui estaremos para ayudar en lo que se pueda :)

Carlosmoo

Sabias palabras, las de trastear al 100% con la web, incluso simulando casos limite, para que en caso de que te pase algun dia, sepas como actuar! :P Intentare informarme sobre tu problema con la cesta.

wallacept

¿Respetaste las rutas de los directorios y ficheros? es muy importante que a la hora de editar los ficheros, estos queden editados respetandose la ruta donde despues quedaran subidos en el hosting.

JMPC

Bravo! :) A quedado muy bonita, por cierto una pregunta, ¿El efecto para aumentar (zoom - minipreview) las fotos de los articulos cuando pasa el raton? Es de pago? o es gratuito? Podrias compartirlo con nosotros?


Un saludo compañeros!

[wallacept]

Maguila, sim eu respeitei! :(
mas no aparece!

o efeito para ampliar fotos:
http://marghoobsulem...-image-enlarger

[wallacept]

problem resolve!
:)

[maguila]

Me alegro de que yo lo solucionaras! :)

Gracias por el enlace del modulo!

un saludo