Cuando lanzaron la tienda online de Zara me fijé en un detalle interesante: cuando haces click en el botón de añadir a la cesta de un producto te sale al lado un botón de “tramitar pedido”, que ya se mantiene mientras tengas productos en el carrito.
Conseguir esto en Prestashop no es muy complicado. Supongamos que creo el botón de tramitar pedido de la siguiente manera, justo a continuación de donde está el botón de añadir al carrito en el archivo producto.tpl de mi tema:
|
1 |
<a class="producto_tramitar{if $cart_qties > 0} block{/if} boton" title="{l s='Checkout'}" href="{$link->getPageLink(">{l s='Checkout'}</a> |
Como veis el botón sería el mismo que tiene el módulo del carrito. Le he añadido la clase “producto_tramitar” y si el carrito tiene productos la clase “block“, ya que en la hoja de estilos he puesto lo siguiente:
|
1 2 3 4 5 6 |
a.producto_tramitar { display: none; } .block { display: inline-block !important; } |
No he puesto más estilos (padding, colores, etc..) a propósito para centrarnos en lo importante: el botón no se verá a no ser que se le añada la clase “block“.
Pero para que aparezca de forma dinámica cuando añadimos a la cesta nuestro primer producto tenemos que usar javascript. Abrimos el archivo ajax-cart.js del módulo “blockcart” y añadimos lo siguiente:
1- Buscad la función updateCartEverywhere : function(jsonData). Aquí veréis lo siguiente:
|
1 2 3 4 |
$('.ajax_cart_no_product').hide(); $('.ajax_cart_quantity').text(jsonData.nbTotalProducts); $('.ajax_cart_quantity').fadeIn('slow'); $('.ajax_cart_total').fadeIn('slow'); |
Añadimos a continuación una línea más en la que decimos que al añadirse un producto a la cesta se muestre (fadeIn(‘slow’)) el elemento con la clase “producto_tramitar“:
|
1 2 3 4 5 |
$('.ajax_cart_no_product').hide(); $('.ajax_cart_quantity').text(jsonData.nbTotalProducts); $('.ajax_cart_quantity').fadeIn('slow'); $('.ajax_cart_total').fadeIn('slow'); $('.producto_tramitar').fadeIn('slow'); |
2- Buscad en el mismo archivo y en la misma función, un poco más abajo, donde pone:
|
1 2 3 4 5 6 7 |
else { $('.ajax_cart_quantity, .ajax_cart_product_txt_s, .ajax_cart_product_txt, .ajax_cart_total').each( function () { $(this).hide(); }); $('.ajax_cart_no_product').show('slow'); } |
Aquí lo que hacemos es ocultar una serie de elementos cuando la cesta se queda vacía. Añadimos el elemento con la clase “producto_tramitar” a la lista:
|
1 2 3 4 5 6 7 |
else { // AÑADIDO .producto_tramitar $('.producto_tramitar, .ajax_cart_quantity, .ajax_cart_product_txt_s, .ajax_cart_product_txt, .ajax_cart_total').each( function () { $(this).hide(); }); $('.ajax_cart_no_product').show('slow'); } |
Y ya está, es así de sencillo.
Pero me entra una duda: ¿Es bueno mostrar el botón de “Tramitar pedido” de esta manera? Por un lado favorecemos que el cliente inicie el trámite de comprar, lo cual es bueno. Pero por otro lado quizás forcemos al cliente a tramitar ya, con lo que no incorporará más productos a la cesta, incrementando la cantidad de pedidos que tienen un sólo producto, lo cual es malo. Sería importante hacer un test A/B para comparar cifras. ¿Qué opináis?
A mi me parece que si Zara lo tiene asi es por que han comprobado que funciona mejor que no tenerlo, por lo menos para su tipo de cliente. Yo voy a probralo y a seguirlo en Analytics a ver si me funciona en segun que tiendas.
Gracias por el aporte.
Yo lo instalé, funciona correctamente salvo una cosa, los nuevos estilos no los recarga solo, hay que refrescar la web. Como se podría solucionar?
buen artículo, algo así andaba buscando 1saludo.
Si el número de productos de tu compra media anda entre un 1 y dos es bueno, no creo que un hipermercado lo pusiera….
Saludos,
Me parece interesante el post. Yo estoy intentando algo para sustituir “añadir al carrito” por “Comprar ahora” pero tengo dudas de como hacer un test A/B en Google con prestashop
Nunca he realizado ninguno y veo que pide una página estatica, y yo utilizo prestashop. Como hacen para lanzar test a/b con prestashop?
Yo lo he probado almacenando la pagina estatica en .html en escritorio y subirla al directorio. Por lo que parece funciona pero si quisiera realizar pruebas de tema (colores, tamaños…) Sabes si existe algún modulo o tutorual para hacerlo?
Estimado/s lo molesto con esta consulta alguien sabe cómo eleiminar los pasos de pedidos del presta? de 5 pasarlo a 3.
saludos y gracias por todo
Pues no he conseguido que funcione. Ponga donde ponga el código en el product.tpl siempre me sale este error. Lo único que cambia son los nº de las lineas del errror.
¿Alquien sabe que hago mal?