Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    Code:
    <script>
      $(function(){
        $('#billing_to_show').on('change',function(){
          if($('#billing_to_show').is(':checked')){
            $('#billing_fields').slideUp();
          }else{
            $('#billing_fields').slideDown();
          };
        });
      });
    </script>
    Last edited by aarcmedia; 04-21-14, 04:30 PM.
    Ted Hust
    AarcMediaGroup.com

    Celebrating 13 Years of Outstanding Service & Support
    Miva Merchant Design

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

    Thanks for sharing.
    Jason Fancett
    America's SPA-MART - "Where Spa Owners Shop SMART!"
    Check us out for all of your hot tub needs including spa covers, spa filters, spa chemicals and more.
    Miva Merchant forum users can use coupon code MIVAFORUM to receive $5 off your first order of $30 or more.

    Comment


      #3
      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
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


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

        Originally posted by aarcmedia View Post
        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)......

        Code:
        <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.
        Mark Hood
        Vermont Gear

        Comment


          #5
          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.
          Ted Hust
          AarcMediaGroup.com

          Celebrating 13 Years of Outstanding Service & Support
          Miva Merchant Design

          Comment


            #6
            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)....

            Code:
            <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>
            Last edited by aarcmedia; 04-23-14, 07:55 AM.
            Ted Hust
            AarcMediaGroup.com

            Celebrating 13 Years of Outstanding Service & Support
            Miva Merchant Design

            Comment


              #7
              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.
              Last edited by aarcmedia; 04-25-14, 05:06 AM.
              Ted Hust
              AarcMediaGroup.com

              Celebrating 13 Years of Outstanding Service & Support
              Miva Merchant Design

              Comment

              Working...
              X