The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Hide inputs until successful email address

sandersdesignsandersdesign Member
in Bugs & Feature Requests edited December 2010
I'm trying to implement a minor jQuery script to hide address entry details until a successful email address has been entered.

My current code is:
<script type="text/javascript"> 

$(document).ready(function() {	
	
		$("#fc_continue>a").click(function(){
			var email = $("input#customer_email").val();
					
				if(email != "") {
					if(isValidEmailAddress(email)) {
						$("#fc_customer_billing_container,#fc_payment_container,#fc_shipping_container").css({display: "block !important"});
					}
				}
		});	
});
function isValidEmailAddress(emailAddress) {  
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
return pattern.test(emailAddress);
}  
</script>

Unfortunately the above code fails to provide the desired results. Does anyone have any ideas why the above code would fail to work.

Many thanks,
Comments
  • Any ideas or feedback, I'm sure it's possible as an implementation can be seen at https://hokeycroquis.foxycart.com/checkout.php
  • You're not telling it to hide anything, only show it if the email address is valid.
  • Hi richtestani, I've hidden the elements within CSS seen within my external style sheet.
    #fc_customer_billing_container,#fc_payment_container,#fc_shipping_container {display: none}
    
  • brettbrett FoxyCart Team
    @sandersdesign, that HokeyCroquis site is on an older version of FoxyCart that hid those extra fields automatically.

    After a _lot_ of discussion with the community we decided that showing the entire checkout form actually is more usable. The comments from before were that just showing the email at first didn't help the customer understand how quick it'd be, so it was confusing.

    So that said, your js will depend on the version, but are you sure you want to make that change? We feel that the latest versions of FoxyCart handle the email guest / returning much better, but if you have suggestions for improvement or reports of confusion we'd love to hear.
  • @brett, I would naturally agree that there is something to be said for showing the entire form. However my client is very keen on having this option so any indication you may provide showing how to achieve this effect would be appreciated.

    I am looking to implement the site using Foxycart 0.7.

    As a additional consideration, couldn't Foxycart make this an setting via the admin panel, or template option. It would make life easier from a development prospective as each customer has their own requirements meaning that no one rule will fit for all sites.
  • sandersdesignsandersdesign Member
    edited December 2010
    Hi @brett any updates on a suitable solution. I'm keen to see some closure on this project.

    Regards,

    Martin
  • lukeluke FoxyCart Team
    Hey Martin, sorry for the delay here. We've asked Adam to take a look. Based on the feedback we've received from a lot of our users, we made the change to show all the fields because the consensus reached indicated that was the best user experience. If you'd like the option you described as a setting, please add it to our requests page: http://requests.foxycart.com
  • fc_adamfc_adam FoxyCart Team
    edited January 2011
    Hey Martin, sorry again for the delay. Brett asked me to jump onto this one and have a look but it got caught up in the holidays and I've missed it till now.

    This should achieve what you're after though. Basically just paste this right before the
    </head>
    
    tag in your template and you should be good to go: pastie.org/private/kguddzqgi7z9iafz69komw Use this instead: http://pastie.org/private/tsi4hkx6efhuttnjtfnswg

    Also, I mocked up a second version where instead of hiding the subsequent fields, it makes the fields slightly opaque and trying to click on them brings you back to the email/password fields. Its the same as the first, paste right before the
    </head>
    
    tag: http://pastie.org/private/of4id2laixuj1bg6tsa2qa Note that this is more of a proof of concept as it uses the opacity css setting which means its not really a cross-browser solution, but could be adjusted to be cross-browser.
  • sandersdesignsandersdesign Member
    edited January 2011
    Hi Adam, I appreciate your help and willingness to look into this for us, I've tried implementing the code but for some reason it's not quite replicating the desired affected as seen at https://hokeycroquis.foxycart.com/checkout.php.

    https://vacuum.foxycart.com/checkout.php

    It seems that both 'Guest' and 'Account' check options are visual and when I wish to create an account I can only progress if I select the 'Guest' option. Have a missed something?

    Thanks,
  • fc_adamfc_adam FoxyCart Team
    @sandersdesign,

    right you are! I missed the account creation step. This one should work for you, its just a small change to the
    toggleDataEntry()
    
    function.

    http://pastie.org/private/tsi4hkx6efhuttnjtfnswg
  • Thanks Adam, it now looks great :) cheers.
  • nickffnickff Member
    edited March 2014
    *** Fixed by updating to the latest version of the snippet - https://wiki.foxycart.com/snippets/checkout/making_shipping_and_payment_fields_hidden ***

    Any known issues with this script and version 1.1 of Foxycart? I just updated, and now the fields won't appear - http://www.nativeenergy.com

    Perhaps something needs to be updated for jquery 1.9?
  • fc_adamfc_adam FoxyCart Team
    @nickff,

    Just to confirm - you got this fixed up?
  • Correct! Thanks Adam.
Sign In or Register to comment.