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.
