Segunda imagem em rolagem

Neste tutorial, implementaremos uma segunda imagem na listagem de produtos, que é exibida ao passar pelo produto.

HTML

1. A primeira coisa que vamos fazer, é adicionar a segunda imagem (se o produto a possuir) ao item da lista. Vamos procurar o snipplet item.tpl dentro da pasta snipplets/grid, pode ser que, em seu layout, esse snipplet seja chamado single_product.tpl

Dentro deste arquivo, encontramos o seguinte 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">

E substituímos ele 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:

Ter adicionado helper classes em seu layout. Você pode seguir este pequeno tutorial para fazer isso (é só copiar e colar algumas classes, não leva mais que 1 minuto).

1.Adicione os estilos no arquivo static/style-critical.tpl

Se em seu layout você usar um stylesheet para o CSS crítico, precisaremos do seguinte código dentro dele.

{# /* // 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;
}

Configurações

No arquivo config/settings.txt, adicionaremos um checkbox que ativa a funcionalidade na seção "Lista de produtos".

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

Traduções

Nesta etapa, adicionamos os textos para as traduções no arquivo 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"

Ativação

Por último, você pode ativar funcionalidade no Administrador Nuvem, na seção ‘Personalizar seu layout atual’ dentro de ‘Lista de produtos’:

Lembre-se, para que o produto funcione, ele deve ter pelo menos 2 imagens.