Como modificar la cantidad de unidades al comprar accesorios de un producto en Prestashop

Añadir funcionalidad a Prestashop para modificar las cantidades al añadir accesorios de un producto al carrito.

En estos momentos, estoy metido de lleno (jj, soy más multitarea que win7) en un proyecto de piscinas con prestashop. En el proyecto nos surgio dos tipos diferente de contenidos, uno el de venta normal y otro con información y recambios.

En el contenido de información no se vendería el producto pero si los recambios. La página donde que muestran los accesorios de un producto suele mostrar estos datos.

Y nos dimos cuentas que necesitabamos más datos, como por ejemplo poder modificar el número de unidades de un accesorio a añadir en  el carro, ppor defecto 1 unidad.  Con lo cual segui esta nueva vista.

Para poder añadir la funcionalidad de modificar las unidades a añadir al carro, tendremos que realizar los siguientes paso:

Modificación product.tpl
En el foreach que crea la lista de accesorios añadimos una variable llamada index que tendra el valor de la posición del bucle.
[html]{foreach from=$accessories key=index item=accessory name=accessories_list}[/html]

Luego añadiremos el input segun necesidades y ponemos como id el variable index creada anteriormente.
[html][/html]

Y para finalizar las modicicaciones en este fichero. Modificamos el estilo del enlace del botón de añadir ajax_add_to_cart_button por ajax_accessory_add_to_cart, este estilo nos servira para luego identificar la acción a tomar cuando pulsemos sobre el link, lo veremos más adelante. Lo he llamado de forma diferente para separar el funcionamiento de las vistas de contenidos normales e informativos, así no juntamos los churos con la meninas.

Y añadiremos al link un atributo nuevo idAccesorio=»{$index}», para luego asociar el link con el input.

Modificación ajax-cart.js
Fichero situado en /modules/blockcart, personalmente me gusta dejar todo lo que se pueda dentro del tema, por varias razones porque si actualizas la versión y tocas bloques que vienen por defecto en prestashop se sobreescribes y pierdes los cambios, y por tener todo lo del tema centralizado.

Asi que copiamos dicho fichero y dentro del tema creamos las carpetas /modules/blockcart y pegamos dentro el fichero.

Ahora lo que tenemos que hacer es capturar el click que hacemos en el link de añadir. Para ello utilizaremos el estilo que creamos anteriormente ajax_accessory_add_to_cart. Dentro de la función overrideButtonsInThePage añadimos lo siguiente:

[javascript]
$(‘.ajax_accessory_add_to_cart’).unbind(‘click’).click(function(){
var idAccesorio= $(this).attr(‘idAccesorio’);
var cantidad=$(‘#cantidad-‘+idAccesorio).val();
var idProduct = $(this).attr(‘rel’).replace(‘ajax_id_product_’, »);
ajaxCart.add(idProduct, null, false, this,cantidad);
return false;
});
[/javascript]

La variable idAccesorio, tendrá el valor que tenga el atributo idAccesorio que pusimos en el link, con este valor sabremos que input tiene asociado y obtendremos su valor en la variable cantidad, la cual enviamos a la función add.

Nota: Al dar a añadir, se muestra un recuadro que va del producto al carrito, para informar al usuario que el producto se a añadido, la zona del producto viene marcada por el estilo ajax_block_product, con este estilo podemos definir la zona a mover (div, p, li, table, etc…).

Bueno espero que esto os ayude y disculpar si mis palabras son algo enrevesadas. Si algunos de los que me escuchan tienen otra forma de hacerlo, comentaríos, etc… sería un placer discutir sobre ello.