X-Cart forums

[totaltec]

I am trying to find a better solution than redirecting the shoppers to the cart when adding a product. I want to take full advantage of the mini-cart's Ajax functionality as it improves the shopping experience considerably IMO. Redirecting to cart is like the supermarket teleporting you to the checkout line just because you dropped something into your basket, hardly conducive to multiple item purchases.

The problem is on longer category pages with lots of products. Clicking "add to cart" does change the button to "added", but if the mini-cart is off the page at the top then the shopper can't immediately see what to do next without scrolling. I have seen many merchants opt for redirecting to cart in order to solve this problem.

My proposed solution is to use JS to follow the customer down the page with the mini-cart. I plan to use Jquery, and animate the action based on an onscroll event, with a timer built in so that it does not constantly try to move.

So far my tests have been successful, I have written the JS as follows:

<script type="text/javascript">
$("#follower").ready(function () {
return setRepeater();
});
function setRepeater() {
aTimer = window.setInterval("keepIncrease()", 500);
return false;
}
function keepIncrease() {
var currentPos = $(window).scrollTop() + 10;
if (currentPos>200){
var nowTop = currentPos + "px";
} else {
var nowTop = 200 + "px";
}
$("#follower").animate({
"top" : nowTop
});
return false;
}
</script>

Pretty light and simple. It requires Jquery 1.4 but that should be included in XC by default. Here is a demo with an absolute positioned div in a relatively positioned container: http://x-guru.com/scroll-test.html -you can view the source of the page to see everything going on under the hood.

Let me know what you think, likes/dislikes or suggestions for improvement. Also, let me know if this is working on your browser/operating system.

My next step is to implement this on my test site so we can see it working in X-cart. I plan on applying this class to the entire right bar of the site so that mini-cart, authbox, and recently viewed all follow you down. Alternatively we may end up just using it on the minicart itself, that may take some more code to shuffle the elements around. In the end it is up to the client.

[totaltec]

Shoot, that was easy! Thank you QT, X-cart is a sweet baby that just does whatever you tell it to.

See the floating cart in action here: http://trainingpen.com/home.php?cat=105

If you can't divine the code from what I have already posted, I am going to wrap this one up as a module, even though it is dead simple, it is quite useful IMO.

PM me if you are interested in beta testing.

[totaltec]

Well as with most things, what at first appeared to be perfect, was not at all.

My JS needed some serious re-working in order to get IE to play nice, and I needed to change the functions to wait until the scrolling had stopped. Had to practically rewrite the code from scratch.

Here is the finished javascript:

var scrollTimer = -1;
function bodyScroll() {
if (scrollTimer != -1)
clearTimeout(scrollTimer);
scrollTimer = window.setTimeout("scrollFinished()", 500);
}
function scrollFinished() {

var currentPos = $(window).scrollTop() + 10;

if (currentPos>200){
var nowTop = (currentPos-120) + "px";
} else {
var nowTop = 0 + "px";
}

$("#right-bar").animate(
{ top: nowTop }, {
duration: 500,
easing: 'swing'
});

return false;
}
window.onscroll = bodyScroll;

Now it appears to be working in all browsers, and it is much less resource intensive. I still may be getting some lag issues if you sit on the page for a while, but I can't completely confirm that yet. Time for some sleep.

If you feel like testing it for me, the link again is: http://trainingpen.com/home.php?cat=105

[JacksmithxD]

Does it work with ability edit** oh I thought you had ability template my bad! Looks good though

[tickseed]

Hi,

This is great ! As a complete thicko, which file & where do you enter the code please ?

Regards,

David

X-Cart Gold 4.4.3
Altered Cart OPC

[totaltec]

Glad you think so. I made this a module that you could enable/disable in the admin. I still may decide to package this module for sale later, but I will post the code for now.

First you need to run this sql code:
delete from xcart_modules where module_name = 'Floating_Cart';
delete from xcart_config where category = 'Floating_Cart';
insert into xcart_modules (module_name,module_descr,active) values ('Floating_Cart','Float the mini-cart down the page when scrolled.','Y');
replace into xcart_languages (code,name,value,topic) values ('en','module_name_Floating_Cart','Floating Cart','Modules');
replace into xcart_languages (code,name,value,topic) values ('en','module_descr_Floating_Cart','This module allows the right bar to follow users down the page.','Modules');

Then make a folder /**YOUR_SKIN_FOLDER**/modules/Floating_Cart

Upload the following code to a new file named jquery.floating_cart.js that you create in the new folder:
var scrollTimer = -1;
function bodyScroll() {
if (scrollTimer != -1)
clearTimeout(scrollTimer);
scrollTimer = window.setTimeout("scrollFinished()", 500);
}
function scrollFinished() {

var currentPos = $(window).scrollTop() + 10;

if (currentPos>200){
var nowTop = (currentPos-120) + "px";
} else {
var nowTop = 0 + "px";
}

$("#right-bar").animate(
{ top: nowTop }, {
duration: 500,
easing: 'swing'
});

return false;
}
window.onscroll = bodyScroll;

Then to hook it all up, in /**YOUR_SKIN_FOLDER**/customer/service_js.tpl add to the bottom:
{if $active_modules.Floating_Cart ne ''}
{load_defer file="modules/Floating_Cart/jquery.floating_cart.js" type="js"}
{/if}

Please don't try this on your live store, it is untested by my standards. Please do feel free to use this mod, after you have tested it in your dev environment.

If you do use it, please let me know by posting here. If you can provide a link to your store so others can see it in action, that would be great as well. If you have problems following these instructions, feel free to ask questions. I will attempt to answer any issues, but can't guarantee support.

[keystone]

I just checked the demo out using Firefox. I added an item to the cart but it didn't follow me down the page. Does anyone have this working on a live site?