[SOLVED] How to make product-quantity buttons mobile friendly

[Ray UK]

Hi,

The buttons in the vertical group up/down for the qty required are not very mobile friendly.

Ive looked in the "add-to-cart.tpl" and they are not in there, it seems they appear via javascript code.

Where is this code, and is it safe to remove and just place bigger buttons before (-) and after (+) the qty field in the "add-to-cart.tpl" instead.

 

Im after making the buttons like this image so they are better for mobile use.

 

Thanks

Edited December 6, 2023 by MerseyRay
Marked as solved (see edit history)

[Ray UK]

OK, so I have got this far

by changing css.

I notice that the code is in the theme.js file and is here

can this code be removed and just place these buttons in the add-to-cart.tpl ? Or is there a reason for having to add some simple buttons via use of js ?

Thanks in advance

Edited June 16, 2021 by MerseyRay (see edit history)

[Trade1]

On 16/6/2021 at 15:27, MerseyRay said:

Bien, he llegado hasta aquí.

cambiando css.

Noto que el código está en el archivo theme.js y está aquí

¿Se puede eliminar este código y simplemente colocar estos botones en add-to-cart.tpl? ¿O hay alguna razón para tener que agregar algunos botones simples mediante el uso de js?

gracias de antemano

Hello. I'm in the same situation, have you managed to change the position of the button? If so, can you share how you did it?

Thanks.

[Ray UK]

On 12/2/2023 at 11:53 PM, Trade1 said:

Hello. I'm in the same situation, have you managed to change the position of the button? If so, can you share how you did it?

Thanks.

Sorry, but I gave up. As you can see, nobody replied to my post.

The theme is supposed to be "mobile first", yet you need a cocktail stick to touch the buttons.  All other ecommerce platforms seem to have buttons that are touch friendly. I really don't understand why we have buttons that small?

[Ray UK]

Ok, so Ive just had another go at this.

I examined the theme.js from another theme which has the buttons I wanted.

There are 4 instances of "verticalbuttons: !1", you need to change that to "verticalbuttons: !0"

I have then just done some basic css to get this look for the product page

The css I used is

.product-quantity .qty .input-group {
	display: flex;
}
.product-quantity .input-group .input-group-btn > .btn-touchspin {
	border: thin solid #bfbfbf;
	color: var(--nwe_darkgrey);
	width: 3rem;
	height: 2.75rem;
	font-size: 2rem;
	font-weight: 100;
	padding: 0;
	justify-content: center
}
.product-quantity #quantity_wanted {
	text-align: center
}

You will then need to do some css for the +/- in the cart as the js changes that too, but the above css is just for the product page.

You can see mine in action on my wip site at https://wip.northwestecigs.uk/batteries/481-xtar-x4-battery-charger.html

This seems to work fine for me. Im not sure if its the correct method.. maybe it can be done somehow with an override because after updating your store you will need to make the alterations to the theme.js again.

Hope this helps

 

Edited December 6, 2023 by MerseyRay (see edit history)

[Trade1]

On 6/12/2023 at 13:05, MerseyRay said:

Ok, so Ive just had another go at this.

Examiné el theme.js de otro tema que tiene los botones que quería.

Hay 4 instancias de "botones verticales:! 1", debe cambiar eso a "botones verticales:! 0"

Luego acabo de hacer algo de CSS básico para conseguir este aspecto para la página del producto.

El CSS que utilicé es

Luego necesitarás hacer algo de CSS para +/- en el carrito ya que js también cambia eso, pero el CSS anterior es solo para la página del producto.

Puedes ver el mío en acción en mi sitio wip en https://wip.northwestecigs.uk/batteries/481-xtar-x4-battery-charger.html

Esto parece funcionar bien para mí. No estoy seguro de si es el método correcto... tal vez se pueda hacer de alguna manera con una anulación porque después de actualizar su tienda necesitará realizar modificaciones en theme.js nuevamente.

Espero que esto ayude

 

Perfect, great job MerseyRay, thank you so much for sharing, I'm going to try it this weekend and comment. Even though I use a Warehouse template, I hope it works for me.
Best regards.

[Ray UK]

1 hour ago, Trade1 said:

Perfect, great job MerseyRay, thank you so much for sharing, I'm going to try it this weekend and comment. Even though I use a Warehouse template, I hope it works for me.
Best regards.

Not a problem.  Glad you brought it back up because it looks so much better with buttons like that. Much easier on the mobile too.

Backup your theme.js before changing those 4 instances of code, just incase you delete a character by mistake

 

[Trade1]

7 hours ago, MerseyRay said:

Not a problem.  Glad you brought it back up because it looks so much better with buttons like that. Much easier on the mobile too.

Backup your theme.js before changing those 4 instances of code, just incase you delete a character by mistake

 

It works, thanks again MerseyRay.