¿Como añadir el campo de cantidad en los listados de productos de Prestashop?

En este artículo vamos a aprender como añadir el campo de cantidad en las versiones de Prestashop 1.5.x a añadir a la cesta en los listados de los productos de Prestashop.

Añadir este campo en los listados del producto no es aplicable a según que tiendas pero si que podría resultar útil para tiendas donde no es importante acceder a la ficha del producto para adquirar grandes cantidades del producto. El objetivo sería ponérselo más fácil al consumidor final.

Será necesario tener conocimientos de programación para editar archivos .tpl y javascript.

Lo primero que tendremos que hacer es situarnos en los archivos de la plantilla que se esté utilizando y abrir el archivo product-list.tpl y buscar el botón o link que añade a la cesta con efecto ajax.

  <a class="exclusive button ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart', true, NULL, "id_product={$product.id_product|intval}&token={$static_token}&add")}">{l s='Add to cart'}</a>
Y lo sustituiremos por:
 
  <label>{l s='Quantity :'}</label> <input type="text" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" id="quantity_wanted_{$product.id_product|intval}" value="1" size="2" maxlength="3" /> <a class="exclusive button ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart', true, NULL, "id_product={$product.id_product|intval}&token={$static_token}&add")}">{l s='Add to cart'}</a>

Si te fijas, tan solo estamos sutituyendo el botón de añadir a la cesta por un campo de texto para la cantidad, su label y el botón con enlace distinto.

El siguiente paso sería sobreescribir el archivo ajax-cart.js del módulo blockcart.

Para hacerlo, accederemos al directorio de módulos de Prestashop y localizaremos la carpeta blockcart. Dentro estará el archivo que buscamos. Este archivo nos lo tenemos que llevar a la plantilla para editarlo. Lo copiaremos en el siguiente directorio:themes/Xtheme/js/modules/blockcart/ajax-cart.js.

Abre este archivo y busca la siguiente sentencia:

ajaxCart.add(idProduct, null, false, this);
 
Reemplázala por:
 
ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct).val());

Con esto último ya conseguiríamos añadir al carrito con el típico efecto la cantidad que ingresemos en el campo de texto.

Te preguntarás ¿porque tengo que sobreescribir el módulo blockcart llevándolo a la plantilla si puedo hacer los cambios en el mismo directorio de módulos?

La respuesta es muy simple, es por el simple hecho de que para futuras actualizaciones, si tu realizas una actualización y modificaste el módulo blockcart directamente en modules/ se perderán tus cambios ya que el módulo al ser nativo de Prestashop también se actualizará.