Jump to content

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


MerseyRay

Recommended Posts

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.

1132157373_Screenshot_2021-05-17AspirePockexAIOKit.png.1fbc3792926e4befa0ab13c14d212038.png

 

Thanks

Edited by MerseyRay
Marked as solved (see edit history)
Link to comment
Share on other sites

  • 5 weeks later...

OK, so I have got this far

image.png.656642ef67c62abda493dec0b6483bbe.png

by changing css.

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

code.jpg.4ac0301d5861e3e7fdbd7dcb82ceb802.jpg

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 by MerseyRay (see edit history)
Link to comment
Share on other sites

  • 2 years later...
On 16/6/2021 at 15:27, MerseyRay said:

Bien, he llegado hasta aquí.

imagen.png.656642ef67c62abda493dec0b6483bbe.png

cambiando css.

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

código.jpg.4ac0301d5861e3e7fdbd7dcb82ceb802.jpg

¿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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

image.png.cd2af5ceb8c8b15604c60e372aa02299.png

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 by MerseyRay (see edit history)
Link to comment
Share on other sites

  • MerseyRay changed the title to [SOLVED] How to make product-quantity buttons mobile friendly
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.

imagen.png.cd2af5ceb8c8b15604c60e372aa02299.png

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.

Link to comment
Share on other sites

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 :)

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...