Segunda imagen en rollover

En este tutorial vamos a implementar el comportamiento para que en los listados de productos, al pasar por un producto, muestre la segunda imagen del mismo.

HTML

1. Lo primero que vamos a hacer, es agregar la segunda imagen (si es que el producto la tiene) al item en el listado. Vamos a buscar el snipplet item.tpl dentro de la carpeta snipplets/grid, puede ser que en tu diseño este snipplet se llame single_product.tpl

Dentro de este archivo vamos buscar el siguiente código:

<img alt="{{ product.featured_image.alt }}" data-sizes="auto" src="{{ 'images/empty-placeholder.png' | static_url }}" data-srcset="{{ product.featured_image | product_image_url('small')}} 240w, {{ product.featured_image | product_image_url('medium')}} 320w, {{ product.featured_image | product_image_url('large')}} 480w" class="lazyautosizes lazyload img-absolute img-absolute-centered" /> 

{# Low quality img until final img is lazyloaded #}
      <img alt="{{ product.featured_image.alt }}" src="{{ product.featured_image | product_image_url('tiny')}}" class="img-absolute img-absolute-centered blur-up">

Y lo reemplazamos por este:

<img alt="{{ product.featured_image.alt }}" data-sizes="auto" src="{{ 'images/empty-placeholder.png' | static_url }}" data-srcset="{{ product.featured_image | product_image_url('small')}} 240w, {{ product.featured_image | product_image_url('medium')}} 320w, {{ product.featured_image | product_image_url('large')}} 480w" class="lazyautosizes lazyload img-absolute img-absolute-centered{% if settings.product_hover and product.other_images %} item-image-primary{% endif %}" />

{# Low quality img until final img is lazyloaded #}
       <img alt="{{ product.featured_image.alt }}" src="{{ product.featured_image | product_image_url('tiny')}}" class="img-absolute img-absolute-centered blur-up">

{% if settings.product_hover and product.other_images %}
       <img alt="{{ product.featured_image.alt }}" data-sizes="auto" src="{{ 'images/empty-placeholder.png' | static_url }}" data-srcset="{{ product.other_images | first | product_image_url('small')}} 240w, {{ product.other_images | first | product_image_url('medium')}} 320w, {{ product.other_images | first | product_image_url('large')}} 480w" class="lazyautosizes lazyload img-absolute img-absolute-centered item-image-secondary" />
{% endif %}

CSS

Requisito:

Tener agregados en tu diseño las clases helpers. Podés seguir este este pequeño tutorial para hacerlo (simplemente es copiar y pegar algunas clases, no toma más de 1 minuto).

1.Agregar los estilos dentro del archivo static/style-critical.tpl 

Si en tu diseño usas una hoja de estilos para el CSS crítico, vamos a necesitar el siguiente código dentro de la misma.

{# /* // Grid item */ #}

.item {
  margin-bottom: 50px;
  text-align: center;
}
.item-image {
  position: relative;
  overflow: hidden;
  max-height: 500px;
}
.item-image img{
  height: 100%;
  width: auto;
  max-height: 500px;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.item-image-primary {
  z-index: 9;
}
.item-image:hover .item-image-primary {
  opacity: 0;
}

Configuraciones

En el archivo config/settings.txt vamos a agregar el checkbox que activa la funcionalidad dentro de la sección “Listado de productos”.

title
        title = Foto del producto
checkbox
        name = product_hover
        description = Mostrar la segunda foto al posar el mouse

Traducciones

En este paso agregamos los textos para las traducciones en el archivo config/translations.txt

es "Foto del producto"
pt "Foto do produto"
en "Product photo"
es_mx "Foto del producto"

es "Mostrar la segunda foto al posar el mouse"
pt "Mostrar a segunda foto ao colocar o mouse"
en "Show the second photo on mouseover"
es_mx "Mostrar la segunda foto al posar el mouse"

Activación

Por último podés activar la funcionalidad desde el Administrador nube, en la sección de Personalizar tu diseño actual dentro de Listado de productos:

Recordá, que para que funcione el producto tiene que tener por lo menos 2 imágenes.