jQuery plugin: Add2Cart

jquery, plugin Add comments

I added a jQuery plugin called add2cart.

This plugin implements visual effect of adding something to cart (busket). Visually it’s similar to Microsoft Word post-save visual effect, when a gray rectangular of page moves down to the toolbar.

Example of usage:

<input type="button" value="Add to cart"
  onclick="$.add2cart( 'product1_id', 'cart_img_id'  )" />

You can try it out at demo page.

20 Responses to “jQuery plugin: Add2Cart”

  1. dudeguy Says:

    It’s ok to have a comment.

  2. Fab Says:

    Hi!
    This is a great plugin, simple and light. I’ve tested it and it works under firefox, but it’s almost invisible on IE7. Didn’t test under IE6.
    Another (very small) bug (onfirefox) : the fist time you click on the source, the shadow div doesn’t start at the correct location but just under the source image. The second time you click, it’s correct.
    I’ve look at the code, but haven’t still find where the bug come from. I’ll post here if I find.
    Tx for your plugin !

  3. Fab Says:

    Forgot the second bug: I’ve slower the move to correctly see where it start, and it start at the correct location !

    And for the first bug I’ve found: it’s just the lightgray that IE7 don’t like: just replace with #999999 and it works !
    background-color: #999999;

  4. Skakunov Alexander Says:

    Thank you, Fab!

  5. Fab Says:

    You’re welcome

    Another small bug:
    If your source element is in a div with overflow:hidden (and your target elsewhere out of this div), the shadow div will be hidden once out of the div. The fix is simple, you’ve to replace:
    source.before(
    by:
    $(‘body’).prepend(
    So the shadow is in the root …

  6. Skakunov Alexander Says:

    Fab, I’ve applied your suggestions and updated the plugin. Thank you!

  7. ultrono Says:

    Really good plugin. Saw this type of effect (may even be the same effect) in a free ecommerce solution and liked it ever since.

    Simple to implement and adds a bit extra to the site.

    Many Thanks

  8. Brent Says:

    Any idea how to remove the div from the target after the effect has completed. If it remains over a cart, all links to products in the cart are unavailable.

    I tried shadow.remove() , that disables the animation.??

  9. Zeb Says:

    I tried to slow down the animation by changing the value of duration from 300 to 600 but the animation flickers and is not smooth.. any ideas?

  10. Skakunov Alexander Says:

    Zeb, paste your changes here please (put it in pre+code tags).

  11. Qphoria Says:

    A quick note…
    The code:
    —–
    if( !shadow ) {
    alert(‘Cannot create the shadow div’);
    }
    —–
    will never trigger because even if source is undefined, you are still setting shadow = “#_shadow”, which then makes it an object, and therefore defined. This of course allows the script to continue and thus error out on the shadow.width function, as since shadow is “something” but its not a valid element. Your best bet would be to check that source and target are both valid before continuing

  12. B Grimstad Says:

    Response to brent:

    You can remove the shadow div after the animation is done by modifying the script as shown below:

    .animate( { opacity: 0 }, 200, function(){ $(this).remove(); //removes shadow after animation
    } );

    I’ve added an anonymous function that runs after the animation and calls .remove() on the shadow div.

    Note: I could only get this to work with the animation speed set directly (e.g. by using 200 instead of { duration: 200}), any ideas why?

    I suggest adding this to the next version of add2cart.

    Sincerely, Bjarne.

  13. Dede Says:

    Hi i’m trying out this feature and i’d like to call another function when animation finishes ?

    Tried to use the “callback” =>
    $.add2cart(‘img_src’,’img_dest’,functionToPlay())
    but it doesn’t work ?

    Any ideas about how to ?

    Thx for the plugin

  14. MI Says:

    Great plugin! works fine in Chrome and firefox but the location is off in IE 8. It’s taking the position of top left and not taking the image as a whole. Any ideas why?

  15. 30+ Helpful jQuery Plugins For Design and Development | Says:

    […] Add to Cart […]

  16. Hani_ Says:

    Nice plugin
    Thx

  17. Nitin Dhawan Says:

    doesnt work with chrome. any ideas?

  18. Animate from one element to another (jQuery plugin) – Friendly Bit Says:

    […] looking for a jQuery plugin to do this (jQuery was already on the page, so why not?). I found add2cart – A plugin that looks good, but that misses a few features I wanted:The animation duration is […]

  19. Mr Strattera Says:

    Thank you, very useful plugin!

  20. 175 Best jQuery Plugins And Tutorials Worth Checking Out Says:

    […] Add to Cart […]

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in