HOW TO: Autoscroll Ajaxcart order template

[olie480]

Hey all, we are using the Ajaxcart order form in the new WHMCS 4.5 system, and we just modified a little bit of code to automatically scroll the page to the next input when the continue button is pressed. We did this because the way we listed our products had a pretty long height to it. So basically here are the modifications we did. BE SURE TO BACK UP YOUR AJAXCART DIRECTORY.

(add this to your template header.tpl underneath the jQuery link)


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
{literal}
<script type="text/javascript">
function scrollTo(selector) {
var targetOffset = $(selector).offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1500, 'swing');
}
{/literal}

(orderforms/ajaxcart/configureproductdomain.tpl)
Change:

function completedomain() {
jQuery("#loading2").slideDown();
jQuery.post("cart.php", 'ajax=1&a=add&pid={/literal}{$pid}{literal}&'+jQuery("#domainfrm").serialize(),
function(data){
if (data=='') {
signupstep();
} else {

jQuery("#configcontainer2").html(data);
jQuery("#configcontainer2").slideDown();
jQuery("#loading2").slideUp();
}
});
}

to


function completedomain() {
jQuery("#loading2").slideDown();
jQuery.post("cart.php", 'ajax=1&a=add&pid={/literal}{$pid}{literal}&'+jQuery("#domainfrm").serialize(),
function(data){
if (data=='') {
signupstep();
} else {

jQuery("#configcontainer2").html(data);
jQuery("#configcontainer2").slideDown();
scrollTo('#configcontainer2');
jQuery("#loading2").slideUp();
}
});
}

(orderforms/ajaxcart/js/main.js)
change


function signupstep() {
jQuery.post("cart.php", 'a=checkout&ajax=1',
function(data){
jQuery("#signupcontainer").html(data);
jQuery("#signupcontainer").slideDown();
jQuery("#prodconfloading").slideUp();
jQuery("#domainconfloading").slideUp();
});
}

to


function signupstep() {
jQuery.post("cart.php", 'a=checkout&ajax=1',
function(data){
jQuery("#signupcontainer").html(data);
jQuery("#signupcontainer").slideDown();
scrollTo('#signupcontainer');
jQuery("#prodconfloading").slideUp();
jQuery("#domainconfloading").slideUp();
});
}

and change


function selectproduct(pid) {
jQuery("#loading1").slideDown();
jQuery("#configcontainer1").fadeOut();
jQuery("#configcontainer2").fadeOut();
jQuery("#configcontainer3").fadeOut();
jQuery("#signupcontainer").fadeOut();
jQuery.post("cart.php", 'ajax=1&a=add&pid='+pid,
function(data){
if (data=='') {
signupstep();
} else {
jQuery("#configcontainer1").html(data);
jQuery("#configcontainer1").slideDown();
}
jQuery("#loading1").slideUp();
recalcsummary();
});
}

to


function selectproduct(pid) {
jQuery("#loading1").slideDown();
jQuery("#configcontainer1").fadeOut();
jQuery("#configcontainer2").fadeOut();
jQuery("#configcontainer3").fadeOut();
jQuery("#signupcontainer").fadeOut();
jQuery.post("cart.php", 'ajax=1&a=add&pid='+pid,
function(data){
if (data=='') {
signupstep();
} else {
jQuery("#configcontainer1").html(data);
jQuery("#configcontainer1").slideDown();
scrollTo('#configcontainer1');
}
jQuery("#loading1").slideUp();
recalcsummary();
});
}

Now if your screen resolution is high enough, you won't see the change, but if you look at your page on a laptop, or actually change your resolution to let's say 800 x 600, then you'll see the difference. If you have any questions, let me know! Hope this helps out some people, just a nice useful effect.

[veLenoSo]

Thanks, seems to work nice! :)

But there is a little mistake in your code


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
{literal}
<script type="text/javascript">
function scrollTo(selector) {
var targetOffset = $(selector).offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1500, 'swing');
}
{/literal}

change to


{literal}
<script type="text/javascript">
function scrollTo(selector) {
var targetOffset = $(selector).offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1500, 'swing');
}
</script>
{/literal}



</script>
was missing.

[Si]

This is good. I wish someone would do something like this for the slider cart. Customers click to search for a domain and have to scroll up to see the results (which isn't obvious) and when they click continue they have to scroll down the page, which again isn't obvious. Deal breaker issues for many sales I fear.

[olie480]

I was trying to look for this post to see if anyone had problems, sorry, I forgot to add the </script> at the end.. lol

I am going to look into the slider thing, because we actually moved from the ajax order form to the slider, and I will be adding some features to it. Once I get it nailed, I will definitely post something on here.


Thanks for reading!

[Si]

Hi,
I implemented the modifications you mentioned and it seemed to work - but for some reason the pages no longer auto-scroll to the next configurable section.

Anyone else seeing this with the ajaxcart ? I really need this to work due to order changes made on the site for customers.

Si

[olie480]

Hi,
I implemented the modifications you mentioned and it seemed to work - but for some reason the pages no longer auto-scroll to the next configurable section.

Anyone else seeing this with the ajaxcart ? I really need this to work due to order changes made on the site for customers.

Si

What is the URL to your page, so I can check it out.

[Si]

Sorry for delay ~ found the issue. Problem with a stylesheet. Working again (apart from the ajaxcart issue I posted here): http://forum.whmcs.com/showthread.php?t=39570

[olie480]

Sorry for delay ~ found the issue. Problem with a stylesheet. Working again (apart from the ajaxcart issue I posted here): http://forum.whmcs.com/showthread.php?t=39570

Awesome! Glad you worked it out!

[Hosteris]

Hi, this solution is working for you with the new version of whmcs?
In my whmcs installation is not working.