Hay algunas opciones cuando se trata de selectores de cantidad de comercio electrónico, pero un elemento interactivo parece ser el más fácil de usar para los sitios minoristas B2C.
Un buen selector de cantidad “interactivo” generalmente significa que el usuario no necesita abrir un menú o usar su teclado, simplemente puede tocar o hacer clic en la pantalla. ¿Guay, verdad?
Entonces, ¿qué pasa si tu tema de Shopify solo tiene el campo de entrada HTML predeterminado? Tal vez tengas algo que se parece un poco a esto (un área táctil extremadamente pequeña para dispositivos móviles)…
Pero eres una galleta inteligente que busca algo más intuitivo (y estéticamente agradable), como esto…
Solo un problema: su tema Shopify tiene un carrito AJAX y no tiene concept de cómo agregar funcionalidad para elementos cargados dinámicamente.
Este tutorial le mostrará cómo integrar por completo nuevos botones selectores de cantidad y mejorar su tienda Shopify predeterminada. Mobile1st estaba implementando este cambio para un cliente que usaba el Línea de corriente ¡y pensamos que sería útil compartir estos pasos con usted! Después de todo, compartir es cariñoso.
Nota: Deberá tener conocimientos básicos de HTML y CSS; y una comprensión de cómo funciona javascript para activar un cambio de cantidad cuando un usuario hace clic en sus nuevos botones.
* ANTES DE EMPEZAR:
Recomiendo hacer una copia de su tema en vivo antes de editar cualquier código. Cambiar un tema en vivo puede ser muy arriesgado si no está completamente seguro de lo que está haciendo y/o está realizando cambios más grandes (como este) que abarcan varios archivos. Trabajar en un tema duplicado le permitirá verificar y probar sus cambios en el modo de vista previa antes de publicarlo.
PASO 1: Añadir botones al selector de cantidad
Para configurar esto, irá a la plantilla del carrito o la plantilla del cajón del carrito y buscará “cantidad” para encontrar el elemento de entrada responsable de actualizar la cantidad de un artículo de línea determinado.
Luego agregaremos un botón arriba y abajo de la entrada de cantidad; estos se utilizarán para aumentar/disminuir el valor.
El campo de entrada se dejó como está, pero querrá prestar atención a las clases del botón. Para este tutorial, elegí las clases qtyminus y qtyplus que se usarán nuevamente 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 al hacer clic (en la mayoría de los casos). Pero si su carrito usa AJAX para cambiar dinámicamente el contenido del carrito cada vez que se actualiza, verá que su disparador solo funciona en la carga de la página inicial.
Esto se debe a que AJAX solo actualiza el contenido de la página y no reinicializa el controlador de eventos. Por lo tanto, sus elegantes botones nuevos se destruyen y recargan, pero su controlador de eventos no se vuelve a conectar.
PASO 2: Dile a tus nuevos botones qué hacer
Aquí es donde se pone divertido (o desordenado… no estoy aquí para juzgar).
Ubique un archivo llamado theme.js y busque algo como “cart” o “AjaxCart” para encontrar el constructor del carrito. Si está editando el tema Streamline, esto se llama “theme.AjaxCart”.
PASO 2a: Definir esas variables
Busque el objeto variable del controlador, más comúnmente llamado “selectores”. Aquí es donde definirá sus botones “+” y “-“. Se verá algo como esto.
| selectores de var = { formulario: ‘formulario.carrito’, cartCount: ‘.cart-link__count’, updateBtn: ‘.actualizar-carrito’, itemList: ‘(data-cart-item-list)’, |
Resaltadas en naranja están las líneas que he agregado. *Dependiendo de la clase que le hayas dado a tus nuevos botones, esto puede verse ligeramente diferente.
PASO 2b: Agregar detectores de eventos
Más abajo, debería haber un función prototipo donde se están definiendo los detectores de eventos. Vamos a hacer bastantes actualizaciones aquí. En naranja están las líneas que agregué para escuchar los clics en ambos botones, y en azul está lo que cambié de ‘entrada’ a ‘cambio’.
| this.$container.on(‘click on’, selectors.itemInputMinus, this._updateQuantity); this.$container.on(‘click on’, selectors.itemInputPlus, this._updateQuantity); this.$container.on(‘clic’, selectors.itemDelete, this._onItemDelete.bind(this)); este.$contenedor.on(‘cambio‘, selectors.itemInput Cantidad, $.debounce (500this._onItemQuantityChange.bind(this))); this.$container.on(‘blur’, selectors.itemInputQuantity, this._onItemQuantityEmptyBlur.bind(this)); this.$container.on(‘focus’, selectors.itemInputQuantity, this._highlightText); |
PASO 2c: Convierta los clics de botón en actualizaciones de cantidad
Localice la función llamada “_onItemQuantityChange” y coloque la siguiente función justo encima de ella (para mantener las cosas organizadas).
| _updateQuantity: función (evt) { var $botón = $(evt.goal).closest(‘botón’); var $enter = $button.dad or mum().discover(‘enter(kind=”quantity”)’); var id = $enter.closest(selectors.merchandise).attr(information.itemId); var cantidad = $enter.val(); if ($button.hasClass(‘qtyplus’)) { |
Esta función toma el evento que acaba de ocurrir (es decir, el clic del botón) y determina si debe o no aumentar o disminuir el valor de entrada. Una vez que se ha calculado la nueva cantidad, la función llama a “changeItem”, que ya se ha definido en el javascript del tema, para activar la actualización de AJAX en el carrito.
Y debido a que hemos agregado esto al constructor del carrito, este código continuará funcionando cada vez que se cargue el contenido.
PASO 3: prueba tu código y hazlo mini
Esto se va a poner prolijo, así que tengan paciencia conmigo. Comente todo en theme.min.js y pegue todo el contenido de theme.js (temporalmente), solo para evitar minimizar el código que en realidad no funciona. Una vez que haya verificado que su código se está ejecutando según lo previsto, diríjase a un Sitio minificador de Javascript y pega el código que acabas de copiar. Esto le dará una versión reducida del archivo theme.js. El javascript minificado mejora drásticamente la velocidad y la accesibilidad del sitio (también conocido como una mejor experiencia de usuario). Ahora volverá a theme.min.js, elimine el sin minificar contenido y pegue su nuevo minificado código de tema
Et voila! Ahora tienes un selector de cantidad fácil de usar y estéticamente agradable que está completamente integrado en tu tema de Shopify. No requiere cinta adhesiva.
Si este tutorial fue un poco fuera de su alcance, o si a menudo necesita 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. Solo siéntate y deja que nuestro equipo de Shopify Consultants certificados te brinde el tema de alta conversión de tus sueños.
Desarrollador de optimización de Mobile1st y experto certificado en Shopify
