3 pasos para mejores selectores de cantidad en tu tema de Shopify

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]’,
Articulo: ‘[data-cart-item]’,
Identificación del artículo: ‘[data-cart-item-id]’,
itemHref: ‘[data-cart-item-href]’,
itemBackgroundImage: ‘[data-cart-item-background-image]’,
itemTitle: ‘[data-cart-item-title]’,
itemVariantTitle: ‘[data-cart-item-variant-title]’,
itemPropertyList: ‘[data-cart-item-property-list]’,
itemProperty: ‘[data-cart-item-property]’,
itemDiscountList: ‘[data-cart-item-discount-list]’,
itemDiscount: ‘[data-cart-item-discount]’,
itemDiscountTitle: ‘[data-cart-item-discount-title]’,
itemDiscountAmount: ‘[data-cart-item-discount-amount]’,
itemLabelQuantity: ‘[data-cart-item-label-quantity]’,
itemInputQuantity: ‘[data-cart-item-input-quantity]’,
itemInputMinus: ‘. qtyminus ‘,
itemInputPlus: ‘. qtyplus ‘,

itemDelete: ‘[data-cart-item-delete]’,
itemPriceContainer: ‘[data-cart-item-price-container]’,
itemLinePriceContainer: ‘[data-cart-item-line-price-container]’,
itemUnitPrice: ‘[data-cart-item-unit-price]’,
itemMessage: ‘[data-item-message]’,
itemSubscriptionName: ‘[data-cart-item-subscription-name]’,
cartDiscountContainer: ‘[data-cart-discount-container]’,
cartDiscountContent: ‘[data-cart-discount-content]’,
cartDiscount: ‘[data-cart-discount]’,
cartDiscountTitle: ‘[data-cart-discount-title]’,
cartDiscountAmount: ‘[data-cart-discount-amount]’,
cartNoteContainer: ‘[data-cart-note-container]’,
cartNoteInput: ‘[data-cart-note]’,
cartMessage: ‘[data-cart-message]’,
Subtotal del carrito: ‘[data-cart-subtotal]’,
cartSubmit: ‘[data-cart-submit]’
};

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’)) {
cantidad = parseInt ($ input.val ()) + 1;
} otro {
cantidad = parseInt ($ input.val ()) – 1;
}
si (cantidad == 0) {
var answer = confirm (theme.strings.cartConfirmDelete);
si (respuesta === falso) {
$ input.val (1);
this.loading (falso);
regreso;
}
}
theme.cart.changeItem (id, cantidad);
},

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

Móvil1st se ocupa de perfeccionar la conversión móvil. Nuestro equipo de CRO y expertos en el tema orienta a las empresas impulsadas por el comercio electrónico hacia resultados de ingresos móviles más altos mediante la aplicación de las mejores prácticas mundiales y las pruebas continuas de análisis de datos. Mobile1st optimiza los 3 esfuerzos principales que más impactan dramáticamente en la conversión móvil: velocidad / rendimiento del sitio web móvil, UX / usabilidad y carrito de compras / facturación.

¡Póngase en contacto con los expertos de Mobile1st ahora!

Previous post Encuesta: El dilema ético detrás del copiloto de GitHub
Next post Cómo clasificar usuarios y reseñas | Nick Babich | Julio de 2021

Deja una respuesta