one page checkout

¿Cómo eliminamos 3 inconvenientes de diseño cruciales de una página Checkout en nuestra extensión?

Un pago y envío página ha sido en el debate desde hace mucho tiempo. Hay docenas de artículos sobre los temas como “Si usted elige una extracción de una página?” “Pros y contras de una página de pago”, y así uno. La mayoría de estos artículos resuelven de manera eficaz los inconvenientes, pero parece que hemos estado promoviendo estos inconvenientes, como que están ahí para siempre y no pueden ser derribados todos modos.

Vamos a enfrentar la verdad, cada nueva introducción tiene algunas desventajas con seguridad. Poco a poco, con el desarrollo y la investigación, estas desventajas se desvanecen con seguridad.

En este blog, voy a abordar estos 3 contras de una salida más de una página, que hemos eliminado de nuestro Magento una extensión de página de pago y también el módulo de página de pago PrestaShop Uno . La mayoría de estas desventajas nunca fueron allí en nuestra extensión de pago, ya que tomamos el cuidado de ellos, mientras que en la misma fase de desarrollo y pruebas.

Uno inconvenientes página de pago fijos

1. Gran parte de la información en una sola página? Se congestiona

La mayoría de las páginas de pago, cuando se introduce en el pasado, tenían este problema. Fue realmente una tarea enorme para ajustar todo, desde una salida de varias páginas en una sola página.

El reto era más problemático para adaptarse a todos los elementos de caja en una sola página y debe proporcionar una visión completa de toda la página de pago también. Por otra parte, todos los elementos de pago y envío como formulario de acceso, dirección de entrega, dirección de facturación forma, las opciones de pago, opciones de envío, y la revisión carro no deben superponerse entre sí, y ni ellos deben superponerse sobre sí mismos. se necesita una gran cantidad de HTML, CSS, JavaScript y Ajax para ser manipulados para mantener el diseño de todo bien con el valor por defecto, así como la tercera parte de los temas de Magento. Pero teníamos la intención de mantenerlos lo menor posible para acelerar la carga de la página.

Esto es lo que se nos ocurrió:

opciones de inicio de sesión

Una gran cantidad de HTML, CSS, JS y Ajax fue ajustado por nuestros diseñadores para adaptarse a todos los elementos de manera clara y ordenada en una sola página y también para mantener el tiempo de carga de la página óptima. Por otra parte, gracias a nuestros diseñadores, después de todo esto, no había suficiente espacio dejado para agregar la opción de inicio de sesión Social usando Facebook y Google en nuestra página de pago.

2. La forma en la página están congestionadas sin espacios en blanco y el uso de etiqueta apropiada

Si bien el diseño de las formas, los principales aspectos que buscábamos eran:

  • Mantener las formas compactas
  • Todos los campos necesarios deben estar allí
  • Los campos que deben tener adecuados los espacios en blanco
  • Las etiquetas no deben confundir a los usuarios
  • Administrador debe ser capaz de elegir el campo de formulario que quiere mostrar en la página para los clientes.

Etiquetas

Las etiquetas estaban saliendo como una de las principales preocupaciones aquí. Si queremos mantener las etiquetas por el lado de los campos respectivos, la longitud horizontal de la forma daría un espacio muy inferior para las otras secciones de la página.

También hemos pensado en un diseño de formulario donde debemos omitir las etiquetas y el uso de marcadores de posición en el lugar de ellos. Algo como esto:

Formulario de contacto con nosotros

Sin embargo, había un problema en eso. Para las formas considerablemente largas como las formas y dirección de facturación, si el cliente una vez llenado el detalle, y la etapa posterior si querría volver a comprobar ellos, él conseguiría confundido acerca de lo que realmente son estos detalles. Dado que el marcador de posición se desvanece a medida que escribe, y no hay una etiqueta, así, siempre queda una confusión si mis datos son correctas o incorrectas.

No queríamos que sus clientes consigan en tal confusión y olvidar el objetivo principal de hacer una compra, es por eso que se nos cae la idea. De lo contrario, podría haber ahorrado un montón de espacio, así.

Finalmente, decidimos no poner en peligro con la experiencia del usuario de todas formas y adoptamos la colocación de la etiqueta por encima de los campos como se muestra en esta imagen:

El campo Dirección de facturación

Se salvó el espacio horizontal que necesitamos para otros elementos y también ayudó en una otra característica que ha sido discutido a continuación.

Los campos necesarios

Después de tratar con la colocación de la etiqueta, la última cosa en las formas que nos dieron era una pesadilla para incluir todos los campos necesarios en la forma. El problema es que el término es bastante necesaria relativa aquí. Un campo de formulario que es necesario para un dueño de la tienda puede ser de ninguna utilidad para el otro.

Por ejemplo, el número de IVA, y el nombre de compañía es un campo necesario de un dueño de la tienda que tiene un negocio de venta B2B. Todos los clientes de negocios europeas también necesitaría este campo para hacer las compras en su tienda. Por otro lado, dueño de una tienda que vende directamente a los consumidores individuales no tendría ningún uso de los campos como el IVA Número y Nombre de la empresa.

¿Cómo lo manejamos?

Fue un momento de abrir nuestra extensión de pagar un poco más y dar a los propietarios de tiendas de algún acceso fácil desarrollo, pero crucial. Añadimos una característica de nuestro módulo, mediante el cual el administrador puede fácilmente habilitar, inhabilitar, añadir y eliminar un campo de la forma de pago y envío. Eso también, sin editar el código. Todo esto se puede hacer desde el propio servidor.

súper Pedido

Por lo tanto, si alguno de los campos no es utilizable para el propietario de una tienda, puede simplemente ocultar con un simple clic y guardar. No hay necesidad de ir a través de los complejos códigos de Magento o Prestashop para hacer esto ahora.

3. página de recarga frecuente en el carro de actualización

Esas cajas de varias páginas tienen una página dedicada a la edición de los carritos de la compra. Fue un reto para nosotros incluimos el carrito de la compra en la página de pago. Los clientes podrían actualizar con frecuencia el carro aumentando o disminuyendo el recuento de productos, la eliminación de un producto de la carreta y así uno.

Todas estas solicitudes requieren una recarga de la página para actualizar todos los detalles de pago y envío y la información de acuerdo con el estado más reciente de la compra. Si un producto ha sido retirado de la carreta, teníamos que actualizar el coste, la cantidad de la compra del producto, métodos de envío totales y así sucesivamente con ella.

Habría llegado a ser tan irritante para los clientes si la página de pago sería recargar de vez en cuando. Este reto se enfrenta a cada desarrollo de pagar una sola página. Sin embargo, hemos conseguido solucionarlo con el carrito de la compra y formulario de solicitud de actualización basado en Ajax.

Confirmar Orden de los campos

Ahora, con el Ajax carrito de compras y actualizaciones, si un cliente cambia nada en el carro, todos los detalles dependientes se actualizarán de forma automática sin necesidad de recargar toda la página de pago. Incluso el cliente puede solicitar un código promocional para el carro y la página validaría el cupón sin ser recargado.

Así es como hemos resuelto estos problemas en nuestra extensión de pago y envío. Usted puede tener una demo gratuita para experimentar todas estas características de la extensión. Demo gratuita una página de pago Magento y PrestaShop y OpenCart .

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *