X

[Análisis] One Page Checkout Prestashop

One Page Checkout Prestashop

El módulo a analizar hoy, modifica, en cierta medida, la forma de comprar por defecto de Presasthop. Se trata de One Page Checkout Prestashop. Es de la empresa presteamshop y lo podemos encontrar a un precio de 89 €. Lo tenéis disponible tanto en la tienda oficial de Prestashop como en su propio sitio web.

One Page Checkout Prestashop: Objetivo del módulo

Sustituye las pantallas del proceso de compra por defecto de Prestashop, mostrando una sola pantalla en la que nuestros usuarios podrán completar el pedido: direcciones de envío y facturación, ver el contenido del carrito, autenticarse en nuestro sitio (para cargar sus direcciones), seleccionar método de pago y transportista, para finalmente poder finalizar el pedido.

Vista de One Page Checkout Prestashop Frontend

Su funcionalidad

No es objeto de este artículo el describir toda su funcionalidad, ni todas sus opciones de configuración sino más bien dar pinceladas de lo que este módulo puede o no puede hacer por ti.

Podremos encontrar en su manual toda la especificación y ver qué nos permite hacer con él.

Este módulo aporta un nuevo concepto de compra en el sistema Prestashop, haciendo la compra, principalmente, mucho más rápida y cómoda.

Aúna en una vista por medio de columnas (en anchos de pantallas de escritorio, ya que es responsive y en dispositivos móviles se adapta el contenido) todos los controles para recoger los datos necesarios para finalizar un pedido.

Por un lado tenemos, la identidad del usuario, siendo compatible con compra anónima, mediante la cual pueden hacer login, crear una cuenta, o simplemente dejar sus datos básicos.

Además, proporciona funcionalidad para que nuestros usuarios hagan login a través de algunas redes sociales.

A continuación, las direcciones de envío y facturación. Más adelante hablaremos de este bloque ya que este módulo proporciona opciones de personalización muy interesantes.

Después el método de envío. Este bloque nos mostrará las opciones de transportista, principalmente, según la dirección de envío que hayamos seleccionado.

[highlight]En Prestashop, podemos configurar los métodos de envío según los productos y no solo por la dirección. Por eso, se nos mostrarán aquellos disponibles según todas las variables: dirección de envío, productos en el carrito de la compra, etc[/highlight]

Los métodos de pago disponibles para un pedido se muestran con el mismo formato que los de transporte (imagen a la izquierda y descripción a su derecha, que cambia el color de fondo cuando seleccionamos dicho elemento). Se mostrarán los métodos que cumplan con las condiciones que se configuren en Prestashop.

Tenemos el resumen  del carrito con los totales mostrando todo el detalle del pedido: pudiendo también aumentar el número de unidades de los productos en tu carrito e, incluso aplicar un código de descuento que actualizará nuestra cesta si es válido.

Después de esto, una caja para que nuestros clientes escriban algún comentario sobre el pedido, así como el checkbox de los términos del servicio.

Al final, tendremos el botón de finalizar compra que validará que el pedido se pueda tramitar según la wrecogida.

Instalación

La instalación es como cualquier otro módulo, pero como decimos, una vez activado, verás una sola pantalla para finalizar pedido.

Trae consigo una serie de controladores y unos overrides de algunas clases que hacen posible esto, principalmente del OrderOpcController.

Configuración

No es nuestro objetivo hacer un tutorial de uso, más bien, queremos presentar las capacidades de este módulo concreto.

La versión que estamos analizando es la última que a fecha de hoy el desarrollador nos ofrece: 2.3.4.

El módulo nos ofrece en su página de backend de configuración multitud de opciones para personalizar todo el proceso.

Configuración One Page Checkout Prestashop

En general, todas las opciones contenidas en los tabs son más o menos intuitivas. Para entender algunas de ellas, deberemos ir a la documentación, y, si no aparece ahí, habrá que ver el código fuente. O cambiar la opción y ver que efecto tiene en el proceso.

