Uso de JQuery Zoom y JavaScript Zoom para imágenes de productos en Shopify

jQuery Zoom y Vanilla JavaScript Zoom: Te ofrecemos 2 tutoriales con estos dos métodos que puedes usar para agregar opciones de zoom al sitio de tu cliente.

Al vender online, una de las funciones de producto más solicitadas es la ampliación de imágenes. El zoom a menudo se usa en la imagen de un producto para agrandarlo, de modo que los clientes potenciales puedan verlo mejor. Hay muchas bibliotecas de zoom diferentes, completamente gratuitas disponibles en línea, y al final de este artículo ofreceré algunas opciones más que podrías usar con los temas de Shopify. 

En este tutorial, he incluido dos métodos que puedes usar para agregar opciones de zoom al sitio de tu cliente:

1. jQuery Zoom,
2. Vanilla JavaScript Zoom

Asegúrate de usar solo una de estas opciones, pero no ambas. Estos son dos tutoriales separados, así que elige el que prefieras. Comencemos.

1. Opciones de zoom a través de jQuery

He optado por una opción vieja, pero buena: jQuery Zoom por Jack Moore. Actualmente utilizamos este complemento para ampliar las imágenes de productos en el tema gratuito de Shopify, Debut. Este complemento de zoom no tiene prácticamente ningún estilo (por lo que puedes personalizarlo tú mismo) y es fácil de implementar. Lo que más me gusta de este complemento es que tiene un registro de cambios claro y mucha gente lo utiliza online. 

Ver tienda de DemoDescargar jQuery Zoom

Este complemento es compatible con jQuery 1.7+ en Chrome, Firefox, Safari, Opera e Internet Explorer 7+. 

Si actualmente tienes un nodo configurado para la personalización de temas, puedes instalar este complemento a través de npm (en inglés) al ejecutar: 

npm install jquery-zoom

O puedes descargar el complemento jQuery Zoom.

Para obtener más herramientas, consulta nuestra lista de complementos para Sublime text favoritos.

1) Agrega jQuery si tu tema no lo tiene todavía

La mayoría de los temas ya tiene una versión de jQuery ejecutándose, y para que este complemento funcione, necesitas una versión de 1.7+ como mínimo. Esto significa que con la mayoría de los temas de Shopify probablemente no necesitarás agregar jQuery, a menos que estés creando el tema desde cero. Si estás creando una aplicación y usas jQuery, lee la documentación sobre cómo usar jQuery de manera responsable (en inglés), para evitar conflictos con los temas que ya la incluyen.

Puedes verificar tu tema para ver si ya se ha cargado jQuery, ya sea buscando el script o yendo a la pestaña Console en tu inspector y ejecutando jQuery.fn.jquery, que mostrará la versión de jQuery que se está ejecutando el sitio web. 

Alternativamente, puedes verificar theme.liquid para ver si se está cargando o si ya está cargado en un archivo vendor.js dentro del directorio  scripts/. Nunca cargues más de una versión de jQueryon en un sitio web a la vez, ya que aumentará el tiempo de carga de las páginas y causará una gran cantidad de problemas de JavaScript en el sitio de tu cliente.

Si necesitas agregar jQuery a tu tema, simplemente agrega la siguiente línea al encabezado de tu html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" defer=”defer”></script>

2) Agrega el archivo de complemento zoom.min.js a tu tema

Desde la carpeta del complemento que descargaste, agrega el complemento minificado jQuery Zoom (jquery.zoom.min.js) a tu carpeta Assets (Recursos). Luego, en tu archivo theme.liquid que está después de donde se está cargando jQuery, enlaza el archivo de complemento a tu tema utilizando el siguiente código de Liquid. Considera agregar una casilla de verificación para incluirlo solo en las páginas de producto, en vez de en todas las páginas (especialmente si solo se usa en las páginas de producto):

{% if template contains 'product' %}
  <script type="text/javascript" src="{{ 'jquery.zoom.min.js' | asset_url }}" defer=”defer”>
{% endif %}

Alternativamente, también puedes agregar el código minificado al final de un archivo vendor.js si ya tienes un tema que usa uno, para evitar la solicitud adicional.

3) Edita product.liquid para apuntar a la imagen ampliada

Para que el complemento de zoom funcione, éste agrega HTML dentro del elemento al que fue asignado. Por lo tanto, el elemento al que está asignado debe aceptar html; la etiqueta <img> no puede contener otros elementos HTML, por lo que necesitas un elemento contenedor o de envoltura.

Una de las formas más fáciles de hacer esto es agregar un contenedor alrededor de la imagen principal de tu producto con JavaScript. En tu plantilla product.liquid, o si estás usando secciones, agrega las clases image-zoom y data-zoom a la imagen principal de tu sección de producto. Ten en cuenta que la featured_image (imagen destacada) de tu producto podría llamarse de otra manera, según el tema que estés utilizando.

