Hay varias opciones cuando se trata de votantes por volumen de comercio electrónico, pero el elemento interactivo parece ser el más apropiado para los puntos de venta minoristas B2C.
Un buen selector de volumen “interactivo” generalmente significa que el usuario no tiene que sacar un menú o usar el teclado, sino que simplemente puede tocar o hacer clic derecho en la pantalla. Genial, ¿no es así?
Entonces, ¿qué pasa si tu tema de Shopify solo tiene un campo de entrada HTML predeterminado? Tal vez tenga algo parecido a esto (área táctil extremadamente pequeña para dispositivos móviles) …
Pero eres una cookie inteligente que apunta a algo más intuitivo (y estéticamente agradable), como esto …
Solo un problema: tu tema de Shopify tiene un carrito AJAX y no tienes idea de cómo agregar funcionalidad a los elementos cargados dinámicamente.
Esta guía le mostrará cómo integrar completamente los nuevos botones de cantidad y mejorar su tienda Shopify predeterminada. Mobile1st acaba de aplicar este cambio al cliente que está utilizando Simplificar tema y pensamos que sería útil compartir estos pasos con usted. Luego, compartiendo es cuidando.
Nota: Deberá tener conocimientos básicos de HTML y CSS; y comprender cómo funciona JavaScript para activar un cambio de volumen cuando un usuario hace clic en sus nuevos botones.
* Antes de que empieces:
Te recomiendo que hagas una copia en vivo del tema antes de editar cualquier código. Cambiar el tema en vivo puede ser muy arriesgado si no está completamente seguro de lo que está haciendo y / o haciendo cambios importantes (como este) que involucran varios archivos. Trabajar en un tema duplicado le permitirá verificar y probar los cambios en el modo de vista previa antes de publicarlos.
PASO 1: Agregue botones al selector de cantidad
Para configurar esto, irá a la plantilla de carrito de compras o la plantilla de bandeja de carrito de compras y buscará “cantidad” para encontrar el elemento de entrada responsable de actualizar la cantidad de un artículo de línea en particular.
Luego agregaremos un botón arriba y abajo de la entrada de cantidad; se utilizarán para aumentar / disminuir el valor.
El campo de entrada permanece como está, pero deberá prestar atención a las clases de botones. Para este tutorial, seleccioné las clases qtyminus y qtyplus que se usarán más adelante en Javascript para determinar cómo se debe cambiar la cantidad.
Desde aquí puede agregar un poco de Javascript para cambiar la cantidad por clic (en la mayoría de los casos). Pero si su carrito de compras usa AJAX para cambiar dinámicamente el contenido de su carrito de compras cada vez que se actualiza, verá que el disparador solo funciona cuando carga la página por primera vez.
Esto se debe a que AJAX solo actualiza el contenido de la página y no reinicializa su controlador de eventos. Por lo tanto, sus nuevos y elegantes botones se destruyen y se vuelven a cargar, pero su controlador de eventos no se vuelve a conectar.
PASO 2: Dígale a sus nuevas claves qué hacer
Se está poniendo divertido aquí (o complicado … no estoy aquí para juzgar).
Busque un archivo llamado theme.js y busque algo como “carrito de compras” o “AjaxCart” para encontrar el constructor del carrito de compras. Si está editando un tema Streamline, se llama “theme.AjaxCart”.
PASO 2a: Defina estas variables
Busque el objeto de variable líder, más comúnmente llamado “selectores”. Aquí definirás los botones “+” y “-“. Se verá algo como esto.
var selektori = { formulario: ‘form.cart’, cartCount: ‘.cart-link__count’, updateBtn: ‘.update-cart’, lista de articulos: ‘[data-cart-item-list]’, |
Las líneas que agregué están resaltadas en naranja. * Dependiendo de la lección que envió con los nuevos botones, esto puede verse un poco diferente.
PASO 2b: agregue detectores de eventos
A continuación, debería haber una señal función de prototipo donde se definen los oyentes del evento. Haremos bastantes actualizaciones aquí. En naranja están las líneas que agregué para escuchar los clics en ambos botones, y en azul es lo que reemplacé de “entrada” a “cambiar”.
esto. $ container.on (‘click’, selectors.itemInputMinus, this._updateQuantity); esto. $ container.on (‘click’, selectors.itemInputPlus, this._updateQuantity); esto. $ container.on (‘click’, selectors.itemDelete, this._onItemDelete.bind (this)); esto. $ contenedor.on (‘cambiar‘, selectors.itemInput Cantidad, $ .debounce (500, this._onItemQuantityChange.bind (esto))); esto. $ container.on (‘difuminar’, selectors.itemInputQuantity, this._onItemQuantityEmptyBlur.bind (this)); esto. $ container.on (‘focus’, selectors.itemInputQuantity, this._highlightText); |
PASO 2c: Convertir los clics de los botones en actualizaciones de volumen
Busque una función llamada “_onItemQuantityChange” y coloque la siguiente función justo encima (para organizar las cosas).
_updateQuantity: function (evt) { var $ button = $ (evt.target) .closest (‘botón’); var $ input = $ button.parent (). buscar (‘entrada[type=”number”]’); var id = $ input.closest (selectors.item) .attr (data.itemId); var cantidad = $ input.val (); if ($ button.hasClass (‘qtyplus’)) { |
Esta función toma el evento que acaba de suceder (es decir, haga clic en un botón) y determina si aumenta o disminuye el valor de entrada. Una vez que se calcula una nueva cantidad, la función llama a “changeItem”, que ya está definido en el javascript del tema, para ejecutar la actualización AJAX en el carrito.
Y dado que agregamos esto al constructor del carrito de compras, este código seguirá funcionando cada vez que se cargue el contenido.
PASO 3: Prueba tu código y hazlo en miniatura
Esto se volverá elocuente, sufre. Comente todo en theme.min.js y pegue todo el contenido de theme.js (temporalmente), solo para evitar disminuir el código que en realidad no funciona. Después de confirmar que su código funciona según lo previsto, vaya al sitio web en miniatura de Javascript y pegue el código que acaba de copiar. Esto le dará una versión en miniatura del archivo theme.js. La reducción de JavaScript mejora drásticamente la velocidad y la disponibilidad del sitio web (es decir, una mejor experiencia de usuario). Ahora volverá a theme.min.js, elimine no minificado contenido y pega tu nuevo reducido código de tema.
¡Y voile! Ahora tienes un selector de volumen simple y estéticamente agradable que está completamente integrado en tu tema de Shopify. No se requiere cinta adhesiva.
Si esta guía lo ha pasado por alto un poco o si a menudo se encuentra en la necesidad de este tipo de desarrollo relacionado con Shopify, ¡estamos aquí para ayudarlo! Mobile1st es clave para clientes como usted; el socio de optimización definitivo que mejorará continuamente sus tasas de conversión. Simplemente recuéstese y deje que nuestro equipo de expertos certificados de Shopify le brinde el tema altamente convertible de sus sueños.
Alex Ortiz
Programador de optimización de Mobile1st y especialista certificado en Shopify