Change Input Group Quantity

[pierrepli]

Hi,

I'd like to change the display for the quantity buttons on a product page on Prestashop 1.7.3.2

From what I got, the default display is Bootstrap TouchSpin with vertical alignment, and I'd like to change it for a classic vue, with the - at the left of the field, and the + at the right of the field.

I'd also like to add custom icons for - and +

Any idea how to do so?

Thanks,

Pierre

[caovillanueva]

you will found the code inside theme.js (compressed)

look the follow code and edit as you wish:

<button class="'+T.buttondown_class+' bootstrap-touchspin-up" type="button"><i class="'+T.verticalupclass+'"></i></button><button class="'+T.buttonup_class+' bootstrap-touchspin-down" type="button"><i class="'+T.verticaldownclass+'"></i></button>

[MaXi32]

On 5/26/2018 at 2:18 AM, caovillanueva said:

you will found the code inside theme.js (compressed)

look the follow code and edit as you wish:

<button class="'+T.buttondown_class+' bootstrap-touchspin-up" type="button"><i class="'+T.verticalupclass+'"></i></button><button class="'+T.buttonup_class+' bootstrap-touchspin-down" type="button"><i class="'+T.verticaldownclass+'"></i></button>

I think this is not the correct way to do it. You should not directly edit theme.js file.

[Ali Samie]

11 hours ago, MaXi32 said:

I think this is not the correct way to do it. You should not directly edit theme.js file.

I have the same opinion

[Shonen]

I'm searching for the exact same solution, if anyone find out how to change this behavior without touching default .js file, I'll be glad !

I tried something like this in my theme custom.js but it doesn't change anything

  /* override touchspin behavior */
  $('#quantity_wanted').TouchSpin({
    verticalbuttons:false,
    verticalupclass:"fa fa-touchspin-up",
    verticaldownclass:"fa fa-touchspin-down",
    buttondown_class:"btn btn-touchspin js-touchspin js-increase-product-quantity",
    buttonup_class:"btn btn-touchspin js-touchspin js-decrease-product-quantity"
  });

 

[DARKF3D3]

Anyone manage to find a way to do this?
With smartphone it is important to have separate buttons on the left and right of the field, as having them close together vertically can cause unintentional touches.

[Butch0071]

anyone? Any hints?

[pishkus]

Here is a quick sample how you can change the up/down using only css. Also, you can add custom images. I used svg in my example.

This example only transforms cart page buttons. I think it is easily adaptable in other places.

.cart-grid .bootstrap-touchspin {
    position: relative;
    padding: 0 30px;
  }
  .cart-grid .bootstrap-touchspin .btn-touchspin {
    position: absolute;
    width: 30px;
    top: 0;
    bottom: 0;
    height: auto;
    padding: 0;
  }
  .cart-grid .bootstrap-touchspin .btn-touchspin i {
    position: initial;
    width: 100%;
    height: 100%;
    display: block;
  }
  .cart-grid .bootstrap-touchspin .btn-touchspin i::after {
    content: '';
  }
  
  .cart-grid .bootstrap-touchspin .input-group-btn-vertical {
    position: initial;
  }
  .cart-grid .bootstrap-touchspin .bootstrap-touchspin-up {
    right: 0;
  }
  .cart-grid .bootstrap-touchspin .bootstrap-touchspin-down {
    left: 0;
  }
  .cart-grid .bootstrap-touchspin .bootstrap-touchspin-up i {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1a11 11 0 1 0 11 11A11.013 11.013 0 0 0 12 1zm0 20a9 9 0 1 1 9-9 9.011 9.011 0 0 1-9 9zm6-8a6 6 0 0 1-12 0 1 1 0 0 1 2 0 4 4 0 0 0 8 0 1 1 0 0 1 2 0zM8 10V9a1 1 0 0 1 2 0v1a1 1 0 0 1-2 0zm6 0V9a1 1 0 0 1 2 0v1a1 1 0 0 1-2 0z"/></svg>');
  }
  .cart-grid .bootstrap-touchspin .bootstrap-touchspin-down i {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 11V9a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm7 1a1 1 0 0 0 1-1V9a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1zm-3 2a6.036 6.036 0 0 0-4.775 2.368 1 1 0 1 0 1.55 1.264 4 4 0 0 1 6.45 0 1 1 0 0 0 1.55-1.264A6.036 6.036 0 0 0 12 14zm11-2A11 11 0 1 1 12 1a11.013 11.013 0 0 1 11 11zm-2 0a9 9 0 1 0-9 9 9.01 9.01 0 0 0 9-9z"/></svg>');
  }

 

Edited February 5 by pishkus (see edit history)