Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Imagen por variante

Esta funcionalidad permite relacionar una imagen dependiendo de la variante de producto.

Ejemplo: tengo una remera con una variante en azul y rojo, y quiero mostrar las fotos de ambos modelos. 

1. En layout.tpl registrar una función que se ejecute cada vez que un cambio en una variante sea detectado, utilizando un código Javascript como el siguiente:

$(document).ready(function() {
  LS.registerOnChangeVariant(function(variant){
   // this is used on quick shop modals
   var current_image = $('img', '#quick'+variant.product_id);
   current_image.attr('src', variant.image_url);
   // this is used on single product view
   $(".cloud-zoom-gallery[data-image="+variant.image+"] > img").click();
  });
})

2. Luego, en templates/product.tpl agregar el data-image ID para conectarlo con la imagen que se encuentra seleccionada.

<a href="{{ image | product_image_url('original') }}" class="cloud-zoom-gallery img-thumbnail" rel="useZoom: 'zoom', smallImage: '{{ image | product_image_url('large') }}' " data-image="{{image.id}}">
  {{ image | product_image_url('thumb') | img_tag(product.name) }}
</a>

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.