Agregar manualmente la cantidad de productos al carrito en Prestashop 1.6

12 agosto, 2015 |

Si te gusta, compártelo ;)

Insertar hooks en páginas cms de prestashop 1.6, vista previa

En este tutorial veremos cómo agregar manualmente la cantidad de productos deseada a la cesta en Prestashop 1.6; esto lo conseguiremos mediante la adición de un campo (etiqueta input) en el listado de productos (product-list.tpl).

El archivo product-list.tpl

Debemos abrir el archivo prestashop/themes/default-bootstrap/product-list.tpl de nuestra plantilla. Buscar el siguiente código alrededor de la línea 149:

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE}
    {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
        {capture}add=1&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}{/capture}
        <a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity >= 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
            <span>{l s='Add to cart'}</span>
        </a>
    {else}
        <span class="button ajax_add_to_cart_button btn btn-default disabled">
            <span>{l s='Add to cart'}</span>
        </span>
    {/if}
{/if}

Debemos agregar la siguiente línea al código:

<input style="font-size:27px; text-align:center; width:30px;" type="text" name="qty" id="quantity_to_cart_{$product.id_product|intval}" value="1"/>

De forma que quede así:

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE}
    {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
        {capture}add=1&amp;id_product={$product.id_product|intval}{if isset($static_token)}&amp;token={$static_token}{/if}{/capture}
  <input style="font-size:27px; text-align:center; width:30px;" type="text" name="qty" id="quantity_to_cart_{$product.id_product|intval}" value="1"/>
        <a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity >= 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
            <span>{l s='Add to cart'}</span>
        </a>
    {else}
        <span class="button ajax_add_to_cart_button btn btn-default disabled">
            <span>{l s='Add to cart'}</span>
        </span>
    {/if}
{/if}

Hecho esto, guardamos cambios y refrescamos nuestra tienda para visualizar el nuevo campo. Todavía no funcionará, nos queda un último paso.

Si no vemos el nuevo campo vacíar la cache de la tienda y recompilar la plantilla.

El archivo ajax-cart.js

El último archivo que debemos modificar se encuentra en la ruta prestashop/themes/default-bootstrap/js/modules/blockcart/ajax-cart.js

Este archivo javaScript contiene secuencias de comandos que manejan características ajax del carrito de nuestra tienda. Cada botón "Añadir al carrito" utiliza este archivo para ejecutar el proceso de adición al carrito.

Alrededor de la línea 137 encontraremos la siguiente línea:

ajaxCart.add(idProduct, null, false, this, minimalQuantity);

Cambiar esta línea a:

ajaxCart.add(idProduct, null, false, this, $('#quantity_to_cart_'+idProduct+'').val());

Probando el resultado...

Guardar cambios en el archivo ajax-cart.js y probar el resultado en nuestra tienda. Si no funciona deberemos vacíar la cache de la tienda o recompilar la plantilla

Agregar manualmente la cantidad de productos al carrito en Prestashop 1.6

14 comentarios:

  1. Como hago para que el precio me aparezca en otro lado es decir.

    Supongamos que es el precio de un producto, y al darle click me lo redirija al carrito.

    Estoy buscando la manera y no encuentro como expresar el valor de un producto de acuerdo al ID del producto :(

    ResponderEliminar
    Respuestas
    1. Hola, no he entendido bien lo que quieres decir. ¿Podrias explicarlo un poco mejor?

      Eliminar
  2. Hola, he copiado las lineas de codigo en los dos ficheros, tal y como indicas, pero pese poner una cantidad diferente, siempre me añade al carrito 1 unidad, creo que he recompilado la plantilla, que me puede pasar?
    gracias un saludo

    ResponderEliminar
    Respuestas
    1. Hola,
      Vacía la caché de la tienda también. Asegurate de que has editado los archivos correctos. Y pruébalo en otro navegador también.
      Un saludo.

      Eliminar
  3. gracias, lo he solucionado, como bien decias era problema de la cache en un navegador
    Un saludo y gracias de nuevo por tu esfuerzo

    ResponderEliminar
  4. Buenas tardes!
    Este post es muy interesante!
    En AlabazWeb Pro hemos desarollado un módulo que además de permitir al cliente elegir la cantidad de producto que desea desde la home, también les dejará seleccionar los atributos y consultar sus características.
    El administrador de la tienda también podrá elegir como quiere mostrar los atributos (imágenes o combo).
    http://www.alabazweb.com/es/modulos-prestashop-para-mejorar-la-usabilidad/374-listado-de-productos-personalizados.html

    De esta forma el usuario podrá comprar lo que necesita sin necesidad de entrar en la página del producto.

    Te dejo un enlace a la demo para que veas como funciona: http://www.showdemo023ps.com.es/infoproductlist/es/

    Espero que sea de tu agrado.

    Un saludo.

    ResponderEliminar
  5. Francisco eres mi héroe! Muchas gracias por el código, sólo te puse type="number" en lugar de "text" y quedó perfecto. ;)

    ResponderEliminar
  6. Wonderful, what a website it is! This blog gives useful information to us, keep it up.
    prestashop 1.6

    ResponderEliminar
  7. Yo lo que necesito es eliminar cantidad y el cuadro de + y - ya que trabajo con reglas de precios, y no hay manera, podrías ayudarme porfavor?

    ResponderEliminar
  8. Hola, me gustaría saber si es mi plantilla o se queda asi. en mi Web el cuadro input se queda encima en lugar de al lado

    ResponderEliminar
    Respuestas
    1. Hola, asegúrate de que has insertado el cuadro input antes del botón de Añadir al Carrito, si no es eso será cosa de CSS.

      Eliminar