SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help With Ajax Cart

    Hi guys,

    I'm normally pretty ok at JQuery but I need some help with the following code. It is to make the product image appear to fly across the screen and into the shopping cart when the user clicks buy.

    It is functioning ok but I have changed the layout because I am customizing a template and now where it originally started to animate is not where I have repositioned it. You will see what I mean if you follow the hyperlink below:

    http://www.wavemobilephones.com/inde...roduct_id=1232

    What I need to do is to be able to re-position where the product image flies off from so I would appreciate either a rework of the code or possibly suggesting a way in which I could slow down the process so that I can work it out for myself.

    PHP Code:
        $('#add_to_cart').click(function () {
            $.
    ajax({
                
    type'post',
                
    url'index.php?route=module/cart/callback',
                
    dataType'html',
                
    data: $('#product :input'),
                
    success: function (html) {
                    $(
    '#module_cart .middle').html(html);
                },    
                
    complete: function () {
                                   
                    var 
    image = $('#image').offset();
                    var 
    cart  = $('#module_cart').offset();
        
                    $(
    '#image').before('<img src="' + $('#image').attr('src') + '" id="temp" style="position: absolute; top: ' image.top 'px; left: ' image.left 'px;" />');
        
                    
    params = {
                        
    top cart.top 'px',
                        
    left cart.left 'px',
                        
    opacity 0.0,
                        
    width : $('#module_cart').width(),  
                        
    height : $('#module_cart').height()
                    };        
        
                    $(
    '#temp').animate(params'slow'false, function () {
                        $(
    '#temp').remove();
                    });
                    
                    
    location.href "http://www.wavemobilephones.com/index.php?route=checkout/cart";        
                }            
            });            
        }); 
    thanks

    Silversufer
    "Persistence is the path to perfection"

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    Hi guys,

    I'm normally pretty ok at JQuery but I need some help with the following code. It is to make the product image appear to fly across the screen and into the shopping cart when the user clicks buy.

    It is functioning ok but I have changed the layout because I am customizing a template and now where it originally started to animate is not where I have repositioned it. You will see what I mean if you follow the hyperlink below:

    http://www.wavemobilephones.com/inde...roduct_id=1232

    What I need to do is to be able to re-position where the product image flies off from so I would appreciate either a rework of the code or possibly suggesting a way in which I could slow down the process so that I can work it out for myself.

    So it looks like it's *almost* working correctly. The one thing that's messing it up is the "#product_holder" div as it has position:relative; on it, so the image you're trying to position absolutely is basing it's position from that. There are two possible workarounds here, one is that you remove position:relative; from the #product_holder div, which could potentially break things (depending on why you made it relative).

    The other solution, which might be better, is to append the image to the <body> instead, that way it's positioning will be relative to the viewport (like before).
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much John, spot-on, in the end I just calculated the new co-ordinates by trial and error, was easier because I had moved everything around from its original template positioning. Really helped me to understand the JQuery better thanks.
    "Persistence is the path to perfection"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •