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

24 February 2010 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

add to card jquery

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

ดูแล้ว 21,502 ครั้ง

UPDATE! อัพเดทล่าสุด 02-07-2020
02-07-2020 | อัพเดทโค้ดตัวอย่างให้เป็นปัจจุบัน ในเนื้อหาเพิ่มเติมที่ 1

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

เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 02-07-2020

อัพเดทการใช้งานให้เป็นปัจจุบัน ปี 2020

โค้ดไฟล์ตัวอย่าง

<!doctype html>
<html lang="th">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" >
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" >
</head>
<body>
 
<style type="text/css">
  div.wrap-product-box.added .btn-add-to-cart{
    display:none;
  }    
  div.wrap-product-box .btn-remove-from-cart{
    display:none;
  }  
  div#wrap-my-cart  .btn-remove-from-cart{
    display:inline-block;
  }
  div.product-item{
  	width: 150px;height: 50px;
  }
</style>  
<div class="container mt-5">
<table width="700" class="table">
  <tr>
    <td align="left" valign="top">
      <div class="wrap-product-box" data-proid="1">
	  	<div class="product-item" style="background-color: #CCCC66;">
			Product A
		</div>
        <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
          <i class="fas fa-cart-plus fa-fw mr-2"></i>
          Add To Cart</button>
        <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
          <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
          Remove</button>             
      </div>
      <div class="wrap-product-box" data-proid="2">
	  	<div class="product-item" style="background-color: #FF9999;">
			Product B
		</div>		
        <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
          <i class="fas fa-cart-plus fa-fw mr-2"></i>
          Add To Cart</button>
        <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
          <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
          Remove</button>          
      </div>
      <div class="wrap-product-box" data-proid="3">
	  	<div class="product-item" style="background-color: #00CCFF;">
			Product C
		</div>				
        <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
          <i class="fas fa-cart-plus fa-fw mr-2"></i>
          Add To Cart</button>
        <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
          <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
          Remove</button>          
      </div>
      <div class="wrap-product-box" data-proid="4">
	  	<div class="product-item" style="background-color: #FFCC66;">
			Product D
		</div>			
		  <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
			<i class="fas fa-cart-plus fa-fw mr-2"></i>
			Add To Cart</button>
		  <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
			<i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
			Remove</button>  
      </div>
  </td>
    <td width="200" align="left" valign="top" bgcolor="#F2F2F2">
    <form id="form_checkout" name="form_checkout" method="post" action="">
        <div id="wrap-my-cart">
        </div>
      </form>
      </td>
  </tr>
</table>  
  
</div>  
 
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
     
    $(document.body).on("click",".btn-add-to-cart",function(){
         var nowOffsetX=$(this).parents("div.wrap-product-box").offset().left; // หาตำแหน่งสินค้า แกน x
        var nowOffsetY=$(this).parents("div.wrap-product-box").offset().top; // หาตำแหน่งสินค้า แกน y
        var moveOffsetX=$("div#wrap-my-cart").offset().left; // หาตำแหน่งตะกร้าสินค้า แกน x
        var moveOffsetY=$("div#wrap-my-cart").offset().top; // หาตำแหน่งตะกร้าสินค้า แกน y
        $(this).parents("div.wrap-product-box").addClass("added");  
        var nowObjPhoduct=$(this).parents("div.wrap-product-box").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
            nowObjPhoduct[0].style.cssText = "position: relative;opacity:1";
            let obj = nowObjPhoduct[0];
            $("div#wrap-my-cart").prepend(obj.outerHTML);
            obj.remove();
        });     
        return false;      
    });
 
    $(document.body).on("click",".btn-remove-from-cart",function(){ // เมื่อคลิกที่ปุ่มลบรายการ
      let proid = $(this).parents("div.wrap-product-box").data("proid");
      $(this).parents("div.wrap-product-box").fadeOut(function(){
        $("[data-proid='"+proid+"']").removeClass("added");
      }); // ลบรายการที่เลือก
      
    });  
  
});
</script>
</body>
</html>

เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 02-07-2020

แบบเพิ่มได้เรื่อยๆ

<!doctype html>
<html lang="th">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" >
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" >
</head>
<body>
 
<style type="text/css">
  div#wrap-my-cart div.wrap-product-box.added .btn-add-to-cart{
    display:none;
  }    
  div.wrap-product-box .btn-remove-from-cart{
    display:none;
  }  
  div#wrap-my-cart  .btn-remove-from-cart{
    display:inline-block;
  }
  div.product-item{
  	width: 150px;height: 50px;
  }
</style>  
<div class="container mt-5">
<table width="700" class="table">
  <tr>
    <td align="left" valign="top">
      <div class="wrap-product-box" data-proid="1">
	  	<div class="product-item" style="background-color: #CCCC66;">
			Product A
		</div>
        <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
          <i class="fas fa-cart-plus fa-fw mr-2"></i>
          Add To Cart</button>
        <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
          <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
          Remove</button>             
      </div>
      <div class="wrap-product-box" data-proid="2">
	  	<div class="product-item" style="background-color: #FF9999;">
			Product B
		</div>		
        <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
          <i class="fas fa-cart-plus fa-fw mr-2"></i>
          Add To Cart</button>
        <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
          <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
          Remove</button>          
      </div>
      <div class="wrap-product-box" data-proid="3">
	  	<div class="product-item" style="background-color: #00CCFF;">
			Product C
		</div>				
        <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
          <i class="fas fa-cart-plus fa-fw mr-2"></i>
          Add To Cart</button>
        <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
          <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
          Remove</button>          
      </div>
      <div class="wrap-product-box" data-proid="4">
	  	<div class="product-item" style="background-color: #FFCC66;">
			Product D
		</div>			
		  <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
			<i class="fas fa-cart-plus fa-fw mr-2"></i>
			Add To Cart</button>
		  <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
			<i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
			Remove</button>  
      </div>
  </td>
    <td width="200" align="left" valign="top" bgcolor="#F2F2F2">
    <form id="form_checkout" name="form_checkout" method="post" action="">
        <div id="wrap-my-cart">
        </div>
      </form>
      </td>
  </tr>
</table>  
  
</div>  
 
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
     
    $(document.body).on("click",".btn-add-to-cart",function(){
         var nowOffsetX=$(this).parents("div.wrap-product-box").offset().left; // หาตำแหน่งสินค้า แกน x
        var nowOffsetY=$(this).parents("div.wrap-product-box").offset().top; // หาตำแหน่งสินค้า แกน y
        var moveOffsetX=$("div#wrap-my-cart").offset().left; // หาตำแหน่งตะกร้าสินค้า แกน x
        var moveOffsetY=$("div#wrap-my-cart").offset().top; // หาตำแหน่งตะกร้าสินค้า แกน y
        $(this).parents("div.wrap-product-box").addClass("added");  

        var nowObjPhoduct=$(this).parents("div.wrap-product-box").clone(); // สร้าง object สินค้าใหม่ โดย copy จากตัวเดิม
        nowObjPhoduct.find(".btn-add-to-cart").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
            nowObjPhoduct[0].style.cssText = "position: relative;opacity:1";
            let obj = nowObjPhoduct[0];
            $("div#wrap-my-cart").prepend(obj.outerHTML);
            obj.remove();
        });     
        return false;      
    });
 
    $(document.body).on("click",".btn-remove-from-cart",function(){ // เมื่อคลิกที่ปุ่มลบรายการ
      let proid = $(this).parents("div.wrap-product-box").data("proid");
      $(this).parents("div.wrap-product-box").fadeOut(function(){
      //  $("[data-proid='"+proid+"']").removeClass("added");
      }); // ลบรายการที่เลือก
      
    });  
  
});
</script>
</body>
</html>

DEMO 1
DEMO 2

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

Tags:: jquery add to card

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

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน