Modificar la cantidad en múltiplos según el valor de la cantidad mínima

[turbis]

Buenos días,

Estoy desarrollando una web de flores, donde el precio es por unidad de flor pero se compran por paquetes de varias flores, es decir, existe una cantidad mínima o cantidad de flores en el paquete, 20 por ejemplo, y no se pueden comprar ni 19 ni 21, sino que de 20 debería de pasar a 40, y de 40 a 60, y así sucesivamente.

He conseguido dicha funcionalidad en el selector de cantidad en la ficha del producto, y funciona perfectamente, tanto si pinchas en el botón de + o en el botón de -, hace la suma y la resta en múltiplos según el campo de cantidad mínima y se puede añadir el producto al carrito con la cantidad elegida. Pero existe un fallo en el selector de cantidad del carrito.

Cuando estás en el carrito y pinchas en el botón de + o -, selecciona la cantidad en múltiplos, pero cuando hace la llamada al ajax para actualizar la cantidad y el total del precio aumenta o disminuye la cantidad de uno en uno (hace un +1 o un -1). Si tengo 20 en la cantidad y le doy al + se pone bien en 40 se carga el ajax y el input da un salto y se pone en 21 por lo que actualiza la cantidad a 21 y luego el valor de input salta y se pone de nuevo en 20, pero ya se ha guardado la cantidad de 21.

He visto en el foro que varios tienen este problema, y he leído que es un bug de prestashop que todavía no se le ha dado solución. En estos post lo pone:

https://github.com/PrestaShop/PrestaShop/issues/10162

Incluso hay un vídeo donde se puede ver, como cuando pincha en el botón + o -, en el input se coloca mal el número y luego da un salto al número correcto (que lo que me pasa a mí, Si tengo 20 en la cantidad y le doy al + se pone bien en 40 se carga el ajax y el input da un salto y se pone en 21 por lo que actualiza la cantidad a 21 y luego el valor de input salta y se pone de nuevo en 20, pero ya se ha guardado la cantidad de 21): https://www.youtube.com/watch?v=BI3s16RY53o&feature=youtu.be

Estoy usando Prestashop 1.7.5.2, y adjunto también capturas para que vean lo que sucede.

He hecho los siguientes cambios en estos archivos:

En Product.js (Añadidos los valores de step y max en varias líneas del código):

prestashop.on('updatedProduct', function (event) {
    createInputFile();
    coverImage();
    if (event && event.product_minimal_quantity) {
      const minimalProductQuantity = parseInt(event.product_minimal_quantity, 10);
      const quantityInputSelector = '#quantity_wanted';
      let quantityInput = $(quantityInputSelector);
      let quantityMax = document.getElementById('Pmax').value;

      // @see http://www.virtuosoft.eu/code/bootstrap-touchspin/ about Bootstrap TouchSpin
      // quantityInput.trigger('touchspin.updatesettings', {min: minimalProductQuantity});
      quantityInput.trigger('touchspin.updatesettings', {min: minimalProductQuantity,step: minimalProductQuantity,max: quantityMax});
    }
    imageScrollBox();
    $($('.tabs .nav-link.active').attr('href')).addClass('active').removeClass('fade');
    $('.js-product-images-modal').replaceWith(event.product_images_modal);
  });

function createProductSpin()
  {
    let quantityInput = $('#quantity_wanted');
    quantityInput.TouchSpin({
      verticalbuttons: true,
      verticalupclass: 'material-icons touchspin-up',
      verticaldownclass: 'material-icons touchspin-down',
      buttondown_class: 'btn btn-touchspin js-touchspin',
      buttonup_class: 'btn btn-touchspin js-touchspin',
      min: parseInt(quantityInput.attr('min'), 10),
      max: parseInt(quantityInput.attr('max'), 10),
      step: parseInt(quantityInput.attr('step'), 10)
    });

    quantityInput.on('change', function (event) {
      let $productRefresh = $('.product-refresh');
      $(event.currentTarget).trigger('touchspin.stopspin');
      $productRefresh.trigger('click', {eventType: 'updatedProductQuantity'});
      event.preventDefault();

      return false;
    });
  }

En product-add-to-cart.tpl (Añadidos los valores de step y max en varias líneas del código):

<div class="qty">
  <span class="control-label">{l s='Quantity' d='Shop.Theme.Catalog'}</span>
  <input
         type="text"
         name="qty"
         id="quantity_wanted"
         value="{$product.quantity_wanted}"
         class="input-group"
         min="{$product.minimal_quantity}"
         step="{$product.minimal_quantity}"
         max="{$product.quantity_available}"
         />
</div>

En cart.js (Añadidos los valores de step y max en varias líneas del código):

