PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

24 February 2010 By Ninenik Narkdee
jquery add to card

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery add to card



 ตัวอย่างต่อไปนี้เป็นแนวทางสำหรับนำไปปรับใช้ ในการทำระบบ 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>

 



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: add to card jquery







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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