Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
 
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site
 All Forums
 Technical
 Advanced Tips and Tricks - NO QUESTIONS PLEASE
 Instant Mobile Friendly radio input options
Author « Topic »  

dbdave
ECT Moderator

USA
9751 Posts

Posted - 04/05/2021 :  21:49:12  
Clicking a tiny radio button on a small touch screen can be difficult...
These days it's a good idea to add the <label> tag to the inputs and then a user can just click the text and need not click the tiny dot.

Here is some simple Javascript that will do that on all of your product options on the product details pages.
This is tested to work on .asp and .php versions.
Open your proddetail.asp (or .php) file in your html editor and add the following code below the include line that call the products. (<!--#include file="vsadmin/inc/incproddetail.asp"--> or <?php include "vsadmin/inc/incproddetail.php" ?> )

<script>
//ADD LABEL TAG for options
if (document.getElementsByClassName("rcoption")) {
var prelabel = document.getElementsByClassName("rcoption")
var i;
for (i = 0; i < prelabel.length; i++) {
var preinput = prelabel[i].innerHTML;
prelabel[i].innerHTML = "<label>"+preinput+"</label>";
}}
</script>


The code looks for radio options and if found, loops through them the adds an opening and closing <label> tag around each.

DEMO HERE - https://www.floridasurpluswarehouse.com/dev/proddetail.php?prod=pc001
Click the text associated with the Monitor option.

Enjoy,
David

Edited by - dbdave on 04/05/2021 21:50:51

Marshall
Ecommerce Template Guru

USA
1824 Posts

Posted - 04/06/2021 :  05:57:51  
Nice

Marshall
CENLYT Productions - ms designs
Affordable Web Design
Custom Ecommerce Designs
Responsive Websites
Cenlyt.com

midvalleydrifter001
Ecommerce Template Expert

USA
841 Posts

Posted - 04/06/2021 :  12:06:13  
Thanks David.

This works great.

I also added it to my products.php page which works with the Quick Buy feature.

Patrick

dbdave
ECT Moderator

USA
9751 Posts

Posted - 04/06/2021 :  12:33:24  
Nice!
I suspected that it also work on the products page.

It was really something (an idea) that just popped in my head while working on something else.
I know myself how I have had problems "tapping" a radio option, and getting it to take, so I think this should help mobile users a good bit.
It literally took me a just few minutes to write that code and test it.
Javascript FTW

Thanks,
David

midvalleydrifter001
Ecommerce Template Expert

USA
841 Posts

Posted - 04/06/2021 :  12:35:43  
Well I appreciate your work.

It is a nice added feature.

Patrick

1818charlie
ECT Moderator

United Kingdom
1116 Posts

Posted - 04/06/2021 :  13:57:09  
Nice one David


Steve
Bolton Lancashire

Vince
Administrator

41803 Posts

Posted - 02/13/2022 :  13:59:57  
Thanks so much to Dave for adding this suggestions. But in v7.4.7 there were quite a few changes to improve the the cart output for screen readers and this change is no longer needed. In fact it will produce a "duplicate label" error using the WAVE tool here...
https://wave.webaim.org

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater
  « Topic »  
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022 ecommercetemplates.com
This page was generated in 0.02 seconds. Snitz Forums 2000