Un detalle que nos gustó del módulo es el uso de Google Maps para rellenar cualquiera de las direcciones (facturación y envío).

[highlight]Para esto será necesario conocer cómo se obtiene una Google API KEY[/highlight]

Pasemos a los métodos de pago. El módulo nos permite modificar los iconos (imágenes) para cada opción de pago así como su título y descripción. También podemos configurar los métodos de transporte según el método de pago.

Las pestañas de Diseño, Campos del registro Posiciones de los campos. Con la primera establecemos los colores a algunas zonas según sus estados (métodos de pago, seleccionado y no seleccionado, colores de botones, de textos, etc).

La segunda la usaremos para configurar los campos de los formularios del registro de usuarios, de la dirección de entrega y de la dirección de facturación. Básicamente se trata de poder habilitar o no un campo en el formulario que corresponda y hacerlo obligatorio o no. Además, nos dejará crear campos nuevos para pedir más información (si lo deseamos) al usuario.

Posiciones de los campos la usaremos para reordenar los campos entre sí. El orden de aparición será el que se muestre aquí.

Con el login social podremos configurar los botones de Facebook, Google o Paypal. Para esto tendremos una guía para conseguir configurarlo correctamente.

Traducir. Corregir o añadir traducciones a este módulo. Se muestran todos los literales contenidos en el módulo y podremos sobreescribirlos o establecerlos.

Por último, Editor para introducir alguna modificación personalizada sobre los estilos o sobre el uso del DOM en Javascript.

Algunos consejos de utilización

Como hemos visto, One Page Checkout Prestashop, nos proporciona multitud de opciones para su personalización.

Sin embargo, no es tan customizable como queremos. Si queremos añadir alguna funcionalidad concreta, deberemos siempre sobreescribir la funcionalidad original del código fuente.

Si nuestra tienda (por su diseño o por su ideosincrasia) necesita una estructura distinta de los elementos o un flujo de obtención de los datos de nuestros compradores distintos, deberemos de programar.

Necesitaremos de la potencia de los hooks de Prestashop para alterar el html de esta pantalla (pista: podremos usar el hook DisplayOverrideTemplate para modificar las plantillas de OPC).

Aviso a comerciantes antes de adquirir este módulo

Sencillo de usar y configurar y no requiere de conocimientos técnicos. Siempre y cuando no queramos más que lo que nos ofrece.

Pero, cada tienda es un mundo y tienes especificaciones distintas y quiere diferenciarse de sus competidores de alguna forma. Y este módulo es muy utilizado por su nuevo concepto de finalización de un pedido (distinto al que viene por defecto en Prestashop).

El uso de este módulo tiene más ventajas que inconvenientes si tu intención es no tener una personalización que va más allá de lo que nos ofrece (colores, posición de campos, y poco más). Como inconvenientes, es muy utilizado y, su uso, sin mucha personalización puede derivar en que un usuario pueda pensar que esto es «una tienda más».

[highlight]Queremos decir con esto que una tienda necesita de personalización y de distinción frente a sus homólogos. Creación de una marca.  Esto requerirá evaluar las tiendas competidoras para intentar desmarcarse de ellas. Estudiando los puntos fuertes y evitando los débiles de aquellas.[/highlight]

Resumen

  • Módulo sencillo, tanto en su configuración como en su manejo.
  • No requiere de conocimientos técnicos excesivos si se usa tal y como viene (y con sus funcionalidades).
  • Consideramos que no es muy personalizable. Conociendo el código fuente, no está pensado para ello: ni en su código PHP ni en su Javascript
  • Recomendamos su utilización por las ventajas de tener de un vistazo toda la información del pedido.

Hay más módulos como este (que iremos analizando) con el mismo objetivo pero con otras características.

Es bueno, antes de tomar una decisión, conocer los más importantes.

Resumen
Fecha
Módulo
One Page Checkout Prestashop
Valoración
3
Related Post