function createSpin()
{
  $.each($(spinnerSelector), function (index, spinner) {
     $(spinner).TouchSpin({
      verticalbuttons: true,
      verticalupclass: 'material-icons touchspin-up',
      verticaldownclass: 'material-icons touchspin-down',
      buttondown_class: 'btn btn-touchspin js-touchspin js-increase-product-quantity',
      buttonup_class: 'btn btn-touchspin js-touchspin js-decrease-product-quantity',
      min: parseInt($(spinner).attr('min'), 10),
      max: parseInt($(spinner).attr('max'), 10),
      step: parseInt($(spinner).attr('step'), 10)   
    });
  });
}

En cart-detailled-product-line.tpl (Añadidos los valores de step y max en varias líneas del código):

<div class="col-md-6 col-xs-6 qty">
  {if isset($product.is_gift) && $product.is_gift}
  <span class="gift-quantity">{$product.quantity}</span>
  {else}
  <input
         class="js-cart-line-product-quantity"
         data-down-url="{$product.down_quantity_url}"
         data-up-url="{$product.up_quantity_url}"
         data-update-url="{$product.update_quantity_url}"
         data-product-id="{$product.id_product}"
         type="text"
         value="{$product.quantity}"
         name="product-quantity-spin"
         min="{$product.minimal_quantity}"
         step="{$product.minimal_quantity}"
         max="{$product.quantity_available}"
   />
  {/if}
</div>

En theme.js (Añadidos los valores de step y max en varias líneas del código):

!function() {
  var t = (0, o.default)("#quantity_wanted");
  t.TouchSpin({
    verticalbuttons: !0,
    verticalupclass: "material-icons touchspin-up",
    verticaldownclass: "material-icons touchspin-down",
    buttondown_class: "btn btn-touchspin js-touchspin",
    buttonup_class: "btn btn-touchspin js-touchspin",
    min: parseInt(t.attr("min"), 10),
    step: parseInt(t.attr("step"), 10),
    max: parseInt(t.attr("max"), 10)
});
  
function o() {
  s.default.each((0, s.default)(c), function(t, e) {
    (0, s.default)(e).TouchSpin({
      verticalbuttons: !0,
      verticalupclass: "material-icons touchspin-up",
      verticaldownclass: "material-icons touchspin-down",
      buttondown_class: "btn btn-touchspin js-touchspin js-increase-product-quantity",
      buttonup_class: "btn btn-touchspin js-touchspin js-decrease-product-quantity",
      min: parseInt((0, s.default)(e).attr("min"), 10),
      step: parseInt((0, s.default)(e).attr("step"), 10),
      max: 1e6
    })
  }), f.switchErrorStat()
}

Si alguien me puede echar una mano...

Gracias de antemano!!! Un saludo!

[LaVallDesign]

Hola turbis!

Yo tengo una opción parecida en una PS 1.6 y quiero adaptarla a PS1.7 y tu opción me gusta pero tengo alguna duda. ¿Donde tienes el archivo cart.js porque yo estoy en la versión 1.7.6.1  y no lo encuentro?

Por otra parte entiendo que product.js te refieres a products.js dentro del js/admin.

Respecto al error que comentas, en mi versión ya está corregido. Puede que actualizando te se solucione.

Gracias por el aporte.

[turbis]

Buenas LaVallDesign,

Los archivos product.js y cart.js, yo los tengo en themes/mi-tema/_dev/js/. Si no encuentras el archivo, puedes hacer una búsqueda en "Todos los ficheros" con algún programa de edición de texto o código, buscando alguna línea del código, por ejemplo para el cart.js puedes buscar la cadena "min:parseInt" o por el nombre de la función "function createSpin()". Lo más seguro que los archivos js estén minimizados, por lo que es un poco engorro hacer los cambios y encontrar cadenas de código porque hay que quitar algunos espacios para que te encuentre según que cadenas de código.

El producto.js dentro del js/admin también le hice los cambios, pero en mi tema como ya te he dicho hay otro product.js en themes/mi-tema/_dev/js/ que también toqué.

Tengo que probar a actualizar a la versión 1.7.6.1 a ver si se soluciona.

Gracias! Un saludo!

[alvaro_soloc]

Hola, a día de hoy tengo el mismo problema que tú con el carrito, además a mí ni siquiera el input me suma correctamente, por que yo no tengo el archivo cart.js. Pudiste solucionarlo y que tanto el input como el ajax carguen correctamente? Si alguien tiene la solución, se lo agradecería. Uso prestashop 1.7.8.4

Muchas Gracias

Edited April 1, 2022 by alvaro_soloc (see edit history)

[luishuaymana]

Hola @turbis,
aqui la respuesta a tu duda, en otro hilo.

Y si quieres ver la respuesta en video te lo dejo también.
https://www.youtube.com/watch?v=SspCzjBAvTw