Building a Responsive Site? Here's a MUST Have, for the OCST Template

[aarcmedia]

OK, so Miva has built in some cool features making the OCST page of the checkout process a bit easier for your customers to digest, HOWEVER, now that we are all building responsive sites, there is an issue that has probably irked a lot of designers/developers.

On the OCST page, when a customer checks the "same as shipping" field for the Billing Address, it very intelligently HIDES that billing address saving visitors time during checkout. THE ISSUE IS.... if you're building a responsive site, in a vertical mobile layout, that info does hide, but the space it takes up stays put, and forces the visitor to scroll through literally 3-4 inches of white space to get to the "continue" button. This is HORRIBLE. 3-4 inches of scrolling on a phone during checkout is going to cause some people to bail on checkout.

Kyle @ Miva just emailed me a very quick fix for this that causes that space the billing fields take up to actually "collapse" instead of just "hide" so that they no longer have to scroll through that whitespace.

NOTE, this is an issue even on their Bootstrap theme, so if you use that Bootstrap theme, you'll want to use this as well.

The fix is simple. Just paste the code below just before your </body> tag on your OCST template (this of course assuming you're using the out-of-box fields and id's that page comes with)......

<script>
  $(function(){
    $('#billing_to_show').on('change',function(){
      if($('#billing_to_show').is(':checked')){
        $('#billing_fields').slideUp();
      }else{
        $('#billing_fields').slideDown();
      };
    });
  });
</script>

[JFancett]

Re: Building a Responsive Site? Here's a MUST HAVE, for the OCST Template

Thanks for sharing.

[lesliekirk]

Re: Building a Responsive Site? Here's a MUST HAVE, for the OCST Template

Thanks Ted, since this is directly related to the Bootstrap framework, I'm going to move it to that forum.

Leslie

[Mark Hood]

Re: Building a Responsive Site? Here's a MUST Have, for the OCST Template

OK, so Miva has built in some cool features making the OCST page of the checkout process a bit easier for your customers to digest, HOWEVER, now that we are all building responsive sites, there is an issue that has probably irked a lot of designers/developers.

On the OCST page, when a customer checks the "same as shipping" field for the Billing Address, it very intelligently HIDES that billing address saving visitors time during checkout. THE ISSUE IS.... if you're building a responsive site, in a vertical mobile layout, that info does hide, but the space it takes up stays put, and forces the visitor to scroll through literally 3-4 inches of white space to get to the "continue" button. This is HORRIBLE. 3-4 inches of scrolling on a phone during checkout is going to cause some people to bail on checkout.

Kyle @ Miva just emailed me a very quick fix for this that causes that space the billing fields take up to actually "collapse" instead of just "hide" so that they no longer have to scroll through that whitespace.

NOTE, this is an issue even on their Bootstrap theme, so if you use that Bootstrap theme, you'll want to use this as well.

The fix is simple. Just paste the code below just before your </body> tag on your OCST template (this of course assuming you're using the out-of-box fields and id's that page comes with)......

<script>
  $(function(){
    $('#billing_to_show').on('change',function(){
      if($('#billing_to_show').is(':checked')){
        $('#billing_fields').slideUp();
      }else{
        $('#billing_fields').slideDown();
      };
    });
  });
</script>

Also important to note that this was fixed with the latest version of bootstrap so this may not be needed.

[aarcmedia]

Re: Building a Responsive Site? Here's a MUST Have, for the OCST Template

Correct, they said that it was fixed in the new version. However it's not part of the "demo version". And I have a fairly new version, within the past 2 weeks and this hasn't been implemented.

But not everyone is going to use the bootstrap theme as a starting point, so for those that don't, this will be handy.

***Note, I noticed moments ago this isn't a perfect fix. Upon initial page load if you already have an account the space will still be open because it's not using their out-of-box toggle instead of this added function. If someone has the actual script their using in the new bootstrap theme can you post it here? I'll re-post when I have time to track it down or fix this up.

[aarcmedia]

Re: Building a Responsive Site? Here's a MUST Have, for the OCST Template

Well I tried this instead and it seems to work. I yanked it from the new bootstrap framework just now. Does anyone else care to give it a try and let me know if it works for you? It should be hid upon load if you already have an account and "billing same as shipping" checked (AND, by "hid" I mean that both the content AND the space it should take up goes away)....

<script>
  $(function(){
    if ($('#shipping_controls').is(':visible')) {
            if ($('#shipping_to_show').is(':checked')) {
                $('#shipping_fields').hide();
            };
            $('#shipping_to_show').on('change', function () {
                $('#shipping_fields').toggle();
            });
        };
        if ($('#billing_controls').is(':visible')) {
            if ($('#billing_to_show').is(':checked')) {
                $('#billing_fields').hide();
            };
            $('#billing_to_show').on('change', function () {
                $('#billing_fields').toggle();
            });
        };
  });
</script>

[aarcmedia]

Re: Building a Responsive Site? Here's a MUST Have, for the OCST Template

I've edited this out because apparently the snippet above is the best bet.