Do you need a PHP programmer?
Use my services as a freelance PHP programmer by hiring me to do PHP programming on your website project.

I have built many custom PHP applications like project managers, classified ad websites and content management systems. I also work with open source applications such as WordPress, online shopping cart websites like Magento and develop content management systems like Joomla.

Wednesday, April 10, 2013

Jquery Add to Cart Fly ala Prestashop

Hi haloo,
On this post I will share an amazing Add to Cart jquery animation which use by Prestashop.
For an e-commerce website, it can mean a better shopping experience for customers where they can easy to use, beautiful animation which make the site more interesting, so they can concentrate more on the products which may result in better sales.

Ok, Now I will let you know how the basic of the source.
1. We make a Html file with code below

<table cellpadding="0" cellspacing="0">
    <tr>
     <td width="400px">
         <div>
                <div class="image"><img src="1.jpg" /></div>
                <div><a class="addCart">Add to Cart</a></div>
            </div>
            <div>
                <div class="image"><img src="1.jpg" /></div>
                <div><a class="addCart">Add to Cart</a></div>
            </div>
        </td>
        <td width="100px" valign="top">
         <div id="shoppingCart">
          <h3>Shopping Cart</h3>
            </div>
        </td>
    </tr>
</table>


2. Include the javascript code below your html code

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".addCart").click(function(){
 var imgsrc = $(this).parent().parent().children(".image").children().attr('src');
 var imgpos = $(this).parent().parent().children(".image").children().position();
 var imgsrcstyle = "position:absolute;opacity:0.8;display:none;left:"+imgpos.left+"px;top:"+imgpos.top+"px;z-index:99999;";
 var this_parent = $(this).parent();
  
 // Ajax request
 $.ajax({
     type: "POST",
     url: "update.php",
     data: ({id:'2'}),
     dataType: "json",
     cache: false,
     success: function(result){
  if(result['status'] == 'true'){
     // make clone image
     this_parent.append('<img src="'+imgsrc+'" style="'+imgsrcstyle+'" class="cloned" />');
     
     // call animate fly
     fly(result);
  } else {
     alert('Failed add product to cart');
  }
      }
 });   
});
 
function fly(result){
 var box = $('#shoppingCart').position();
 $(".cloned").show().animate({ "opacity": 0.2,"top":(box.top + 20),"left":(box.left + 20),"width":10},1500,function(){
    $(this).remove();
   
    // update action
    alert('yay success!');
 }); 
}
 
});
</script>

For the complete source you can download here.
Hope it can help you guys.

Best regard,
Bayu Prawira

6 comments:

  1. Replies
    1. Hi, so sorry for not complete article.
      I will update it later and thanks for your suggest.
      cheers...

      Delete
    2. Jquery Add To Cart Fly Ala Prestashop >>>>> Download Now

      >>>>> Download Full

      Jquery Add To Cart Fly Ala Prestashop >>>>> Download LINK

      >>>>> Download Now

      Jquery Add To Cart Fly Ala Prestashop >>>>> Download Full

      >>>>> Download LINK Zq

      Delete
  2. Hello,
    you can also try module to fly to cart effect:
    http://addons.prestashop.com/en/registration-ordering-process/21844-add-to-cart-fly-effect-hide-popup-and-other-animations.html

    ReplyDelete
  3. thanks for the great article and info I needed

    ReplyDelete