PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

24 February 2010 By


 ตัวอย่างต่อไปนี้เป็นแนวทางสำหรับนำไปปรับใช้ ในการทำระบบ 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>
        </table>
        <input type="button" name="button" id="button"  class="toCart"value="Add to Cart" />
      </div>
      <div class="wapProductBox">
        <table width="150" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="50" align="center" bgcolor="#FF9999">&nbsp;</td>
          </tr>
        </table>
        <input type="button" name="button" id="button"  class="toCart"value="Add to Cart" />
      </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>
        </table>
        <input type="button" name="button" id="button"  class="toCart"value="Add to Cart" />
      </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>
        </table>
        <input type="button" name="button" id="button"  class="toCart"value="Add to Cart" />
      </div>
  </td>
    <td width="200" align="left" valign="top" bgcolor="#F2F2F2">
    <form id="form_checkout" name="form_checkout" method="post" action="">
        <div id="boxOfProduct">
        </div>
      </form>
      </td>
  </tr>
</table>

jQuery Code

 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	$("input.toCart").click(function(){
		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).find("input.toCart").remove(); // เอาปุ่มเพิ่มรายการออก

		// จัดตำแปน่งไว้ที่เดิม แต่ซ้อนอยู่ด้านบน
		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
			var obj_remove="<button type=button class=removeCart>Remove</button>"; // เพิ่มปุ่มลบรายการ
			$("div#boxOfProduct").prepend('<div class="wapProductBox">'+nowObjPhoduct.html()+obj_remove+'</div>');
		});		
		return false;
	});

	$("button.removeCart").live("click",function(){ // เมื่อคลิกที่ปุ่มลบรายการ
			$(this).parents("div.wapProductBox").fadeOut(); // ลบรายการที่เลือก
	});

});

</script>

 


Tags:: add to card jquery





URL สำหรับอ้างอิง