(Prestashop) Blockcart: Añadir scroll vertical

En esta entrada vamos a ver una manera rápida y sencilla de reducir el tamaño del desplegable del módulo blockcart añadiendo un scroll vertical.

A continuación, voy a enumerar todos los pasos a seguir para conseguirlo:

1) Debemos modificar el archivo css propio del módulo (blockcart.css) disponible en la ruta themes\tu-tema\css\modules\blockcart y añadir la siguiente clase:

  1. .scrollvertical{
  2.    overflow-y:scroll;
  3.    height:300px;
  4. }

2) Ahora debemos modificar la tpl propia del módulo (blockcart.tpl) disponible en la ruta themes\tu-tema\modules\blockcart.
Hay que buscar la siguiente línea de código:

  1. <dl class="products">

y sustituirla por la siguiente:

  1. <dl class="products {if $products|@count>3}scrollvertical{/if}">

Con este paso, lo que estamos haciendo es indicarle al módulo blockcart, que a partir de tres elementos en el carrito queremos que se visualice el scroll vertical, con el css aplicado en el primer punto de ésta entrada.

3) Y como último paso, ahora tenemos que modificar el archivo js correspondiente al módulo blockcart (ajax-cart.js) disponible en la ruta themes\tu-tema\js\modules\blockcart. Lo que debemos hacer es lo siguiente.

Vamos a buscar el siguiente comentario en el código «//send the ajax request to the server» (la primera coincidencia de dicha búsqueda) (aproximadamente en la línea 319).

