24/06/2015

Cómo incluir la funcionalidad de imágenes por variante con diseño a medida

Imágenes por variante

En Tienda Nube es posible configurar un producto para que contenga más de una variante. Es decir, una misma remera puede estar disponible en distintos colores. Cada uno de esos colores puede convertirse en una variante del producto. No solo eso, sino que además es posible que se actualice automáticamente la foto del producto al navegar a través de las variantes disponibles.

Esta funcionalidad está disponible tanto en la página de producto como en la opción de “Quick shop” disponible en lista de productos y en la página de inicio de las tiendas.

Imágenes por variante

En este artículo, te explicamos en dos simples pasos cómo incorporar esta funcionalidad a una tienda utilizando diseño a medida.

Paso 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();
  });
})

Paso 2

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

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

¡Eso es todo! Ahora si, configura desde el administrador las imágenes de tu tienda para que se modifiquen automáticamente.

Recuerda que si eres diseñador, puedes registrarte como Socio comercial de Tienda Nube y acceder así a una tienda demo para probar cómo realizar estos cambios y muchos otros. Si aún no lo has hecho, regístrate ahora.

Fecha de la última actualización: 27/04/2017


¿Te gustó el contenido?


Laura Esper

Laura es Licenciada en Economía de la Universidad de Buenos Aires. Disfruta mucho de viajar, conocer gente nueva y comer cosas ricas.


    Ecommerce por Expertos

    Conversaciones exclusivas con especialistas en comercio electrónico. ¡Llevá tu negocio a otro nivel!

    cmo-incluir-la-funcionalidad-de-imgenes-por-variante-con-diseo-a-medida