También querrás usar Liquid para generar la URL de tu imagen grande (que será tu imagen ampliada) como un atributo de datos. En este caso lo he llamado data-zoom. Podremos usar esto más adelante en la inicialización, lo que te permitirá pasar la URL al método .zoom () como una propiedad de la URL, especificando una versión más grande de la imagen (en lugar de cargar una grande y reducirla).

También te puede interesar: ¿Qué es la mejora progresiva y por qué debería importarte? (disponible en inglés)

4) Inicializa el complemento de zoom de manera dinámica

Debido a que hay muchos temas diferentes con una amplia variedad de CSS que podrían aplicarse a los elementos, el código que está a continuación se activa mediante la clase image-zoom agregada a la imagen principal del producto. Se agregará un contenedor <span> con jQuery al que el complemento de zoom agregará el HTML adicional, lo que crea el efecto de zoom. Esto evitará cualquier problema causado por los diseños CSS u otros estilos que puedan afectar un contenedor creado manualmente.

Complemento jQuery Zoom trabajando con productos Slate.

Hay muchas formas alternativas de implementar este complemento, y dependiendo de qué otros eventos JS hayas activado para las imágenes de producto, por lo que sería conveniente crear una función personalizada como productImageZoom(), y también usar .trigger('zoom.destroy'); antes de activar .zoom();. 

Este sería el mejor enfoque si estás utilizando JavaScript para manipular las imágenes de variante y cargando una imagen destacada diferente según la variante en la que se haga clic. Para ver un ejemplo de esto, echa un vistazo a cómo se implementa este complemento de zoom en el tema Debut.

5) Personaliza tu configuración y agrega estilos según sea necesario 

El complemento jQuery Zoom viene con muchas otras propiedades que puedes pasar al método.zoom() . Estos se pueden encontrar en la documentación del complemento e incluyen  on (encendido), duration (duración), target (destino), touch (táctil), y más. 

También puedes agregar estilo a tus imágenes ampliadas para dar una indicación de que la imagen se ampliará al pasar el ratón. Si estás utilizando uno de los otros valores on (encendido) como grab (captar), click (hacer clic) o toggle (alternar), es posible que desees cambiar el cursor predeterminado para el zoom de la imagen usando CSS. 

Por ejemplo, si deseas incluir algo similar al estilo de la demostración del complemento, puedes agregar los siguientes estilos y el icon.png en tu carpeta de activos: 

También podrías agregar un estilo que cambiaría el cursor para indicar una opción de captura de zoom:

Nota: Algunos de estos valores CSS solo funcionan en navegadores habilitados para webkit; también puedes proporcionar una imagen para un cursor personalizado (en inglés) si deseas que se adapte a los navegadores que no están habilitados para webkit.

Para los puntos de bonificación, considera ampliar la funcionalidad que ya hemos creado utilizando las opciones de tema (en inglés), ofreciendo a tu cliente la opción de activar y desactivar el zoom a su gusto.

También te puede interesar: 15 herramientas para personalizar tu línea terminal y de comando (en inglés).

2. Zoom a través de vanilla JavaScript

Para la opción vanilla JavaScript, podemos usar la biblioteca imgix de Drift, que es liviana y no tiene dependencias. 

Ver tienda de Demo Descargar Drift

Esta biblioteca es compatible con la última versión de Chrome, las versiones actuales y anteriores de Firefox, Internet Explorer y Safari con renovación automática, y la versión más reciente de la versión principal actual y anterior para el navegador predeterminado en iOS y Android. Elegí esta biblioteca porque está bien mantenida y es fácil de implementar.

Si actualmente tienes un nodo configurado para la personalización de los temas, puedes instalar este complemento a través de npm (en inglés), ejecutando: 

npm install drift-zoom

O bien, también puedes descargar la biblioteca Drift manualmente.

1) Agregar Drift a tu tema

Dependiendo de tu configuración, puedes incluir manualmente Drift dist en tu tema. Ten en cuenta que esto aparecerá en todas las páginas si se agrega a través de tu archivo theme.liquid , lo que puede ser menos eficaz porque se incluirá en todas las páginas de tu sitio. Considera agregar una casilla de verificación para incluirlo solo en las páginas de producto en vez de en todas las páginas (especialmente si solo se usa en las páginas de producto).

{% if template contains 'product' %}
  <script type="text/javascript" src="{{ 'Drift.min.js' | asset_url }}" defer="defer"></script>
{% endif %}

Alternativamente, también puedes agregar el código minificado al final de un archivo vendor.js , al igual que las instrucciones jQuery anteriores, si ya tienes un tema que use uno, para evitar la solicitud adicional.

Si estás utilizando ES6, puedes hacer lo siguiente para incluir drift en tu proyecto: 

