เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย

 ตัวอย่างต่อไปนี้เป็นแนวทางสำหรับนำไปปรับใช้ ในการทำระบบ add to cart ด้วย ajax

ตัวอย่าง

HTML Code

<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" valign="top">
    
<div class="wapProductBox">    <table width="150" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="50" align="center" bgcolor="#CCCC66">&nbsp;</td>
      </tr>
      <tr>
        <td align="center"><input type="button" name="button" id="button"  class="toCart"value="Add to Cart" /></td>
      </tr>
    </table>
    </div>
    
<div class="wapProductBox">    <table width="150" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="50" align="center" bgcolor="#FF9999">&nbsp;</td>
      </tr>
      <tr>
        <td align="center"><input type="button" name="button" id="button"  class="toCart"value="Add to Cart" /></td>
      </tr>
    </table>
    </div>
    
<div class="wapProductBox">    <table width="150" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="50" align="center" bgcolor="#00CCFF">&nbsp;</td>
      </tr>
      <tr>
        <td align="center"><input type="button" name="button" id="button"  class="toCart"value="Add to Cart" /></td>
      </tr>
    </table>
    </div>
    
<div class="wapProductBox">    <table width="150" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="50" align="center" bgcolor="#FFCC66">&nbsp;</td>
      </tr>
      <tr>
        <td align="center"><input type="button" name="button" id="button"  class="toCart"value="Add to Cart" /></td>
      </tr>
    </table>
    </div>            
    
    </td>
    <td width="200" align="left" valign="top" bgcolor="#F2F2F2">
    <div id="boxOfProduct">
    
    </div>
    </td>
  </tr>
</table>

jQuery Code

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$("input.toCart").click(function(){boxOfProduct
		var nowOffsetX=$(this).parents("div.wapProductBox").offset().left; // หาตำแหน่งสินค้า แกน x
		var nowOffsetY=$(this).parents("div.wapProductBox").offset().top; // หาตำแหน่งสินค้า แกน y
		var moveOffsetX=$("div#boxOfProduct").offset().left; // หาตำแหน่งตะกร้าสินค้า แกน x
		var moveOffsetY=$("div#boxOfProduct").offset().top; // หาตำแหน่งตะกร้าสินค้า แกน y
		var nowObjPhoduct=$(this).parents("div.wapProductBox").clone(); // สร้าง object สินค้าใหม่ โดย copy จากตัวเดิม
		// จัดตำแปน่งไว้ที่เดิม แต่ซ้อนอยู่ด้านบน
		nowObjPhoduct.css({
			position:"absolute",
			left:nowOffsetX+"px",
			top:nowOffsetY+"px",
			"z-index":"900"
		});
		$(document.body).prepend(nowObjPhoduct); // แทรกลงไปในเว็บ
		// ย้ายตำแหน่ง ไปยังตะกร้าสินค้า
		nowObjPhoduct.animate({
			left:moveOffsetX+"px",
			top:moveOffsetY+"px",
			opacity:0
		},500,function(){
			// ฟังก์ชันเมื่อย้ายตำแหน่ง เสร็จต้องการให้ทำอะไร
			// สามารถนำไปประยุกต์ เพิ่มสินค้าในตะกร้าสินค้า ด้วย ajax
			$("div#boxOfProduct").prepend(nowObjPhoduct.html());
		});		
		return false;
	});

});

</script>