Efecto Rollover en listados Prestashop (1.5 y 1.6)

Vemos en muchos temas para Prestashop que se incluye un efecto rollover de forma que en los listados (y en la home también) al pasar por encima se cambia la imagen.

Hay incluso algún módulo comercial que permite seleccionar la imagen que queremos que aparezca como rollover.

Si no necesitas esta opción y tienes algunos conocimientos básicos para toquetear Prestashop puedes tener tu efecto rollover siguiendo este mini tutorial.

prestashop_rollover

 Override Tools.php

Necesitamos una función auxiliar para poder obtener los identificadores de imagen de la imagen portada y la siguiente. Esto es comun tanto para Prestashop 1.6 como para Prestahop 1.5

Podemos crear un override de la clase Tools, de forma que creamos un fichero Tools.php con el código:

Lo situamos en la carpeta override>classes. Y borramos el fichero cache>class_index.php para que Prestashop coja la nueva clase.

13/07/2015 Actualizado para 1.6.1.0

En la reciente 1.6.1.0 el cover puede ser null (imágenes que no son la principal). En este caso la clase sobrescrita Tools.php quedará de forma genérica (esto es, sirve para todos los casos).

 

Cambios en plantilla product-list.tpl

Ahora toca cuando hemos de modificar el tema. La plantilla es product-list.tpl (en la raiz de nuestro tema) y el css es product_list.css (se encuentra en la carpeta css del tema), yo he probado estos cambios en la plantilla default de Prestashop 1.6.0.9 y 1.5.6

Cambios en Prestashop 1.6

Buscamos aproximadamente en la linea 54 la etiqueta <img donde se inserta la imagen del producto en el listado

Cambiamos por

Se hace la llamada al método estático nuevo y se guarda en una variable productimg. En caso de tener los dos identificadores de Imagen substituimos la imagen por dos: la portada y una adicional, en caso contrario se deja la imagen tal y como viene en el tema.

Como ya tenemos en el maquetado de la pagina esta imagen adicional, podemos hacer uso de CSS para crear el efecto rollover.

Al final de product_list.css añadimos las reglas css gracias a que hemos usado las clases img_0 y img_1. Y jugando con la visibilidad y el  selector :hover conseguimos el efecto rollover.

Cambios en Prestashop 1.5

El proceso es idéntico. En la linea 41 aprox tenemos la etiqueta <img

Cambiamos por

Al final de product_list.css añadimos las reglas css

 

En general se pueden aplicar estos “conceptos” a cualquier plantilla.

  • disqus_3NFlvO3WfL

    me gusta

  • Sophy Plath

    Funciona para el homefeatured??

    • http://pelechano.es Enrique Gómez

      Para 1.6 con el tema default si ya que usa la plantilla product_list.tpl

  • obox

    Hola he seguido tus pasos y me sale este resultado en la pagina principal, ahora se ven las dos imagenes a la vex ( azul mario y rosa). Como puedo solucionarlo? mi version es 1.6.0.9
    he adjuntado una imagen pero nose si la has recibido

    • http://pelechano.es Enrique Gómez

      Has puesto el nuevo css en product_list.css?
      El tema no parece el default, si tienes un link a la web le echo un vistazo

    • obox

      Lo he vuelto a probar y ahora me funciona muchas gracias!

  • Milonet Patrick
  • Bennet

    Muchas gracias por este código, me ha resultado muy útil. Tengo una duda, en mi web cuando paso el ratón por encima de la foto, la segunda foto me aparece en el lugar de la primera, no se ven las dos a la vez como en tu ejemplo de los vestidos. ¿Qué tendría que cambiar para que me saliera una al lado de la otra?. Estoy usando Prestashop 1.6.0.9
    Gracias de antemano

    • http://pelechano.es/ Enrique Gómez

      Hola

      La verdad es que la idea es que cambie cuando se pasa por encima (rollover). Que aparezcan las dos a la vez.. sería otra historia y no lo he probado la verdad..

  • Dany

    Hola,

    ROLL-OVER in nueva versión 1.6.1.0 del vuelco no está funcionando.

    Alguna idea?

    gracias

    • Michal H. /Kaper/

      Please Can you help to solve this problem? Thanks, please let me know on email if you will know the solution :( … Thanks kaper@seznam.cz

    • http://pelechano.es/ Enrique Gómez

      No he probado la ultima versión. Es una actualización o una instalación limpia?

      • Michal H. /Kaper/

        Me: upgrade

        • http://pelechano.es/ Enrique Gómez

          Update Tools.php

          class Tools extends ToolsCore
          {
          public static function getProductsImgs($product_id)
          {
          $sql = ‘
          (SELECT * from '._DB_PREFIX_.'image
          WHERE id_product=”‘.$product_id.'” and cover=1)

          union
          (SELECT * from '._DB_PREFIX_.'image
          WHERE id_product=”‘.$product_id.'” and ( cover=0 OR cover IS NULL ) ORDER BY position LIMIT 0,1 )

          LIMIT 0,2
          ‘;
          $result = Db::getInstance()->ExecuteS($sql);
          return $result;
          }

          }

          • Michal H. /Kaper/

            Thank you very much friend!!! Now it is working!!! :) Have a nice day… +1+ 1+1+1+1

    • http://pelechano.es/ Enrique Gómez

      Pues sí, hay que cambiar ligeramente la consulta sql. Ahora el cover puede ser Null

      class Tools extends ToolsCore
      {
      public static function getProductsImgs($product_id)
      {
      $sql = ‘
      (SELECT * from '._DB_PREFIX_.'image
      WHERE id_product=”‘.$product_id.'” and cover=1)

      union
      (SELECT * from '._DB_PREFIX_.'image
      WHERE id_product=”‘.$product_id.'” and ( cover=0 OR cover IS NULL ) ORDER BY position LIMIT 0,1 )

      LIMIT 0,2
      ‘;
      $result = Db::getInstance()->ExecuteS($sql);
      return $result;
      }

      }

      • Dany

        te quiero!!!! 😉

  • Omid Jamalvatan

    Just Thank you.. you saved my day.. the problem in ps 1.6.1 make me crazy..
    why you don’t share this great tutorial in english.
    once again thank you very much

  • Naj Nieuwenhuis

    Thanks for sharing, works perfectly in 16.0.1