2) Editar product.liquid para apuntar a la imagen ampliada

Para que el zoom dinámico (por desplazamiento del ratón) funcione, se agrega HTML dentro de un elemento con posicionamiento CSS. Si no se especifica ningún elemento para contener la imagen ampliada, se superpondrá por defecto en la parte superior y se alineará con el elemento primario más cercano.

Primero, agreguemos un contenedor alrededor de tu imagen principal de producto en tu plantilla product.liquid , y dentro de eso también agrega un div vacío con una clase de image-details(detalles de imagen). Si estás utilizando secciones, puedes agregar el atributo data-zoom a la imagen destacada de la sección del producto. Ten en cuenta que la featured_image (imagen destacada) de tu producto podría llamarse de otra manera, según el tema que estés utilizando.

<div class=”image-container”>
  <img class=”image-zoom” src=”{{ featured_image | img_url: '480x480' }}” alt="{{ image.alt | escape }} data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}>
  <div class="image-details"></div>
</div>

También querrás usar Liquid para generar la URL de tu imagen grande (que será tu imagen ampliada) como un atributo de datos. En este caso lo he llamado data-zoom. Podremos usar esto más adelante en la inicialización, para especificar una versión más grande de la imagen.

3) Inicializar Drift y establecer opciones

El siguiente paso es la configuración básica, y es realmente sencillo:

Aquí estamos inicializando Drift en la imagen apuntando a la clase image-zoom (zoom de imagen), luego configuramos paneContainer en el div .image-details, para establecer la salida del contenido ampliado que se representará en ese contenedor.

También puedes configurar otras opciones más específicas para Drift, incluyendo los ajustes, la cantidad de zoom, el toque táctil y más. Esas opciones se pueden encontrar en la página de GitHub para Drift (en inglés).

4) Personalizar tus configuraciones y estilos

El último paso en este proceso sería configurar cualquier estilo adicional que desees incluir para el zoom de tu imagen con Drift. En lugar de que tu área de zoom cubra toda la página, puedes agregar estilo para que se active de un lado o se superponga sobre otro contenido en la página.

He agregado algunos estilos sencillos para dos columnas con cuadrícula CSS que puedes ver cómo se usan en la demostración anterior: 

Complementos alternativos y aplicaciones de Shopify

Si las dos opciones del tutorial anterior no te convencen, echa un vistazo a las siguientes alternativas. También he incluido un par de aplicaciones de Shopify específicamente para ampliar el producto.

Complemento EasyZoom

EasyZoom (en inglés) es un complemento de zoom de imagen y panorámica jQuery elegante y altamente optimizado. Admite dispositivos táctiles y se puede personalizar fácilmente con CSS.

Complemento ZooMove

El complemento ZooMove (en  inglés) desarrollado con jQuery te permite ampliar dinámicamente las imágenes al pasar el ratón y ver los detalles con el movimiento del ratón. Compatible con: jQuery 1.7+ en Chrome 42+, Firefox 41+, Safari 9+, Opera 29+ e Internet Explorer 9+.

Además de estos complementos gratuitos, también hay aplicaciones de pago de Shopify que puedes instalar para tus clientes. 

Aplicación Magic Zoom Plus

Magic Zoom Plus (en inglés) permite a los usuarios la opción de zoom al pasar el cursor sobre la imagen y hacer clic para ampliarla. Es una de las aplicaciones de zoom de imagen de Shopify mejor calificadas en la tienda de aplicaciones de Shopify, y funciona con dispositivos móviles. Hay un período de prueba gratis de 30 días, y la aplicación tiene un precio único de $69. 

Zoom de la imagen de producto de la aplicación Gowebbaby

Product Image Zoom de la aplicación Gowebbaby (en inglés) es otra aplicación de zoom de imagen en la tienda de aplicaciones de Shopify, que utiliza un cuadro o lente alrededor de tu área de zoom, haciéndolo sentir como una lupa para inspeccionar un producto. Su costo es de $3,99 por mes, con un período de prueba gratis de tres días.

También te puede interesar: Cómo crear una sección de barra de anuncios personalizable en Shopify (en inglés).

¡Haz zoom!

El uso de un complemento de zoom para los productos puede ser una herramienta poderosa para las conversiones, que permitirá a los clientes ver de cerca y personalmente los productos que tu cliente está vendiendo. Al hacer una venta directa a un cliente y agregar una funcionalidad adicional creando temas personalizados, puedes agregar unas horas facturables adicionales a tu proyecto. Esperamos que con la información de este artículo, agregar funcionalidades adicionales sea un poco más fácil y rápido. 🚀

Publicado por Pablo Golán, editor en jefe del blog de Shopify en español y responsable de marketing de contenidos y localización para España y Latinoamérica. Texto original de Tiffany Tse. Traducción a cargo de Elizabeth Pestana.