El código original que nos vamos a encontrar es el siguiente:

  1. //send the ajax request to the server
  2.  
  3.         $.ajax({
  4.             type: 'POST',
  5.             headers: { "cache-control": "no-cache" },
  6.             url: baseUri + '?rand=' + new Date().getTime(),
  7.             async: true,
  8.             cache: false,
  9.             dataType : "json",
  10.             data: 'controller=cart&add=1&ajax=true&qty=' + ((quantity && quantity != null) ? quantity : '1') + '&id_product=' + idProduct + '&token=' + static_token + ( (parseInt(idCombination) && idCombination != null) ? '&ipa=' + parseInt(idCombination): '' + '&id_customization=' + ((typeof customizationId !== 'undefined') ? customizationId : 0)),
  11.             success: function(jsonData,textStatus,jqXHR)
  12.             {
  13.                 // add appliance to whishlist module
  14.                 if (whishlist && !jsonData.errors)
  15.                     WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]);
  16.  
  17.                 if (!jsonData.hasError)
  18.                 {
  19.                     if (contentOnly)
  20.                         window.parent.ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
  21.                     else
  22.                         ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
  23.  
  24.                     if (jsonData.crossSelling)
  25.                         $('.crossseling').html(jsonData.crossSelling);
  26.  
  27.                     if (idCombination)
  28.                         $(jsonData.products).each(function(){
  29.                             if (this.id != undefined && this.id == parseInt(idProduct) && this.idCombination == parseInt(idCombination))
  30.                                 if (contentOnly)
  31.                                     window.parent.ajaxCart.updateLayer(this);
  32.                                 else
  33.                                     ajaxCart.updateLayer(this);
  34.                         });
  35.                     else
  36.                         $(jsonData.products).each(function(){
  37.                             if (this.id != undefined && this.id == parseInt(idProduct))
  38.                                 if (contentOnly)
  39.                                     window.parent.ajaxCart.updateLayer(this);
  40.                                 else
  41.                                     ajaxCart.updateLayer(this);
  42.                         });
  43.                     if (contentOnly)
  44.                         parent.$.fancybox.close();
  45.                 }
  46.                 else
  47.                 {
  48.                     if (contentOnly)
  49.                         window.parent.ajaxCart.updateCart(jsonData);
  50.                     else
  51.                         ajaxCart.updateCart(jsonData);
  52.                     if (addedFromProductPage)
  53.                         $('#add_to_cart button').removeProp('disabled').removeClass('disabled');
  54.                     else
  55.                         $(callerElement).removeProp('disabled');
  56.                 }
  57.  
  58. emptyCustomizations();

Y debemos añadir lo siguiente:

  1. //send the ajax request to the server
  2.  
  3.         $.ajax({
  4.             type: 'POST',
  5.             headers: { "cache-control": "no-cache" },
  6.             url: baseUri + '?rand=' + new Date().getTime(),
  7.             async: true,
  8.             cache: false,
  9.             dataType : "json",
  10.             data: 'controller=cart&add=1&ajax=true&qty=' + ((quantity && quantity != null) ? quantity : '1') + '&id_product=' + idProduct + '&token=' + static_token + ( (parseInt(idCombination) && idCombination != null) ? '&ipa=' + parseInt(idCombination): '' + '&id_customization=' + ((typeof customizationId !== 'undefined') ? customizationId : 0)),
  11.             success: function(jsonData,textStatus,jqXHR)
  12.             {
  13.                 // add appliance to whishlist module
  14.                 if (whishlist && !jsonData.errors)
  15.                     WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]);
  16.  
  17.                 if (!jsonData.hasError)
  18.                 {
  19.                     if (contentOnly)
  20.                         window.parent.ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
  21.                     else
  22.                         ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
  23.  
  24.                     if (jsonData.crossSelling)
  25.                         $('.crossseling').html(jsonData.crossSelling);
  26.  
  27.                     if (idCombination)
  28.                         $(jsonData.products).each(function(){
  29.                             if (this.id != undefined && this.id == parseInt(idProduct) && this.idCombination == parseInt(idCombination))
  30.                                 if (contentOnly)
  31.                                     window.parent.ajaxCart.updateLayer(this);
  32.                                 else
  33.                                     ajaxCart.updateLayer(this);
  34.                         });
  35.                     else
  36.                         $(jsonData.products).each(function(){
  37.                             if (this.id != undefined && this.id == parseInt(idProduct))
  38.                                 if (contentOnly)
  39.                                     window.parent.ajaxCart.updateLayer(this);
  40.                                 else
  41.                                     ajaxCart.updateLayer(this);
  42.                         });
  43.                     if (contentOnly)
  44.                         parent.$.fancybox.close();
  45.                 }
  46.                 else
  47.                 {
  48.                     if (contentOnly)
  49.                         window.parent.ajaxCart.updateCart(jsonData);
  50.                     else
  51.                         ajaxCart.updateCart(jsonData);
  52.                     if (addedFromProductPage)
  53.                         $('#add_to_cart button').removeProp('disabled').removeClass('disabled');
  54.                     else
  55.                         $(callerElement).removeProp('disabled');
  56.                 }
  57.                 /* JS Scroll Vertical */
  58.                 if($('.cart_block_list:first dl.products dt').length > 2)
  59.                     $('.cart_block_list:first dl.products').addClass('scrollvertical');
  60.                 else
  61.                     $('.cart_block_list:first dl.products').removeClass('scrollvertical');
  62.                 /* JS Scroll Vertical */
  63.  
  64.                 emptyCustomizations();

Luego buscamos el comentario «//remove a product from the cart via ajax» (aproximadamente en la línea 410), el código original es el siguiente:

  1. //remove a product from the cart via ajax
  2.     remove : function(idProduct, idCombination, customizationId, idAddressDelivery){
  3.         //send the ajax request to the server
  4.         $.ajax({
  5.             type: 'POST',
  6.             headers: { "cache-control": "no-cache" },
  7.             url: baseUri + '?rand=' + new Date().getTime(),
  8.             async: true,
  9.             cache: false,
  10.             dataType : "json",
  11.             data: 'controller=cart&delete=1&id_product=' + idProduct + '&ipa=' + ((idCombination != null && parseInt(idCombination)) ? idCombination : '') + ((customizationId && customizationId != null) ? '&id_customization=' + customizationId : '') + '&id_address_delivery=' + idAddressDelivery + '&token=' + static_token + '&ajax=true',
  12.             success: function(jsonData) {
  13.                 ajaxCart.updateCart(jsonData);
  14.                 if ($('body').attr('id') == 'order' || $('body').attr('id') == 'order-opc')
  15.                     deleteProductFromSummary(idProduct+'_'+idCombination+'_'+customizationId+'_'+idAddressDelivery);
  16.             },

Y debemos modificarlo tal y como indico en el siguiente fragmento de código:

  1. //remove a product from the cart via ajax
  2.     remove : function(idProduct, idCombination, customizationId, idAddressDelivery){
  3.         //send the ajax request to the server
  4.         $.ajax({
  5.             type: 'POST',
  6.             headers: { "cache-control": "no-cache" },
  7.             url: baseUri + '?rand=' + new Date().getTime(),
  8.             async: true,
  9.             cache: false,
  10.             dataType : "json",
  11.             data: 'controller=cart&delete=1&id_product=' + idProduct + '&ipa=' + ((idCombination != null && parseInt(idCombination)) ? idCombination : '') + ((customizationId && customizationId != null) ? '&id_customization=' + customizationId : '') + '&id_address_delivery=' + idAddressDelivery + '&token=' + static_token + '&ajax=true',
  12.             success: function(jsonData) {
  13.                 ajaxCart.updateCart(jsonData);
  14.                 if ($('body').attr('id') == 'order' || $('body').attr('id') == 'order-opc')
  15.                     deleteProductFromSummary(idProduct+'_'+idCombination+'_'+customizationId+'_'+idAddressDelivery);
  16.                     /* JS Scroll Vertical */
  17.                     if(($('.cart_block_list:first dl.products dt').length-1) > 2)
  18.                         $('.cart_block_list:first dl.products').addClass('scrollvertical');
  19.                     else
  20.                         $('.cart_block_list:first dl.products').removeClass('scrollvertical');
  21.                     /* JS Scroll Vertical */
  22.             },

Como anotación y punto a tener en cuenta recordad que siempre debéis borrar la caché para poder apreciar los cambios realizados. Esto lo podéis hacer en: Parámetros Avanzados > Rendimiento > Vaciar el caché.

Luego ya sólo tenéis que ir a vuestra tienda para ver vuestro scroll en el desplegable del carrito. Este sería el resultado final:

Scroll Vertical en blockcart

Scroll Vertical en blockcart

También podréis realizar cambios en el CSS para cambiarle la apariencia al scroll vertical, eso ya lo podríais personalizar a vuestro gusto.

Y hasta aquí la entrada de hoy. Espero que os haya resultado de utilidad.