Incluí la opción de imágenes por variante con diseño a medida

Por: Laura Esper
Creado el 24/06/15.
Actualizado el 14/04/19.
5 min
de lectura

Índice

Imágenes por variante

En Tiendanube 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 Tiendanube 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.

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.


    Registrate gratis

    Recibí artículos sobre marketing y emprendedurismo directamente en tu email.

    Es hora de pasar a la acción

    +15 mil alumnos de la Universidad ya potenciaron sus negocios con Tiendanube.

    Probá 15 días gratis

    Vos también podés hacer crecer tu negocio

    Creá tu tienda online con Tiendanube y como ellos, vendé de manera profesional.

    Honky Tonk - www.honkytonkshop.com
    Unibow - www.unibow.com.ar
    Zaira - www.zairabeauty.com.ar
    Probar 15 días gratis
    inclu-la-opcin-de-imgenes-por-variante-con-diseo-a-medida