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

Module Block User Online / Visitor Counter Prestashop 1.5

Hi guys, Are you looking for block user online / visitor counter widget in prestashop 1.5?
Download module here.

1. unzip it. put blockuseronline directory module in prestashop\modules.
2. go to your admin panel. (www.myshop.com/adminxxx)
3. On main menu choose Modules -> Modules
4. All modules will appear.
5. On left side menu, choose other modules (on the bottom).
6. Install block user online modules then visitor counter widget will appear in your front page

This is sample image of the result:

Best regard,
Bayu Prawira

View Counter (Update field +1) - Cakephp

Hi Hallo,
This week (29 jan 2013), I still work in my current project with cakephp framework.
Today I find small problem but I will always share with you guys. I work on I called view counter, where if there any client view detail of any property in my site, it will update field count in database +1.
Maybe it look easy if we do with php and sql. But how we can do it with cakephp framework?

I'm googling, and found this code below:

$this->Article->updateAll(
             array('Property.count' => 'Property.count + 1'),
             array('Property.id' => 5)

);

Hope it can help,
But if you still have any question, write your comment below.

Kind regard,
Bayu Prawira

Get date of one week based on week number - php

Hi, ,
There are many kind of php function you can use for datetime manipulation. But today I will share a short code that you can use for get date of one week based on your week number.

I have created a function that you can use or develop
Let see my function below :

<?php
 function get_date_in_week($year,$week_number){
  $date = array();
  
  // 1 week 7 days
  for($day = 1; $day <= 7; $day++){
   
   $set_date = strtotime($year."W".($week_number<10?'0':'').$week_number.$day);
   
   if(date('Y',$set_date) == $year){
    $date['year-'.$year]['week-'.$week_number]['day-'.$day] = date('j', $set_date);
   }
   
  }
  
  return $date;
  
 }
?>

Now, you can simple to use, just call the function then you will get date of one week based on your week number.

<pre>
 <?php
  $year = '2013';
  $week_number = '2';
  print_r(get_date_in_week($year,$week_number));
 ?>
</pre>

The result will be like this :

Array
(
    [year-2013] => Array
        (
            [week-2] => Array
                (
                    [day-1] => 7
                    [day-2] => 8
                    [day-3] => 9
                    [day-4] => 10
                    [day-5] => 11
                    [day-6] => 12
                    [day-7] => 13
                )

        )

)

Hope it can helps.
But if you still need help, just write your comment below.
I will try to find out.

Kind regard,
Bayu Prawira

Jquery Image Slide on Hover

Hello,
In this post I will share  about  a simple jquery to animate an image when hovering. basically it is using jQuery’s animate() effect. I will use this effect to make transaction when hovering the image.
Let's looks the demo in the url below :
Jquery Image Slide

Ok, I begin with html code :

<div id="vertical" class="clear">
    <!-- Vertical -->
    <h2>jQuery image slide on hover effect (vertical)</h2>
    <div><a href="htmldrive.net"><img src="image-2.png" alt="" /></a></div>
    <div><a href="#"><img src="image-1.jpg" alt="" /></a></div>
</div>
<div id="horizontal" class="clear">
    <!-- Horizontal -->
    <h2>jQuery image slide on hover effect (horizontal)</h2>
    <div><a href="#"><img src="image-4.jpg" alt="" /></a></div>
    <div><a href="#"><img src="image-5.png" alt="" /></a></div>
</div>
<div id="easeOutBounce" class="clear">
    <!-- Horizontal -->
    <h2>jQuery image slide on hover effect (easeOutBounce)</h2>
    <div><a href="htmldrive.net"><img src="image-2.png" alt="" /></a></div>
    <div><a href="#"><img src="image-1.jpg" alt="" /></a></div>
</div>

We have 3 main div contain image links. each image has two face, maybe it will easier when you look image below :

image-1.jpg

  


image-2.jpg

Then defined simple jquery.imageslide.js to make it work, you can download full source Jquery Image Slide.

jquery.imageslide.js has 3 transaction type (vertical, horizontal,easeOutBounce) and you can use it with multiple images

Now you can set up the property of image slide as below:

<script type="text/javascript">
        $(document).ready(function(){
            $('#vertical div a').imgslide({
                width: 296,
                height: 130,
                animate : "vertical",
                duration : 300
            });
            $('#horizontal div a').imgslide({
                animate : "horizontal",
                duration : 300
            });
            $('#easeOutBounce div a').imgslide({
                animate : "easeOutBounce",
                duration : 800
            });
        });
    </script>

Run your code, it will work like a charm ^^.
That's all, hope it useful

Best regard,
Bayu Prawira