Jump to content

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


Recommended Posts

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! :)

Link to comment
Share on other sites

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 (

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 2 weeks later...
  • 3 months later...

Hola, ami me aparece algo curioso, por ejemplo si mando a llamar el swf desde mi nombre de dominio (http://www.midominio.com/peel/small.swf) en el archivo peel.js no me aparece nada, no carga el swf pero si cambio esa url a otro server por ejemplo, (http://www.marcofolio.net/plugins/peel/small.swf) si me aparece, y todo funciona muy bien e incluso jalando las imagenes desde mi server (http://www.midominio.com/peel/small.jpg), el problema es cuando cargo el swf en mi dominio, ha alguien le a pasado, espero puedan ayudarme Saludos.

Link to comment
Share on other sites

Hola no quiero ofender a nadie pero si ha alguien le interesa, yo me hice hace unas semanas un modulo para poner el efecto, si alguien lo quiere se lo paso.

Tenia pensado comentarlo pero es que he estado 15 dias de vacaciones y he intentado tocar lo menos posible el ordenador,jeje.

Lo que si os comento es que no soy programador php con lo que el codigo no sera lo mas optimizado pero yo creo que me lo he currado ya que desde el backoffice puedes definir la url, y las imagenes.


Saludos.

Link to comment
Share on other sites

Vale no tengo ningun problema, lo adjunto en el post, la verdad es que no lo he publicado entre otras cosas por lo que comente antes que no programo en php si no en java, entonces he ido viendo trozos de codigo de otros sitios y poniendolos por lo que tampoco me fiaba mucho, jejeje.



Simplemente colocadlo en modules , instalar y configurarlo.

PD: He de decir que cuando entreis en los modulos vereis una nueva categoria "Modulos Perrotekel", se que no deberia crearlo asi pero para mi es mas sencillo luego entrar a tocarlos, pero vamos que se puede cambiar.

cornerplubli.zip

Link to comment
Share on other sites

  • 2 years later...
Guest
This topic is now closed to further replies.
×
×
  • Create New...