ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้


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

เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee
add to card jquery

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

ดูแล้ว 22,718 ครั้ง




 ตัวอย่างต่อไปนี้เป็นแนวทางสำหรับนำไปปรับใช้ ในการทำระบบ 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/[email protected]/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/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/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/[email protected]/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/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>





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





Tags:: jquery add to card







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











สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