Thread: minicart float?

I am currently using the AJAX minicart. When a customer orders an item, the drop-down of the minicart shows this item. How can I make something float where the customer is currently to tell them that something had been added to their cart. We have a lot of variants of products and to see the current minicart, they would have to scroll to the top.

I would like this as well ... if nobody comes up with something I will put something together but it won't be for a while.

I agree, using the ajax minicart is a little hard for them to tell something was added.

Vortx has an awesome minicart where you see the actual product "fly" into the minicart but I think that only works with V8.

On both v8 and v9 (v7 as well) it is possible to make an on screen ajax cart that doesn't require source code modification here is an example:
http://nutrasupply.com/c-581-vitamins-supplements.aspx (note the little cart icon when an item is added)

If you are using v9, its a lot easier to make as can use the udpate panel and create it in asp.net using usercontrols. V7 and v8 are lot tricker.

here is some more info:
http://www.simrun.com/Ecommerce/Adva.../AjaxCart.aspx

Your sites, and use of Ajax, is quite sweet Alkaline. The ajax shipping estimator is excellent. I've always loved the work on allinkosher.

Another option that would probably be a simple thing would be to do as oldnavy does it .. basically when something is added to the cart the page shifts backup to the top so you can see the expanded minicart.

Chris, as a quick fix try this. This seems to make it work similar to old navy.

In your minicart.js add the window.scroll(0,0);

Code:

    popup_onfocus: function() {
        // set the flag that the current focused area is the minicart panel
        this.popupFocused = true;
        window.scroll(0, 0);
    },

Ive tried it and it worked in IE, it doesnt work in FF but right now for me the ajax minicart in FF isnt expanding at all when I add something.

At any rate, this is a quick fix .... the ultimate is something like Alkaline or Vortx has .. those are both nice solutions.

Please let me know if this works for you.

Originally Posted by ssgumby

Your sites, and use of Ajax, is quite sweet Alkaline. The ajax shipping estimator is excellent. I've always loved the work on allinkosher.

Another option that would probably be a simple thing would be to do as oldnavy does it .. basically when something is added to the cart the page shifts backup to the top so you can see the expanded minicart.

Wait to you see the new atterdagkids.com on v9

In a recent v9 build, we've used JQuery to have the minicart 'follow' the user as they scroll down the page.

1. Download and include the JQuery library in your pages:
<script type="text/javascript" src="jscripts/jquery-1.4.2.min.js"></script>

2. Wrap your minicart in a <div> with a named css class or id (in our case, it's within #rightcol).

3. Include this code in your page (replace #rightcol with your div id/class name):

Code:

<script type="text/javascript" Language="JavaScript"> 
<![CDATA[
	$().ready(function() {
	var scrollingDiv = $('#rightcol');
	$(window).scroll(function(){			
		scrollingDiv
			.stop()
			.animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, "slow" );			
		});
	});
 ]]>
</script>

Credit must go to this site where I found the code:
http://www.wduffy.co.uk/blog/keep-el...omment-page-1/

webopius, do you have an example of what the page looks like that you gave an example of?

Hi,

Unfortunately not at the moment as this site isn't live for another week.

You can see the concept in action though showing a regular <div> element moving down the page here:

http://www.wduffy.co.uk/blog/wp-cont...lling-element/

Take a look at the pink element at the top right of the page, then scroll down the page and watch the element follow you.

Adam